Les ombres portées et les ombres intérieures en CSS

CSS3 The box-shadow property

<shadow> = inset? && <length>{2,4} && <color>?

Les deux && signifient que pour les valeurs de <shadow>, les trois éléments inset? et <length>{2,4} et <color>? sont obligatoires et peuvent apparaître dans n'importe quel ordre. Les ? du inset et du <color> signifient que les deux sont optionnels.

Il reste donc deux à quatre occurrences de <length>. Deux sont obligatoires.

• inset pour une ombre intérieure
• Première valeur : décalage sur l'axe des X. Vers la droite si valeur positive.
• Deuxième valeur : décalage sur l'axe des Y. Vers le bas si valeur positive.
• Troisième valeur : taille du flou.
• Quatrième valeur : augmentation de la taille du flou dans toutes les directions si valeur positive.

Ci-dessous, une ombre portée avec un décalage positif horizontal et vertical

Ci-dessous, une ombre portée avec un décalage négatif horizontal et vertical

Ci-dessous, une ombre portée avec uniquement une valeur de flou sans décalage

Ci-dessous, une ombre portée avec uniquement une valeur de flou plus une valeur pour le renforcement de l'ombre

Ci-dessous, une ombre intérieure avec un décalage positif horizontal et vertical

Ci-dessous, une ombre intérieure avec un décalage négatif horizontal et vertical

Ci-dessous, une ombre intérieure avec uniquement une valeur de flou sans décalage

Ci-dessous, une ombre intérieure avec uniquement une valeur de flou plus une valeur pour le renforcement de l'ombre

Ci-dessous, un effet de cadre.

#box-cadre { box-shadow: 0 0 0 2px #000, 0 0 0 3px #999, 0 0 0 9px #e59d0c, 0 0 0 10px #8d8585, 0 0 0 16px #f6da24, 0 0 0 18px #000; border-radius:15px; }

Des outils pour pouvoir voir en temps réel ce que vous faites : cssgenerator.org westciv.com aliasdmc.fr

Avec un simple décalage ou un simple effet de flou il est plus difficile d'obtenir des effets agréables. Le plus souvent il faut recourir à une combinaison d'effets successifs.

CSS3 Text Shadows: the text-shadow property

text-shadow = none | [ <color>? && <length>{2,3} ]#

text-shadow peut prendre les valeurs none en ou exclusif avec [ <color>? && <length>{2,3} ]#

<color> est optionnel. Il y a deux ou trois occurrences de length>. L'ordre entre <color> et [ <color>? && <length>{2,3} ] n'a pas d'importance.

Le # signifie qu'il y a une ou plusieurs occurrences de [ <color>? && <length>{2,3} ] séparées par des virgules.

Ci-dessous un simple décalage vers la droite et vers le bas

Ci-dessous, un simple décalage vers la gauche et vers le haut

Ci-dessous, un simple effet de flou noir sur des lettres blanches

Ci-dessous, un effet 3D

#text-3D { text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15); background-color:#788991; }

Ci-dessous, dessiner le contour des lettres

#contour { color: #d8d6e9; text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black }

Deux liens vers des outils westciv.com cssgenerator.org