CSS - The properties

January 2017




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


Published by jak58. Latest update on May 14, 2013 at 10:06 AM by jak58.
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).