CSS regorge d'options pour améliorer l'apparence de vos sites Web. les ombres de texte et de boîte en sont de parfaits exemples. Ils offrent des résultats similaires aux ombres trouvées dans les logiciels de retouche d'image comme Photoshop.

Mais comment fonctionnent les ombres CSS? Plongeons dedans.

Comment utiliser CSS Box Shadow

Vous pouvez appliquer une ombre de boîte CSS avec une seule ligne de CSS contenant une plage de six valeurs maximum. L'ordre des valeurs est crucial pour que votre ombre de boîte CSS fonctionne, et cela ressemble à ceci :

box-shadow: décalage-x décalage-y flou répartir l'encart de couleur ;

Examinons chacune des valeurs dans l'ordre.

Position de l'ombre de la boîte CSS

Les valeurs offset-x et offset-y contrôlent la position de votre ombre de boîte. La valeur offset-x représente la position horizontale de l'ombre, tandis que offset-y est le décalage vertical.

 boîte-ombre: 10px 10px ;

Les valeurs positives entraînent une ombre en dessous et à droite de l'élément.

Vous pouvez également utiliser des valeurs négatives pour h-offset et v-offset :

instagram viewer 
 boîte-ombre: -10px -10px ;

Un décalage h négatif déplace l'ombre vers la gauche, tandis qu'un décalage v négatif la déplace vers le haut :

Flou de l'ombre de la boîte CSS

Comme vous pouvez le voir, l'ajout du décalage h et du décalage v à votre ombre crée une ombre solide sans aucun dégradé. La valeur de flou floute l'ombre de votre boîte CSS et prend effet si vous fournissez une troisième valeur :

boîte-ombre: 10px 10px 20px ;

Plus le nombre que vous ajoutez à la valeur de flou est élevé, plus l'ombre de votre boîte CSS sera floue. Cette valeur ne peut pas être négative.

CSS Box Shadow Spread

La valeur de propagation vous permet de modifier la taille de votre ombre sans modifier sa position.

 boîte-ombre: 10px 10px 20px 30px ;

Une valeur de propagation positive agrandira l'ombre de votre boîte CSS, tandis qu'une valeur négative la rendra plus petite.

Couleur de l'ombre de la boîte CSS

Les ombres de la boîte CSS utilisent par défaut la couleur du texte de l'élément, mais vous pouvez remplacer cela en ajoutant une couleur :

boîte ombre: 10pixels 10pixels 20pixels 10pixels #0000ff ;

La couleur que vous utilisez doit être dans un format de couleur légal CSS, comme un code hexadécimal, un code RVB ou une couleur prédéfinie. Tu peux en savoir plus sur les codes hexadécimaux et d'autres options de couleur légales CSS avant de commencer avec vos ombres.

Encart d'ombre de boîte CSS

Les ombres de boîte CSS tombent par défaut en dehors de leur élément assigné. En ajoutant un encart à la propriété box-shadow, vous pouvez afficher l'ombre à l'intérieur de l'élément.

boîte ombre: 10pixels 10pixels 20pixels 10pixels #0000ff encart ;

Il s'agit d'une valeur de texte prédéfinie; ajoutez-le ou supprimez-le simplement pour définir la valeur.

Comment utiliser CSS Text Shadow

Les ombres de texte CSS sont comme les ombres de boîte, bien qu'elles aient moins de valeurs à modifier. La syntaxe d'une ombre de texte CSS ressemble à ceci :

text-shadow: offset-x offset-y blur-radius color ;

Mais comment fonctionnent ces valeurs ?

Position de l'ombre du texte CSS

Les décalages d'ombre de texte CSS fonctionnent de manière très similaire aux mêmes valeurs d'ombre de boîte :

texte-ombre: 10px 10px ;

Les valeurs positives positionneront l'ombre en dessous et à droite du texte.

Les valeurs négatives font le contraire, plaçant l'ombre au-dessus et à gauche du texte.

 texte-ombre: -10px -10px ;

Vous pouvez mélanger des valeurs négatives et positives pour positionner parfaitement votre ombre de texte CSS.

Rayon de flou de l'ombre du texte CSS

Le rayon de flou de l'ombre du texte CSS vous permet de brouiller l'ombre derrière votre texte.

texte-ombre: 10px 10px 10px;

La valeur par défaut pour cette valeur est 0 (pas de flou).

Couleur de l'ombre du texte CSS

Par défaut, les ombres de texte CSS correspondent à la couleur du texte. Vous pouvez modifier la couleur de votre texte en l'ajoutant à la fin de la propriété CSS text shadow.

ombre de texte: 10pixels 10pixels 10pixels #0000ff ;

Comme les couleurs d'ombre de boîte CSS, vous devez utiliser une couleur légale CSS pour cela.

Exemples de conception de boîte et d'ombre de texte CSS

Vous pouvez commencer à expérimenter votre utilisation de la boîte CSS et des ombres de texte une fois que vous avez compris les bases. Les idées ci-dessous devraient vous inspirer pour trouver vos propres façons créatives d'utiliser ces propriétés CSS.

Bordures bicolores avec deux ombres de boîte CSS

Vous pouvez ajouter plus d'une ombre de boîte ou ombre de texte à un élément HTML. Tant qu'ils ont des virgules entre eux, vous pouvez ajouter de nouvelles ombres à une seule propriété.

boîte ombre: 30pixels 30pixels#0000ff, -30px-30px 0pixels#00ff00;

Cette bordure bicolore en est un bon exemple. Deux ombres de boîte CSS avec des positions opposées et sans flou/étalement produisent une excellente bordure créative.

Doubles ombres de texte CSS pour un effet dramatique

Dans la même veine que l'idée ci-dessus, vous pouvez ajouter et positionner plusieurs ombres de texte pour des résultats intéressants.

texte-ombre: 35px 20px 4px gris foncé, -35px -20px 4px gris foncé ;

Cet exemple montre une ligne de texte avec une ombre au-dessus et une ombre en dessous, les deux ayant des valeurs de couleur basées sur le texte.

Arrière-plans multicolores avec ombres de boîte CSS en médaillon

CSS est suffisamment puissant pour créer des actifs uniques et intéressants sans aucun fichier externe. L'utilisation d'une ombre de boîte CSS incrustée comme arrière-plan en est un excellent exemple.

boîte ombre: 20pixels 10pixels 10pixels 40pixels #000000 encart, -50px -30px 8px 60px encart gris, 30px 20px 6px 90px encart gris clair;

Cette boîte a un fond blanc, ainsi que trois ombres incrustées de différentes couleurs. Les ombres se chevauchent pour créer un arrière-plan unique.

Améliorer encore cet effet est une simple question de ajouter un dégradé d'arrière-plan CSS élégant à votre élément.

Ombres de boîte CSS et ombres de texte pour la conception Web créative

Les ombres de boîte et de texte CSS sont faciles à utiliser une fois que vous savez comment les utiliser. Vous disposez maintenant des outils dont vous avez besoin pour commencer à travailler sur vos propres conceptions, mais vous devez continuer à rechercher CSS pour améliorer vos compétences.