link W3C close

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

#1 Les ombres portées et les ombres intérieures sur les bordures open

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

box-shadow: 10px 10px 0 gray;

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

box-shadow: -10px -10px 0 gray;

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

box-shadow: 0px 0px 25px gray;

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

box-shadow: 0px 0px 25px 10px gray;

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

box-shadow: inset 10px 10px 0 gray;

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

box-shadow: inset -10px -10px 0 gray;

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

box-shadow: inset 0px 0px 25px gray;

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

box-shadow: inset 0px 0px 25px 10px gray;

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 open

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

text-shadow: text-shadow: 2px 2px 0 #A0342F;

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

text-shadow: -2px -2px 0 #A0342F;

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

text-shadow: 0px 0px 5px black;

Ci-dessous, un effet 3D

Effet 3D

Ci-dessous, dessiner le contour des lettres

Contour

Deux liens vers des outils westciv.com cssgenerator.org