Confirmed users
1,209
edits
Evangelism/Firefox3.5/35Days/Articles/-moz-box-shadow: Difference between revisions
Jump to navigation
Jump to search
Evangelism/Firefox3.5/35Days/Articles/-moz-box-shadow (view source)
Revision as of 16:18, 7 June 2009
, 7 June 2009final draft
(cross-browser stuff) |
(final draft) |
||
| Line 27: | Line 27: | ||
<span style="display:block; width:150px; height:50px; border:1px solid black; background-color: #00f; -moz-box-shadow: 1px 1px 10px #00f;"> </span> | <span style="display:block; width:150px; height:50px; border:1px solid black; background-color: #00f; -moz-box-shadow: 1px 1px 10px #00f;"> </span> | ||
[[File:35days-box-shadow-simple.jpg]] | |||
(Each of the examples in this article are live examples first, followed by a screen shot from Firefox 3.5 on OS X). | (Each of the examples in this article are live examples first, followed by a screen shot from Firefox 3.5 on OS X). | ||
| Line 37: | Line 37: | ||
<span style="display:block; width:150px; height:50px; border:1px solid black; background-color: #fff; -moz-box-shadow: inset 1px 1px 10px #888;"> </span> | <span style="display:block; width:150px; height:50px; border:1px solid black; background-color: #fff; -moz-box-shadow: inset 1px 1px 10px #888;"> </span> | ||
[[File:35days-box-shadow-inset.jpg]] | |||
With the help of a ''spread radius'', you can define smaller (or bigger) shadows than the element it is applied to: | With the help of a ''spread radius'', you can define smaller (or bigger) shadows than the element it is applied to: | ||
| Line 45: | Line 45: | ||
<span style="display:block; width:150px; height:50px; border:1px solid black; background-color: #fff; margin:30px; -moz-box-shadow: 0px 20px 10px -10px #888;"> </span> | <span style="display:block; width:150px; height:50px; border:1px solid black; background-color: #fff; margin:30px; -moz-box-shadow: 0px 20px 10px -10px #888;"> </span> | ||
[[File:35days-box-shadow-spread.jpg]] | |||
If you want, you can also define '''multiple shadows''' by defining several shadows, separated by commas (courtesy of [http://markusstange.wordpress.com/2009/02/15/fun-with-box-shadows/ Markus Stange]): | If you want, you can also define '''multiple shadows''' by defining several shadows, separated by commas (courtesy of [http://markusstange.wordpress.com/2009/02/15/fun-with-box-shadows/ Markus Stange]): | ||
| Line 54: | Line 53: | ||
<span style="display:block; width:150px; height:50px; border:1px solid black; background-color: #fff; margin:50px; -moz-box-shadow: 0 0 20px black, 20px 15px 30px yellow, -20px 15px 30px lime, -20px -15px 30px blue, 20px -15px 30px red;"> </span> | <span style="display:block; width:150px; height:50px; border:1px solid black; background-color: #fff; margin:50px; -moz-box-shadow: 0 0 20px black, 20px 15px 30px yellow, -20px 15px 30px lime, -20px -15px 30px blue, 20px -15px 30px red;"> </span> | ||
[[File:35days-box-shadow-multiple.jpg]] | |||
The different shadows blend into each other very smoothly, and as you may have noticed, the order in which they are defined does make a difference. As <code>box-shadow</code> is a CSS3 feature, Firefox 3.5 adheres to the CSS3 painting order. That means, the first specified shadow shows up ''on top'', so keep that in mind when designing multiple shadows. | The different shadows blend into each other very smoothly, and as you may have noticed, the order in which they are defined does make a difference. As <code>box-shadow</code> is a CSS3 feature, Firefox 3.5 adheres to the CSS3 painting order. That means, the first specified shadow shows up ''on top'', so keep that in mind when designing multiple shadows. | ||
| Line 64: | Line 63: | ||
<span style="display:block; width:150px; height:50px; border:1px solid black; background-color: yellow; -moz-box-shadow: inset 5px 5px 0 rgba(0, 0, 0, .5);"> </span> | <span style="display:block; width:150px; height:50px; border:1px solid black; background-color: yellow; -moz-box-shadow: inset 5px 5px 0 rgba(0, 0, 0, .5);"> </span> | ||
[[File:35days-box-shadow-rgba.jpg]] | |||
As you can see, the yellow background is visible though the half-transparent shadow without further ado. This feature becomes particularly interesting when background images are involved, as you'll be able to see them shining through the box shadow. | As you can see, the yellow background is visible though the half-transparent shadow without further ado. This feature becomes particularly interesting when background images are involved, as you'll be able to see them shining through the box shadow. | ||
| Line 75: | Line 74: | ||
* Finally, Opera and Microsoft Internet Explorer have not yet implemented the box shadow property, though in MSIE you may want to check out their proprietary [http://msdn.microsoft.com/en-us/library/ms532985(VS.85).aspx DropShadow filter]. | * Finally, Opera and Microsoft Internet Explorer have not yet implemented the box shadow property, though in MSIE you may want to check out their proprietary [http://msdn.microsoft.com/en-us/library/ms532985(VS.85).aspx DropShadow filter]. | ||
To achieve the biggest possible coverage, it is advisable to define all three, the <code>-moz</code>, <code>-webkit</code>, and standard CSS3 syntax in parallel. Applicable browsers will then pick and adhere to the ones they support | To achieve the biggest possible coverage, it is advisable to define all three, the <code>-moz</code>, <code>-webkit</code>, and standard CSS3 syntax in parallel. Applicable browsers will then pick and adhere to the ones they support. For example: | ||
-moz-box-shadow: 1px 1px 10px #00f; | |||
-webkit-box-shadow: 1px 1px 10px #00f; | |||
box-shadow: 1px 1px 10px #00f; | |||
The good news is that the <code>box-shadow</code> property degrades gracefully on unsupported browsers. For example, all the examples above will look like plain and boring boxes with no shadow in MSIE. | |||
3. | == Conclusions == | ||
The CSS3 <code>box-shadow</code> property is not yet as widely available in browsers (and therefore, to users) as, for example, the <code>text-shadow</code> property, but with the limited box shadow support of WebKit as well as the full support provided by Firefox 3.5 (as far as the current status of the feature draft is concerned), more and more users will be able to see some level of CSS box shadows. | |||
As a web developer, you can therefore use the feature, confident that you are giving users with modern browsers an improved experience while not turning away users with older browsers. | |||
== Further resources == | == Further resources == | ||