Cast Drop Shadow With CSS3

CSS3 Cast Drop Shadow Effect Demo and Code

View DemoGet Code

There are many neat things you can do with the box-shadow property in CSS. Many of them we see almost everywhere now, including the famed paper curl effect.

One effect I haven’t seen around though is a cast drop shadow, the kind you usually see under a device shot – for example an iPhone 5. I recently had the opportunity to create such a shadow for the refresh of the WordPress for Android home page.

The Idea

A drop shadow that’s more blurry towards the right and left sides, automatically adjusts to its parent element for width, and has a subtle skew for depth. Preferably using CSS pseudo elements rather than adding to the markup.

CSS & Markup Walkthrough

Skip ahead to final result

You need a parent element that is not a <img /> tag, since pseudo elements won’t work on the image itself. Other than that the HTML is pretty straightforward:

<div id="device">
<img src="#" width="#" height="#" alt="#" />
</div>

The #device element should have the same constraints as the image inside it, otherwise the shadow won’t be aligned properly. Relative positioning is also needed so that the pseudo element’s x/y coordinates are taken from the parent element and not the HTML body. The perspective property is important, it tells the browser how big the 3D space is.

#device {
width: 312px;
height: 264px;
position: relative;
perspective: 600px;
}

The image needs to be positioned above the pseudo element which is easily accomplished with this CSS:

#device img {
position: relative;
z-index: 2;
}

Now we’re getting to the good stuff. The pseudo element that will create the device shadow! First the basics. Pseudo elements are meant to be used for adding things like quote marks to a paragraph of text, but with a little trickery you can make it act like any other HTML element: add content: ""; and display: block;. Position absolute and a z-index means it’ll show up below the image, and the height + bottom px value sets it’s alignment with the bottom edge of the element.

content: "";
display: block;
position: absolute;
z-index: 1;
bottom: 1px;
height: 2px;

The shadow size settings is the tricky part. Since the shadow is scaled up 10x later to make it extra blurry on the right and left sides, you need to enter a tenth of the width you ultimately want here. You also have to make sure that the left value (X axis) is a negative half of the width.

/* Shadow size */
width: 8%;
left: -4%;
margin: 0 0 0 50%;

The transform property scales the element to be 10x wider, while making it slightly thinner, greatly exaggerating the drop shadow’s blurriness on the left/right sides compared to top/bottom. RotateX(45deg) gives the element a slight depth.

transform: rotateX(45deg) scale(10, .75);

Time to fill the element, both in and around. The solid black background color and multiple layered box shadows make the element easier to work with in different environments where you may want a different weight to the entire shadow. Thanks to the first few drop shadows being tight around the shape of the element and then branching out, there’s no hard line in between where the element stops and the drop shadow begins.

background: #000;
box-shadow: 0 0 1px #000, 0 0 2px #000, 0 0 3px #000, 0 0 5px #000, 0 0 5px #000, 0 0 5px #000, 0 0 7px #000, 0 0 12px #000;

Finally, setting the opacity property to the entire pseudo element allows us to change the weight of the drop shadow on the fly and easily adapt it in animations and similar.

-moz-opacity:.65;
filter:alpha(opacity=65);
opacity:.65;

The Result

This is what all the CSS looks like combined (View Demo):

#device {
    width: 312px;
	height: 264px;
	position: relative;
	-webkit-perspective: 600px;
	-moz-perspective: 600px;
	-ms-perspective: 600px;
	-o-perspective: 600px;
	perspective: 600px;
}

#device img {
	position: relative;
	z-index: 2;
}

