Here below the different properties of CSS3 are being described:
The -moz- prefix is being used for "Mozilla Firefox".
W3C provide new options for borders!
-moz-border-colors property: allows to make borders of different colors (to make a gradient for example).
The property can also be used like this: -moz-borders-top-color: (add borders, top, bottom, left, right)
#mondiv { border:8px solid #000000; -moz-border-colors : #CC0000 #BB0000 #AA0000 #990000 #880000 #770000 #660000 #550000; padding: 5px ; }
In picture:
The properties:
border-image: border-top-picture border-right-Image border-bottom-picture border-left-picture border-corner-picture: border-top-left-picture border-top-right-Image border-bottom-left-picture border-bottom-right-Image #mon-div { border-image: url(border.png) 27 27 27 27 round round; }
In picture:
# {My_div border-image: url (border.png) 27 27 27 27 stretch stretch; }
The CSS3 border-radius property allows web developers to easily round the corners of their elements:
#conteneur { -moz-border-radius: 15px; /* Préfixe Moz pour Mozilla (non valide W3C)*/ border-radius: 15px; /* Aucun préfixe pour les navigateurs qui comprennent la propriété sans préfixe (valide W3C) */ }
CSS3 implement (as from version 3.1 of Firefox) the ability to make shadow : the box-shadow property.
The property use 3 sizes and a color as attributes, the sizes are:
1. the horizontal offset of the shadow: a positive offset, this means that the shadows appear on the right side of the box, a negative offset will bring the shadow on the left of the box.
2. the vertical offset: a negative value means that the shadow will appear on the top of the box, a positive value will shift the shadow at the bottom of the box.
3. Opacity (range 0 to 1): the more value will be close to 0, the shadow will lose in opacity.
Examples:
mbre { box-shadow: 10px 10px 5px #888; padding: 5px 5px 5px 15px; }
mbre_2 { box-shadow: -10px -10px 0px #000000; border-radius: 5px; padding: 5px 5px 5px
This is equivalent to the text-shadow property of CSS2.
The background-origin property is used to determine how the background will be positioned in a box.
This property takes three values: border-box, padding-box and content-box.
A picture is worth a thousand words!
Experimental implementations have the following properties:
-Webkit-background-origin / -moz-background-origin -Webkit-background-clip / -moz-background-clip
Stable implementations
background-origin background-clip
CSS3 gives you a way to specify a size for your background images. You can specify the size in pixels (width and height), or as percentage.
Nothing much more complicated once:
background: url(body-top.gif) top left no-repeat, url(banner_fresco.jpg) top 11px no-repeat, url(body-bottom.gif) bottom left no-repeat, url(body-middle.gif) left repeat-y;
Besides the use RGB and hexadecimal colors, CSS3 also include the HSL property (Hue, Saturation, Brightness).
HSL takes three values:
Hue: Red is 0 or 360, green is 120, and blue is 240.
Saturation: Saturation is a percentage value, where 100% is the exact color.
Lightness: The light is also a percentage or 0% is dark (black), and 100% totally clear (white), 50% is the average.
Example:
#mon_div_hsl { background-color: hsl(240,100%, 50%); }
Example of use:
#mon_div_opaque { opacity:0.1; /* ou 10% */ }
To add a shadow effect to your text:
#mon_texte_ombre { text-shadow: 2px 2px 2px #000; }
