Sommaire

Des propriétés décoratives (ombre, dégradé, arrondi...)

Prenons le cas de la propriété box-shadow : box-shadow

box-shadow:0px 0px 5px 2px #000 inset;

box-shadow va créer une ombre portée sous le bloc, comme s’il était surélevé sur la page. Les deux premières valeurs, ici à 0px, indiquent la position x et y de l’ombre par rapport au bloc. La troisième valeur, 5px, indique que l’ombre a un flou qui va s’étendre sur 5 pixels. La valeur 2px indique la taille de l’ombre. La dernière valeur est pour la couleur de l’ombre, ici du noir. Ombre portée

Images/R4_13.PNG

La dernière valeur inset n’est pas obligatoire. En fait, seules les deux premières valeurs et la couleur sont obligatoires. Sans le mot inset, l’ombre est à l’extérieur du bloc. Avec inset elle est à l’intérieur du bloc.

Il est possible de créer plusieurs ombres, une extérieure et une intérieure, en les séparant d’une virgule :

box-shadow:0px 0px 20px 2px #0F0 inset, 0px 0px 5px 10px #F00;
Images/R4_13b.PNG

Il est possible aujourd’hui de faire de très jolis dégradés en CSS. Là encore, chaque navigateur n’accepte pas la même écriture. Dégradés

Le site http://www.colorzilla.com/gradient-editor/ propose un générateur qui facilite l’écriture et aide à produire un code valable sur tous ...