Les ombres portées et les ombres intérieures en CSS
#1
Les ombres portées et les ombres intérieures sur les bordures
<shadow> = inset? && <length>{2,4} && <color>?
Les deux &&
signifie 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.
Le ?
du inset
et du <color>
signifie
que les deux sont optionnels.
Il reste donc deux à quatre occurrences de <length>
. Deux sont obligatoires.
- inset pour une ombre intérieure
- 1ière valeur : décalage sur l'axe des X. Vers la droite si valeur positive.
- 2ième valeur : décalage sur l'axe des Y. Vers le bas si valeur positive.
- 3ième valeur : taille du flou.
- 4iè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.
Des outils pour pouvoir voir en temps réel ce que vous faites : cssgenerator.org westciv.com aliasdmc.fr
#2
Les ombres portées sur les textes
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.
#
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
Ci-dessous dessiner le contour des lettres
Deux liens vers des outils westciv.com cssgenerator.org