Writings about web design by Meagan Fisher

Shadows and CSS3

Posted by Meagan Fisher on December 14th, 2009

I’m currently working on a design that uses text-shadow and box-shadow, with RGBA in place to create the shadow color. I wanted to tweet about this technique because it’s simple and awesome, but to my surprise I couldn’t find a good, quick tutorial that covered the use of both text and box-shadow, along with RGBA. So I decided to create one.

I learned this technique from Dan Cederholm’s Handcrafted CSS book, so if you’re able I’d recommend just going out and grabbing that, as he explains it much more elegantly and thoroughly than I ever could.

Text-shadow

Applying text-shadow to elements is easy, and coupled with RGBA it works beautifully. Since both text-shadow and RGBA are supported by Safari, Firefox, Konqueror, and Opera, why not start playing with them now?

Text shadow is sexy.

If you’re using one of the aforementioned browsers, you should see a nice drop shadow on the text above. (If you’re not — why?) This drop shadow is created using the following code:

text-shadow: 1px 1px 1px rgba(0,0,0,.4);

Breaking it down

• The first 1px indicates how much the shadow should be offset horizontally; in this case we’re telling the shadow to appear one pixel to the right. Using -1px would move the shadow one pixel to the left.
• The second 1px indicates how much the shadow should be offset vertically; in this case we’re telling the shadow to appear one pixel lower than the text. Using -1px would move the shadow one pixel above the text.
• The third 1px value tells the shadow how much it should blur. Using 0 for this value would create a solid drop shadow, which has a blocky, high-contrast effect. Using only this value (ex. text-shadow: 0 0 1px rgba(0,0,0,.4);) would create an outer glow.
• rgba(0,0,0,.4); gives the shadow its color. In this case we’re using (0,0,0), which is the RGB value for black, and we’re giving that black an opacity of 40%, or .4.

Why use RGBA for the shadow color?

Using RGBA instead of a solid color for the shadow is great because it allows some of the page’s background color to bleed through. This means that the shadow will blend nicely with the page’s existing color scheme, and if you ever change up the site’s background color your shadows will change too. If you’re unclear about how rgba works, check out Drew McLellan’s 24ways article.

So now you should be able to implement text-shadow and RGBA in your designs. This technique is very powerful, as it can be used to make text jump off the page:

Text shadow is sexy.

or appear to be set into the page:

Text shadow is sexy.

Box shadow

Once you know how to use text-shadow + RGBA to achieve drop shadows, you’re well on your way to mastering box-shadow. The syntax is exactly the same, so box-shadow: 0 1px 10px rgba(0,0,0,.1); will create a black shadow at 10% that’s centered horizontally, one pixel down, with a ten pixel blur.

Misty the one-toothed cat thinks box shadow is awesome.

Box shadow is supported in Safari and Firefox 3.5, but like border-radius it requires the use of vendor-specific properties. So assuming we wanted to add a drop shadow to an image in Safari and Firefox, here’s how we’d code it:

-webkit-box-shadow: 0 1px 10px rgba(0,0,0,.1);
-moz-box-shadow: 0 1px 10px rgba(0,0,0,.1);
box-shadow: 0 1px 10px rgba(0,0,0,.1);

You’ll notice I included the standard box-shadow property; this is in place for future browsers who may one day support this property.

There you have it! Once again your shadow blends nicely with the background because you’re using RGBA, and creates a kick-ass 3-D effect with minimal markup.

Box-shadow and text-shadow may not be for every project, but since they’re so easy to implement and browser support for these features is growing, why not try them out?

I can hear some of you naysayers yelling about Internet Explorer, but really is it so bad if some users get to see shadows and some don’t? The design won’t be broken for IE people, they’re just missing out on a few visual treats that other users will see.

If you’re not sold on the argument that we should reward users who choose modern browsers, check out Dan’s Handcrafted CSS book, Aaron Gustafson’s A List Apart article and Andy Clarke’s multiple well written articles on the subject.

77 People are talking. Say something »

---

On public speaking

Posted by Meagan Fisher on May 12th, 2009

Despite the thrill of returning to London and being invited to speak at FOWD, my primary emotion leading up to the talk was terror. The Future of Web Design conference plays hosts to approximately 600 attendees, and this was my first time speaking to a group larger than 50.

Now that the presentation is over, I can say that I don’t think the size of the audience really matters. There’s a handful of rules that have always helped me when speaking to a group of strangers, and though I’m no expert I thought I’d pass them along:

• If you don’t know your material, it shows. This might sound obvious, but talk about something you’re genuinely passionate about, and be intimate with the material. I’m a chronic procrastinator, so my slides weren’t completely finished until the night before my talk, but I’d been obsessively reading about mobile web design since Louise first advised me to go with that subject.
• A Dan Cederholm Speaking Tip™: include humor. I couldn’t tell if anyone laughed during my presentation because the pounding in my ears was too deafening, but just attempting a joke made me laugh a little, which helped to calm the shaking.
• Bring water on the stage. I’m not sure what biological fight or flight role comes in to play that causes your mouth to dry up in moments of dread, but it happens. As I stepped on to the stage, my face felt like it does when the dentist has me suck on one of those hateful vacuum straws. I would have dived off the stage and stolen an attendee’s bottle of water if my feet hadn’t turned to cement blocks.
• Be as physically comfortable as possible. For me this entailed wearing my soft, breathable (product placement alert!) Charge Tee. (More sizes just posted!) I did make one crucial wardrobe error: I forgot to wear a belt, and was worried about pant sagging for most of the talk. SO! Bring a belt, avoid risky shoes (mostly talking to the ladies here), and don’t wear your lanyard on stage. They’re flappy and itchy and look kind of silly.

My biggest takeaway from presenting is that it’s sort of like lifting a car off a trapped baby.* At first it seems terrifying and impossible, but once your adrenaline kicks in it’s kind of a blur, and you just do what you have to do.

* I guess you could argue that lifting a car off a trapped baby is harder / scarier / more impressive. I guess.

15 People are talking. Say something »

---