CSS - The properties

December 2016




Here below the different properties of CSS3 are being described:
The -moz- prefix is being used for "Mozilla Firefox".

Borders


W3C provide new options for borders!

Borders: color options


-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:

Borders with images


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

Rounding the corners


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) */           
}            

Shadow effects


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:

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

Background in CSS3

background-clip and background-origin


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  

background-size


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.

Multiple background in CSS3


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;

The colors in CSS3


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%);      
}    

Opacity in CSS3


Example of use:
#mon_div_opaque {   
opacity:0.1; /* ou 10% */   
}  

Text effects

Text-shadow


To add a shadow effect to your text:
#mon_texte_ombre {   
text-shadow: 2px 2px 2px #000;   
}  

Related :

This document entitled « CSS - The properties » from CCM (ccm.net) is made available under the Creative Commons license. You can copy, modify copies of this page, under the conditions stipulated by the license, as this note appears clearly.