link W3C open

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 && 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

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