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 15:12, 7 June 2009
, 7 June 2009cross-browser stuff
(some examples) |
(cross-browser stuff) |
||
| Line 38: | Line 38: | ||
TODO: pic | TODO: pic | ||
With the help of a ''spread radius'', you can define smaller (or bigger) shadows than the element it is applied to: | |||
-moz-box-shadow: 0px 20px 10px -10px #888; | |||
<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> | |||
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]): | 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 62: | Line 71: | ||
As a newer, in-progress CSS3 property, box-shadow has not yet been widely adopted by browser makers. | 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. | * Firefox 3.5 supports the feature as <code>-moz-box-shadow</code>, as well as multiple shadows, the <code>inset</code> keyword and a spread radius. | ||
* Safari/WebKit has gone down a similar route as Firefox by implementing the feature as '''<code>-webkit-box-shadow</code>'''. Multiple shadows are supported since version 4.0, while neither inset shadows nor the spread radius feature are supported yet in WebKit. | |||
* 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. | |||
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. 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. | |||
== Template == | == Template == | ||