Owltastic 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
1pxindicates how much the shadow should be offset horizontally; in this case we’re telling the shadow to appear one pixel to the right. Using-1pxwould move the shadow one pixel to the left. - The second
1pxindicates 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-1pxwould move the shadow one pixel above the text. - The third
1pxvalue tells the shadow how much it should blur. Using0for 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.
60 Comments
Yay, I love this!! Thanks for sharing Meagan!
Your Cat Misty looks like a pirate… yarrr.
And text shadow is sexy…
Nice to see a writeup of how text-shadow exactly works. I’ve been using it for a while but haven’t known fully what each variable does.
Thanks, Meagan
Nice read… thanks for posting.
“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.”
Totally agree with this statement, it is time to move forward!
~ Aaron I
Megan thanks so much for posting this. Awesome work!
Great writeup. I’ve been sneaking more and more bits like this, as well as -webkit and -moz declarations, just to spruce things up for the more browser-savvy crowd.
Thanks for the article. My favorite part was the part with the cat. In the middle there.
I’m a fan of graceful degradation using things like this. Forget IE users; just give the extra niceties to those with relevant browsers. WordPress’s admin area does a good job of this — rounded corners everywhere and lots of shadows too while IE users see squares and no shadows.
Awesome stuff. I learn something new everyday!
Thank you for sharing this, Megan. Just last night I was messing around with gradients on Illustrator for use on a web page to give CSS-generated boxes drop-shadow like effects. Your tutorial gives me one more option. {:)
Box-shadow has been dropped from the spec, so this probably won’t continue to work in it’s current form, unless it gets dropped back in.
http://www.w3.org/TR/css3-background/#the-box-shadow
Very detailed and crisp! Rock hard CSS3 hardrock!
The very thing that I’ve been looking for, thanks for setting out in simplicity for us all
Great post! I was just recently browsing through your site as you were on the “40 Amazing Female Role Models for Web Designers” list, and today found this article from CSS Beauty News. Good work
!
Haven’t seen too many sites yet utilizing text-shadow but just yesterday I stumbled on http://analog.coop/, they use a subtle off-white text-shadow on all text (shadows are not in rgba but text colours are). Looks nice!
Your blog is really beautiful!
That is pretty sweet, dude.
YEP! thanks for share skills! i got it now
Sweet, Thanks for posting this
I hope it will be supported by Microsoft soon
Really beautiful post… Thanks.
-Deepu
You can get the same effect in IE using filters:
p{filter:progid:DXImageTransform.Microsoft.Shadow(color=’#000000′,direction=135,strength=2)}
(adjust properties accordingly)
There are performance issues so it’s not for every site but it could be useful to a client who demands it work in IE.
Thanks. But hey, I hope people won’t use it to often. I remember when Photoshop add the shadow feature for fonts. After that the whole web was overshadowed
Thanks for the tip, I’m implementing this tonight. Bonus: works on the iPhone.
Great post! Can’t wait to try it out
Great post Meagan. CSS3 ftw!
Wicked thank you, great post!
Well explained. Thanks for sharing the info.
Found your site through your 24 Ways article on “Making Your Mockup in Markup” – thanks so much for this informative article on these two “new” selectors – I now understand them and feel confident in using them in my work!
First of all I love love love your site, it’s so beautifully designed.
Great post, you really explain text-shadow and box-shadow well. I am just getting in CSS3. Thank you.
Idil
I realized the power of this a few weeks ago while writing a plugin for WordPress to get images from flickr. I wanted the images to have drop shadows, but when one user put the plugin on a site with a dark background the shadows were too light. Now I’ve started using RGBa for all the shadows that I need.
Thank you for bringing together two of my greatest loves: Owls and CSS3 tricks.
Like another commenter, I also came across this post via your 24 Ways article on “Making Your Mockup in Markup”.
Misty is one smart cat! Thank you for sharing how to make this happen. I cannot wait to try it out. And others have said it, and I will say it too… your website is quite lovely.
all nice and well, but unless Microsoft finally develops a compliant browser all these techniques are only visible to a minority of page visitors. Worse: in IE8 you only see, instead of a nice text shadow, a badly rendered text with a jagged edge = not at all an attractive design for 60%+++ of all site visitors!
I use text and box shadow on my site.
Do you know if there is any possibility to validate this ?
Great post Cheers
oh god… i hate IE
Box-shadow and drop shadow are good, but how to make the shadow look like a glow.. outer glow.. like shadow in but it’s spread to every direction.. is that possible?
Great one.. but IE not supporting
Great post, using your css technique will greatly help reduce graphical effects used. It will be awesome when all browsers recognize it.
Thanks for sharing and keep ‘em coming.
Very nice work…thanks for sharing…
This is really good one.
This is really good one.
Shadows non IE
I would say that your text shadows are sexy, but that’s because you’re being very subtle about them. I think that too much shadow is a bad thing. Hopefully CSS3 people will not resort to dark drop shadows behind everything. It’s all in the tiny details.
good idea Thank
Love it. IE users will come round eventually.
This is a beautiful site.
http://www.islamabadid.com/listen_to_fm_radios_islamabad/fm_100_islamabad/
I want to change the background of the above page
Can any body help me
Text shadows ARE sexy! Lovely article introducing me to CSS3, thanks for showing me how it is done
Finally I found clear and step by step tutorial how to use shadows properties in css 3. thanks
I don’t use shadows very often (I do software, not design), but when I do, I come here for reference. It happens to be exactly one year after this post was written, but I can’t remember a time when I didn’t use this as my reference for box- and text-shadow. Thanks.
It also works in Chrome.
box-shadow also has an optional ‘spread radius’ value
Text shadows is useful but only in places where you want an image to stand out that little bit more.As some one already pointed out too much shadow is a bad thing. With using CSS3 shadow people will have to sort out that detail them selfs. So taken that in to account Text shadow can be sexy at times.
Shadows and CSS3 works in Chrome but not as good I think.
Thanks a lot for another great tutorial. This website has been my gateway to HTML 5 and CSS 3.
I like the letter press ideas, I wanted to let you know I’ll be using it on my site!!
- Aaron
I will be using this effect when I get my site up and running. Thanks for this tutorial, never underestimate the power of CSS!
-Joe
I have been browsing online more than three hours today, yet I never found any interesting article like yours. It is pretty worth enough for me. In my view, if all web owners and bloggers made good content as you did, the internet will be much more useful than ever before.
Hello there, just became aware of your blog through Google, and found that it is really informative. I am gonna watch out for brussels. I will be grateful if you continue this in future. Numerous people will be benefited from your writing. Cheers!
I agree. The cat is definitely stashing some pieces of eight!
Thanks for the info, I have been helpful.
PD: That cat’s a little scary xD
People who use IE hate the internet. Fact.
59 Trackbacks
[...] via Owltastic — by Meagan Fisher. [...]
[...] http://owltastic.com/2009/12/shadows-and-css3/ sombras text-shadow con #CSS3 # [...]
[...] Dan Cederholm teach this at An Event Apart and in Bulletproof Web Design. Meagan Fischer also has a recent tutorial with black as the example shadow color. Dan and Meagan are better designers and smarter people than [...]
Shadows and CSS3…
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?…
[...] full post on Owltastic [...]
[...] вариант на статийката тук : http://owltastic.com/2009/12/shadows-and-css3/ Share this [...]
[...] A wide and closeup view of the design with gradients, text-shadow and box-shadow added. For information on how to implement text-shadow and box-shadow using RGBA, check out the article I wrote on it last week. [...]
[...] property it’s now simple and easy to create the effect with pure CSS. No Photoshop trickery here!Shadows and CSS3I’m currently working on a design that uses text-shadow and box-shadow, with RGBA in place to [...]
[...] http://owltastic.com/2009/12/shadows-and-css3/ [...]
[...] Shadows and CSS3I’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. [...]
[...] Shadows and CSS3I’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. [...]
[...] property it’s now simple and easy to create the effect with pure CSS. No Photoshop trickery here!Shadows and CSS3I’m currently working on a design that uses text-shadow and box-shadow, with RGBA in place to [...]
[...] Shadows and CSS3I’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. [...]
[...] Shadows and CSS3I’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. [...]
[...] Shadows and CSS3 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. [...]
[...] Shadows and CSS3 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. [...]
[...] Shadows and CSS3 [...]
[...] Shadows and CSS3 [...]
[...] 18.) Shadows and CSS3 [...]
[...] 18.) Shadows and CSS3 [...]
[...] Shadows and CSS3 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 elements. This effect is becoming hugely popular in web design through the internet.Owltastic Effect – Design your text-shadow and box-shadow elements to look great on your web design with nice and [...]
[...] added. For information on how to implement text-shadow and box-shadow using RGBA, check out the article I wrote on it last week.37 pieces of flairOkay, maybe you don’t need that much flair, but it couldn’t hurt to [...]
[...] 18.) Shadows and CSS3 [...]
[...] Shadows and CSS3 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. [...]
[...] http://owltastic.com/2009/12/shadows-and-css3/ [...]
[...] Shadows and CSS3 [...]
[...] A wide and closeup view of the design with gradients, text-shadow and box-shadow added. For information on how to implement text-shadow and box-shadow using RGBA, check out the article I wrote on it last week. [...]
[...] Shadows and CSS3 Animation [...]
[...] Owltastic Effect – Design your text-shadow and box-shadow elements to look great on your web design with nice and effective text effects. [...]
[...] Shadows and CSS3 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. [...]
[...] http://owltastic.com/2009/12/shadows-and-css3/ [...]
[...] Shadows and CSS3 [...]
[...] 23.Shadows and CSS3 [...]
[...] owltastic.com/2009/12/shadows-and-css3/ [...]
[...] 12. Shadows And CSS3 [...]
[...] 12. Shadows And CSS3 [...]
[...] 12. Shadows And CSS3 [...]
[...] 12. Shadows And CSS3 [...]
[...] Shadows And CSS3 [...]
[...] article contains a simple and easy to implement tutorial about using the @font-face property.Shadows and CSS3 design that uses text-shadow and box-shadow, with RGBA in place to create the shadow color. I wanted [...]
[...] Länk: http://owltastic.com/2009/12/shadows-and-css3/ [...]
[...] 50 Excellent CSS3 Tutorials Example: Selectors Introduced In CSS3 40 Brilliant CSS3 Techniques and Tutorials Example: Shadows and CSS3 [...]
[...] 50 Excellent CSS3 Tutorials Example: Selectors Introduced In CSS3 40 Brilliant CSS3 Techniques and Tutorials Example: Shadows and CSS3 [...]
[...] Shadows and CSS3 [...]
[...] Shadows and CSS3 [...]
[...] http://owltastic.com/2009/12/shadows-and-css3/ [...]
[...] Shadows and CSS3 [...]
[...] Shadows and CSS3 [...]
[...] Offical Link [...]
[...] Shadows and CSS3 [...]
[...] compatibility isn’t really an issue for this technique.I should note that I’m not the first to come up with this technique, and that it isn’t perfect. Chris Coyier argues against it, [...]
[...] Shadows and CSS3 [...]
[...] Shadows and CSS3 – Meagan Fisher [...]
[...] 23.Shadows and CSS3 [...]
[...] Shadows and CSS3 [...]
[...] Shadows and CSS3 [...]
[...] enseigner cela sur An Event Apart et sur Bulletproof Web Design. Meagan Fischer a aussi un tutoriel récent avec le noir comme exemple d’ombre. Dan et Meagan sont de bons designers, et je [...]
[...] The best part is that while regaining the use of variable text with drop-shadows, the code is only one line and easy to customize. For a more detailed post and a couple of examples, be sure to read through Meagan Fisher’s quick tutorial: Shadows and CSS3. [...]