DEVENIR-WEBMASTER.COM Log In
 38
link W3C close

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

Visiter ma chaine Youtube

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

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.

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

# Les ombres portées sur les textes close

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
Effet 3D avec plusieurs text-shadow

Ci dessous dessiner le contour des lettres

Contour
Effet Contour avec plusieurs text-shadow

Deux liens vers des outils westciv.com cssgenerator.org