Les différentes propriétés en CSS3

Décembre 2016


Beaucoup de nouvelles caractéristiques sont imaginées pour le CSS3. Je vais vous présenter ces nouvelles propriétés.

Attention, Internet Explorer n'interprète le CSS3 qu'à partir de sa Version 9.

Ici j'utilise le préfixe -moz- pour "Mozilla Firefox".

Sommaire



Les bordures


Le W3C permet d'effectuer de nouvelles actions sur les bordures.

Bordures en couleur fondue


La propriété -moz-border-colors: permet donc de faire plusieurs bordures de couleurs différentes (pour faire un dégradé par exemple).

La propriété peut être aussi utilisée comme ceci : -moz-borders-top-color: (ajout de bordures, top, bottom, left, right)

#mondiv {            
border:8px solid #000000;                
-moz-border-colors : #CC0000 #BB0000 #AA0000 #990000 #880000 #770000 #660000 #550000;                
padding: 5px ;                
}                


En image :

Les bordures avec des images


Le CSS3 permet, grâce à une image, un découpage prédéfini dans la propriété que l'on choisira.

Les deux propriétés :

border-image :
border-top-image
border-right-image
border-bottom-image
border-left-image


border-corner-image :
border-top-left-image
border-top-right-image
border-bottom-left-image
border-bottom-right-image



#mon-div {          
border-image: url(border.png) 27 27 27 27 round round;          
}          


En image :


          
#mon_div {          
border-image: url(border.png) 27 27 27 27 stretch stretch;          
}         

Arrondir le coin des bordures


La propriété CSS3 border-radius permet aux développeurs Web d'utiliser facilement des coins ronds dans leurs éléments de conception, sans avoir besoin d'images de coin ni de recourir à l'utilisation de balises div multiples, et est peut-être l'un des plus parlant des aspects de CSS3.


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

Faire de l'ombre en CSS3


Une nouvelle fonctionnalité du CSS3 implémentér à partir de la version 3.1 de Firefox, est la possibilité de faire des ombres de couleurs : c'est la propriété box-shadow.

La propriété prend 3 tailles et une couleur pour attributs, les tailles sont :

1. le décalage horizontal de l'ombre : un décalage positif, cela signifie que l'ombre apparaîtra sur la droite de la boîte, un décalage négatif fera apparaître l'ombre sur la gauche de la boîte.

2. le décalage vertical : une valeur négative signifie que le box-shadow apparaîtra sur le dessus de la boîte, une valeur positive décalera l'ombre en dessous de la boîte.

3. pour la netteté, plus la valeur sera proche de 0, plus l'ombre sera nette. Inversement, en se rapprochant de la valeur 1, l'ombre sera plus floue.

Exemples :

.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 15px;       
}       



C'est l'équivalent du text-shadow en CSS2 .

En savoir plus sur Alsacreations

Les arrières plan en CSS3

background-clip et background-origin


La propriété background-origin est utiliser pour déterminer la façon dont le background va se positionner dans une boîte.

Cette propriété prend trois valeurs : border-box, padding-box et content-box.

Une image vaut mieux qu'un long discours !


Les implémentations expérimentales ont pour propriétés :

-Webkit-background-origin / -moz-background-origin     
-Webkit-background-clip / -moz-background-clip     


Les implémentations stables

background-origin     
background-clip     

background-size


Le CSS3 vous donne un moyen de spécifier une taille pour vos images de fond. Vous pouvez spécifier cette taille en pixels, (height et width), ou en pourcentage. Lorsque vous spécifiez une taille en pourcentage, la taille est relative à la largeur ou la hauteur de la zone que vous avez attribué à la propriété background-origin.

Des arrières-plan multiple en CSS3


Rien de bien compliquer encore une fois :

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;     


Attention, ce sont deux propriétés expérimental !

Les couleurs en CSS3


Comme l'utilisation de couleurs RVB et hexadécimales, le CSS3 pourrait également voir l'introduction de la propriété HSL (Hue, Saturation, Luminosité).

HSL prend trois valeurs:

Hue correspond à la teinte : 0 (ou 360) est de couleur rouge, vert vaut 120 et, 240 est en bleu. Les autres valeurs sont des nuances de couleurs.

Saturation : La saturation est une valeur en pourcentage ou 100% est la couleur exacte.

Lightness : La lumière est également un pourcentage ou 0% est sombre (noir), et 100% totallement clair (blanc), 50% correspond à la moyenne.

Cela donne un très large éventail de choix en ce qui concerne le ton des couleurs

Jusqu'à présent, HSL a été mis en oeuvre dans Opera 9.5, Safari 3, Konqueror et Mozilla.

Exemple :

#mon_div_hsl {    
background-color: hsl(240,100%, 50%);     
}    

L'opacité en CSS3


La caractéristique la plus largement mise en oeuvre depuis le CSS3 est jusqu'à présent l'opacité. C'est probablement la plus attendu par la plupart des Webmasters.

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


L'opacité peut s'écrire en % ou sous la forme "0.1" pour 10%, "0.2" pour 20% ...

Les effets sur le texte

Text-shadow


Attention : Cette propriété est une propriété déjà présente en CSS2.

Pour faire une ombre sur du texte, plus besoin de Photoshop ...

   
#mon_texte_ombre {  
text-shadow: 2px 2px 2px #000;  
}  


Nous aurons alors une ombre noir !


Source (En)

Il reste bien d'autres propriétés en CSS3 non abordées ici, je volontairement choisis ceux, qui à mon goût sont les plus utiles et les plus utilisées !

A voir également :

Ce document intitulé «  Les différentes propriétés en CSS3  » issu de CommentCaMarche (www.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.