A few words of thanks would be greatly appreciated.

CSS - The properties

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:


#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.


.ombre {        
box-shadow: 10px 10px 5px #888;        
padding: 5px 5px 5px 15px;        

.ombre_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

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.

#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;   

A few words of thanks would be greatly appreciated.

Ask a question
CCM is a leading international tech website. Our content is written in collaboration with IT experts, under the direction of Jean-François Pillou, founder of CCM.net. CCM reaches more than 50 million unique visitors per month and is available in 11 languages.
This document, titled « CSS - The properties », is available under the Creative Commons license. Any copy, reuse, or modification of the content should be sufficiently credited to CCM (ccm.net).

Subscribe To Our Newsletter!

The Best of CCM in Your Inbox

Subscribe To Our Newsletter!