CSS3 - Box Shadow |
| Written by ricdata | |||
| Sunday, 01 May 2011 19:46 | |||
 Finally, after a long wait, all the most used Web browsers are been updated to support CSS3, so it's time to start learning how to use them and use them on our sites Joomla! to create effects and animations that were previously only available through Javascript.A short introduction before we start: not all browsers use the same graphics engine, so we put in our style sheet instructions for all the rendering engines most used, as Webkit (Safari, Chrome) , Direct2D (Firefox, IE9 +), Gecko (Firefox, SeaMonkey, Camino). For more information please refer to Wikipedia. In this article we will see how to create the shadow effect to elements such as DIV, TABLE, LI, and more generally for every HTML element. This is the CSS code: We analyze the attributes in order to better understand how to customize the features of the shadow to suit our needs. - the first value, in pixels, determines the horizontal shadow alignment. - The second value determines the vertical alignment. - the third value, set the shadow blur. - the fourth, hexadecimal value (but you can also use RGBA), is the shadow color. Some examples:
But there's more... We want an inner shadow element? We can do this, just adding the "inset" attribute for each directive. So we'll have: other examples:
Browsers Compatibility:
|
