Shadows have been around since the beginning of CSS2, however the only browser supporting them then (and continually now) was Safari. Shadows can be applied in CSS3 to text and borders, as well as affecting images as well. There is also a quick + / – to which browsers support the box-shadow and text-shadow CSS3 effect.
The CSS3 box-shadow & text-shadow is written box-shadow: Apx Bpx Cpx #XXX;
- Apx = x-axis
- Bpx = y-axis
- Cpx = cast length / feathering
- #XXX = colour as usual
So now knowing this, we can start experimenting in the following ways…
Cross Brower Compatability
As previously mentioned in An introduction to CSS3, not all current browsers support CSS3 yet. The browser that best supports the CSS3 shadow effects is Safari, which means we will concentraite on using the -webkit- prefix.
All articles in the CSS3 will be updated to show future support & development.
This is a panel set with a 5 by 5 pixel box-shadow, cast by 7px.
- CSS3 Border Shadow
- #my_CSS3_id {
- border: 5px solid #111;
- -webkit-box-shadow: 5px 5px 7px #999;
- -webkit-border-bottom-right-radius: 15px;
- padding: 15px 25px;
- height: inherit;
- width: 590px;
- }
This effect can also be applied to images… 
Current Browser Support (Tested, Jan 2009)
- FireFox (3.0.5) – [FireFox (3.1 PreAlpha) is compatible]
- Google Chrome (1.0.154.36)
- Internet Explorer (IE6, IE7, IE8…)
- Opera (9.6)
- Safari (3.2.1, Windows)
An example for those on alternative browsers, not seeing the border-shadow effect..
HELLO CSS3 WORLD!
The above header has the following CSS 3 applied to it:
- CSS3 Text Shadow (Single)
- .my_CSS3_class {
- font-size: 3.2em;
- color: #F5F5F5;
- text-shadow: 3px 3px 7px #111;
- text-align: center;
- }
HELLO CSS3 WORLD!
The above header has the following CSS 3 applied to it:
- CSS3 Text Shadow (Multiple)
- .my_CSS3_class {
- font-size: 3.2em;
- color: #FFF;
- text-shadow: 0px -11px 10px #C60, 0px -3px 9px #FF0;
- text-align: center;
- padding: 10px 0px 5px 0px;
- background: #151515;
- }
Current Browser Support (Tested, Jan 2009)
- FireFox (3.0.5) – [FireFox (3.1 PreAlpha) is compatible]
- Google Chrome (1.0.154.36)
- Internet Explorer (IE6, IE7, IE8…)
- Opera (9.6) – [Also supporting multiple text shadows]
- Safari (3.2.1, Windows)
An example for those on alternative browsers, not seeing the text-shadow effect..
Zen Elements Blog | CSS3 Series
- CSS3: Introduction
- CSS3: Border Radius
- CSS3: Border Color
- CSS3: Shadows
- CSS3: Background Images
- CSS3: Multiple Column
- CSS3: Embedding A Font Face
- CSS3: Opacity
- CSS3: RGBA
- CSS3: HSL & HSLA
Subscribe to RSS or Email so you don’t miss the next article!
Thanks for reading,
Alex | Zen Elements
There is a little bug with Chrome when box-shadow and border-radius is combined, shows in your example but not as disastrous as mine http://nickcowie.com/2008/google-chrome-is-frustrating-me/
@Nick, hello. Thank you for stopping by and giving your feedback. Always appreciate it.
I see how you mean in your example for those CSS buttons, which is a good idea in itself. It is a great nuisance that even the newer browsers are giving poor support to the progression of CSS3 so I agree wholeheartily with when you argue ‘why we should care?’ in your post. If we want to see CSS3 (and the future generation languages), we should care and show the browsers we care. *waves a fist at them all*
Alex | Zen Elements
These style elements also work for Mozilla/Firefox but you have to add the vendor-specific “-moz” prefix. These are working fine for me using Firefox 3.1b2.
Thank you for the update. I will try get my hands on that version asap and amend after clarifying. Can see this will be a tricky series to keep tabs on so hurry up browsers and get compatible! ;)
Nice work on CSS3, more articles please