#device:after {
	content: "";
	display: block;
	position: absolute;
	z-index: 1;
	bottom: 1px;
	height: 2px;
	
	/* Shadow size */
	width: 8%; /* Add a 10th of the width you want (scaled up later) */
	left: -4%; /* Half of the 10th of the width! */
	margin: 0 0 0 50%; /* Centers element before it's upscaled, don't change this */
	
	/* Transform: rotateX to create depth, scale to 10x to make left/right more blurry than top/bottom */
	-moz-transform: rotateX(45deg) scale(10, .75);
	-ms-transform: rotateX(45deg) scale(10, .75);
	-o-transform: rotateX(45deg) scale(10, .75);
	-webkit-transform: rotateX(45deg) scale(10, .75);
	transform: rotateX(45deg) scale(10, .75);

	/* Apply shadow & background */
	background: #000;
	-moz-box-shadow: 0 0 1px #000, 0 0 2px #000, 0 0 3px #000, 0 0 5px #000, 0 0 5px #000, 0 0 5px #000, 0 0 7px #000, 0 0 12px #000;
	-o-box-shadow: 0 0 1px #000, 0 0 2px #000, 0 0 3px #000, 0 0 5px #000, 0 0 5px #000, 0 0 5px #000, 0 0 7px #000, 0 0 12px #000;
	-webkit-box-shadow: 0 0 1px #000, 0 0 2px #000, 0 0 3px #000, 0 0 5px #000, 0 0 5px #000, 0 0 5px #000, 0 0 7px #000, 0 0 12px #000;
	-ms-box-shadow: 0 0 1px #000, 0 0 2px #000, 0 0 3px #000, 0 0 5px #000, 0 0 5px #000, 0 0 5px #000, 0 0 7px #000, 0 0 12px #000;
	box-shadow: 0 0 1px #000, 0 0 2px #000, 0 0 3px #000, 0 0 5px #000, 0 0 5px #000, 0 0 5px #000, 0 0 7px #000, 0 0 12px #000;
	
	/* Change opacity of entire element to tint shadow */
	-moz-opacity:.65;
	filter:alpha(opacity=65);
	opacity:.65;
}

That’s it for today. Hope this helps!

New, flashy user menus for IntenseDebate!

User menu design for IntenseDebate by Isaac KeyetA few days ago we went live with some new user menus for the IntenseDebate plugin. I’ve made the design of course, and while they’re meant to resemble the looks of the old menus in a lot of ways, there are some notable differences. The most striking change is of course the avatar being a part of the popup as this was not the case before. An enlarged avatar gives the reader a more personal and complete insight in a user profile.

The goal for the redesign was to remove non-vital elements from the menu, items that you’re probably not interested in until you know the other stuff anyway. It now shows the username in large letters, along with the reputation meter. If you have enabled your latest twitter messages, and have a description as well, now both will show – not one or the other like it was before. This is true for the IntenseDebate.com profile as well.

Of course I’m going for pixel-perfect, clean, and with fancy effects once you notice them. Hint: The “border” around the avatar is actually a semi-transparent sweet-looking box, and all buttons have fancy :hover and :active effects. All in a single CSS sprite of course. Hope you like it!

Spices for modern browsers: border-radius, box-shadow and text-shadow

While updating the blog I remembered what Matt Thomas mentioned a while ago: I like to give people using modern browsers a little something extra to reward them. Not a direct quote, but that was the idea.

There are a few very interesting CSS3 rules that only a select few of the web browsers have yet implemented. The more interesting for pure text/box styling in my mind are border-radius, box-shadow, and text-shadow.

Remember: Only use these properties to spice up your design, don’t rely on them for your visual appearance as they’re unsupported by a large majority still.

Border-Radius

Border-radius applies nicely rounded corners to any block level element (such as a <div>). The syntax is really straight-forward:

.className {
border-radius: 5px;
}

…Where 5px defines the size of the rounded corners.

Browser support

Border-radius is actually pretty well supported by many of the major browsers. For most, it’s a “beta” feature though, and so you’ll have to use multiple lines of CSS to make it work in all browsers that supports it.

.className {
/* Rounded corners in most browsers! */
-moz-border-radius: 5px; /* For Mozilla Firefox */
-khtml-border-radius: 5px; /* For Konqueror */
-webkit-border-radius: 5px; /* For Safari */
border-radius: 5px; /* For future native implementations */
}

Border-Radius Example

This is what a box with rounded corners would look like in Firefox. The light grey brown box that’s wrapping this guide also has the border-radius rule applied to it, so you can check it out yourself in Firefox 3.x, Safari 3.x or Konqueror to see it in action!

Box-Shadow

Box-shadow creates a drop shadow for a given block-level element (such as a <div>). The syntax is as follows:

.className {
box-shadow: 1px 2px 3px #666;
}

The first two values, 1px 2px define where the shadow should appear in X and Y coordinates. So 1px tells the browser to render the shadow 1px from the left side of the object, and 2px tells it to render it 2px below.

