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 !
Publié par
alex59fr -
Dernière mise à jour le 10 octobre 2010 à 19:25 par alex59fr
