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 14:47, 7 June 2009
, 7 June 2009some examples
(a start) |
(some examples) |
||
| Line 6: | Line 6: | ||
As the CSS3 box shadow property is still a work in progress, however, it's been implemented as '''-moz-box-shadow''' in Firefox. | As the CSS3 box shadow property is still a work in progress, however, it's been implemented as '''-moz-box-shadow''' in Firefox. | ||
== How it works == | |||
Applying a box shadow to an element is straightforward. The [http://dev.w3.org/csswg/css3-background/#the-box-shadow CSS3 standard] allows as its value: | |||
none | <shadow> [ , <shadow> ]* | |||
where <code><shadow></code> is: | |||
<shadow> = inset? && [ <length>{2,4} && <color>? ] | |||
The first two lengths are the ''horizontal and vertical offset'' of the shadow, respectively. The third length is the ''blur radius'' (compare that to the blur radius in in the text-shadow property). Finally the fourth length is the ''spread radius'', allowing the shadow to grow (positive values) or shrink (negative values) compared to the size of the parent element. | |||
The <code>inset</code> keyword is pretty well explained by the standard itself: <blockquote>if present, [it] changes the drop shadow from an outer shadow (one that shadows the box onto the canvas, as if it were lifted above the canvas) to an inner shadow (one that shadows the canvas onto the box, as if the box were cut out of the canvas and shifted behind it).</blockquote> | |||
But talk is cheap, let's look at some '''examples'''. | |||
To draw a '''simple shadow''', just define an offset and a color, and off you go: | |||
-moz-box-shadow: 1px 1px 10px #00f; | |||
<span style="display:block; width:150px; height:50px; border:1px solid black; background-color: #00f; -moz-box-shadow: 1px 1px 10px #00f;"> </span> | |||
TODO: pic | |||
(Each of the examples in this article are live examples first, followed by a screen shot from Firefox 3.5 on OS X). | |||
Similarly, you can draw an '''in-set shadow''' with the aforementioned keyword. | |||
-moz-box-shadow: inset 1px 1px 10px #888; | |||
<span style="display:block; width:150px; height:50px; border:1px solid black; background-color: #fff; -moz-box-shadow: inset 1px 1px 10px #888;"> </span> | |||
TODO: pic | |||
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]): | |||
-moz-box-shadow: 0 0 20px black, 20px 15px 30px yellow, -20px 15px 30px lime, -20px -15px 30px blue, 20px -15px 30px red; | |||
<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> | |||
TODO: pic | |||
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. | |||
As a final example, I want to show you the combination of <code>-moz-box-shadow</code> with an [http://www.w3.org/TR/css3-color/#rgba-color RGBA color definition]. RGBA is the same as RGB, but it adds an alpha-channel transparency to change the opacity of the color. Let's make a black, un-blurred box shadow with an opacity of 50 percent, on a yellow background: | |||
-moz-box-shadow: inset 5px 5px 0 rgba(0, 0, 0, .5); | |||
<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> | |||
TODO: pic | |||
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. | |||
== Cross-Browser Compatibility == | |||
As a newer, in-progress CSS3 property, box-shadow has not yet been widely adopted by browser makers. | |||
* Firefox 3.5 supports the feature as <code>-moz-box-shadow</code>, as well as multiple shadows, the <code>inset</code> keyword and the spread radius. | |||
| Line 16: | Line 73: | ||
4. Links to appropriate documentation in developer.mozilla.org. | 4. Links to appropriate documentation in developer.mozilla.org. | ||
== Further resources == | |||
=== Documentation === | |||
* https://developer.mozilla.org/en/CSS/-moz-box-shadow | |||
* http://dev.w3.org/csswg/css3-background/#the-box-shadow | |||
=== Examples === | |||
* http://www.elektronotdienst-nuernberg.de/bugs/box-shadow_inset.html | |||
* http://markusstange.wordpress.com/2009/02/15/fun-with-box-shadows/ | |||
* http://www.css3.info/preview/box-shadow/ | |||