The third value, 3px sets the blur level of the shadow.

The last value, #666 simply defines the shadow’s color.

Browser support

Unfortunately, box-shadow is unsupported by most browsers out there today. To my knowledge, only Safari 3 support it, but you have to use experimental code. To kick box-shadow in for Safari, try this:

.className {
-webkit-box-shadow: 1px 2px 3px #666;
}

Box-Shadow Example

You can also look at the light brown box that is wrapping this guide in Safari 3 or greater to see the box-shadow in action.

Text-Shadow

Text-shadow creates a drop shadow for any text, but is practically better used for headers (such as a <h3>). The syntax is the exact same as for the box-shadow property:

.className {
text-shadow: 1px 2px 3px #666;
}

The first two values, 1px 2px define where the shadow should appear in X and Y coordinates. So 1px tells the browser to render the shadow 1px from the left side of the object, and 2px tells it to render it 2px below.

The third value, 3px sets the blur level of the shadow.

The last value, #666 simply defines the shadow’s color.

Browser support

Text-shadow is supported natively by Safari, but unsupported by every other major browser (not even in experimental properties).

Text-Shadow Example

This is a screenshot of what the title of this Text-Shadow guide looks like in Safari.

Links of interest on CSS3

  • CSS3.info – “All you ever needed to know about CSS3”
  • CSS-Tricks – Good source for tutorials, news, tips and tricks on using CSS.
  • 456 Berea Street – Writes about web standards and general tips for designers/developers.

Hope you enjoyed this guide. Now get coding!

Tips on Using the Outline CSS Property

Part 2 out of 2 (Part 1)

The only time a web designer notices the Outline property is when you want to disable it, and you’re wondering how to do so or if it’s even possible. But you can actually use the property to do very clever things.

At a first glance, the Border and the Outline property look very much alike. They share the same rule structure, and they both put a border around any object you want. But there are two fundamental differences.

1. When the browser calculates the width of a floated object, it takes into account Width, Padding and Border.

Notice how setting a border adds to the total width, while the outline doesn’t.

2. Since borders take up space, you can have problem aligning elements on a webpage using borders. However if you use an outline instead, the “border” will just be a layer on top of the image and won’t push your element anywhere. Notice how the second image’s inside border still lines up with the text.

This is very useful for registration processes, if you want to show a field that needs to be corrected: Instead of applying a border and having the textfield move X amount of pixels horizontally you can apply an outline!

How to use Outline, examples

Example:
.classNameHere {
outline: 1px solid #000000;
}
Example 2:
.classNameHere {
outline: 2px dotted #FF66CC;
}

I hope you enjoyed this little introduction to the Outline CSS property!

Get perfect Web 2.0 16x16px icons quickly!

Recently I faced the problem of either creating my own 16 square pixel icons, or use others. I started looking into how other services have solved the problem, and I realized after looking at Socialthing! that the best solution is also the most obvious and simple one: Just import the site’s own favicons!

Here are some examples of great 16×16 icons from well known sites:

  • Facebook: favicon
  • Last.fm: favicon
  • CNN: favicon
  • Yahoo!: favicon
  • Twitter: favicon

Almost all bigger sites out there have a favicon, so to find and download an icon just do the following:

  1. Enter root web adress in your browsers adress field: http://www.sitename.com
  2. Apply /favicon.ico to the adress, like so: http://www.sitename.com/favicon.ico
  3. Hit Enter to go to the adress, and there you are. This is the perfect 16px icon for the website you’ve entered!

Pure CSS animated menu

I’ve had this idea for a long time, to create a menu that would look animated but still being all CSS. The trick is to use the movement of the mouse over different objects to trigger other elements to change. Thanks to normal child selectors, nested elements and some padding animation is actually possible. The theory behind this is that the 1st element sets the size of the visible menu item, the 2nd changes this to a higher value, and so forth. You can also put in color changes and whatever else CSS you might want!

This is just a proof of concept, and I have no idea if it actually works in all browsers. I’ve developed this little example for Firefox 2. Mouse over the menu slowly and see what happens…

Confusing? I put in some borders in the example below, in an attempt to show off the theory behind it..

Hope you like it 🙂