HTML5 - Boîte d'ombre

C'est l'une des caractéristiques les plus attendues de la nouvelle norme de CSS3 et que conjointement avec HTML5 parvient à attirer de nombreux regards, nous nous référons à la Boîte ombre qui nous permet de placer des ombres sur les cases de notre document HTML, générant ainsi un effet comme s'il flottait sur la page.
L'élément Box Shadow doit être constitué comme suit :
box-shadow: hoffset voffset blur spread color insert
Lorsque chacun de ses attributs remplit une fonction, voyons chacun d'eux en détail :

• Hoffset : C'est le décalage horizontal, qui est une valeur de longueur. Une valeur positive déplace le Boîte ombre à droite, par contre, une valeur négative décale le Box Shadow vers la gauche.

• Décalage : C'est le décalage vertical, qui est une valeur de longueur. Une valeur positive déplace l'ombre de la boîte au-dessous de la boîte de l'élément et une valeur négative déplace l'ombre de la boîte au-dessus de la boîte de l'élément.

• Se brouiller: (Facultatif) Spécifie le rayon de la définition de l'ombre, qui est une valeur de longueur. Plus la valeur est élevée, plus le bord de la boîte de l'article reste flou. Pour la valeur par défaut de 0, la bordure de l'ombre de la boîte semble entièrement définie.

• Propager: (Facultatif) Spécifiez le rayon de diffusion de l'ombre, c'est une mesure de longueur. Une valeur positive provoque l'expansion de l'ombre dans toutes les directions de la boîte de l'élément conteneur, et une valeur négative provoque la contraction de l'ombre de l'élément conteneur.

• Couleur: (Facultatif) C'est la couleur de l'ombre. S'il est omis, le navigateur décidera de la couleur.

• Encart : (Facultatif) Rend l'ombre projetée à l'intérieur de la boîte de l'élément auquel elle est appliquée.

Une fois que nous connaissons les attributs, passons rapidement à un exemple de code pour mettre en pratique ce que nous avons appris.

 Exemple
Il existe de nombreuses sortes de fruits - il existe plus de 500 variétés de bananes à elles seules. Au moment où nous ajoutons les innombrables types de pommes, d'oranges et d'autres fruits bien connus, nous sommes confrontés à des milliers de choix.

Comme nous pouvons le voir, nous pouvons appliquer le Boîte ombre Dans le CSS à l'intérieur de la balise style, ce code génère le résultat suivant :

Un autre aspect intéressant est que dans la même déclaration d'une Box Shadow, nous pouvons spécifier plusieurs ombres, par exemple, dans le code suivant, nous allons inclure une ombre supplémentaire dans l'encart, voyons :

 Exemple
Il existe de nombreuses sortes de fruits - il existe plus de 500 variétés de bananes à elles seules. Au moment où nous ajoutons les innombrables types de pommes, d'oranges et d'autres fruits bien connus, nous sommes confrontés à des milliers de choix.

Voyons maintenant comment les deux ombres sont affichées dans notre élément :