Effet de l'ombre de la boîte dans CSS

L'amélioration de l'expérience utilisateur de votre site Web joue un rôle essentiel pour attirer l'attention de l'utilisateur. Il existe plusieurs façons que vous pouvez utiliser pour effectuer cette tâche. Un moyen évident consiste à embellir l'apparence générale de votre site Web et cela peut être fait en ajoutant des couleurs, des images, des animations sur le site Web. Une autre chose intéressante qui peut améliorer l'apparence du site Web est divers types d'effets d'ombre. Dans CSS, il existe deux types d'effets d'ombre qui sont du Text-Shadow et de la Box-Shadow. Dans cet article, nous allons tout vous dire sur l'effet de box-shadow.

CSS Box Shadow

Dans le but d'ajouter des ombres à divers éléments HTML, utilisez la propriété Box-Shadow. Ci-dessous, nous avons démontré différentes façons d'utiliser pour ajouter une ombre à vos éléments HTML.

Ajouter une ombre horizontale et verticale

Pour ajouter un effet d'ombre sur un certain élément horizontalement et verticalement, donnez simplement des valeurs aux deux dimensions de la propriété Box-Shadow. Considérez l'exemple suivant.

Html

Effet de l'ombre de la boîte d'apprentissage

Ici, nous créons simplement un élément div pour démontrer le concept de l'effet Box-Shadow.

CSS

div
Largeur: 250px;
hauteur: 150px;
rembourrage: 10px;
Color d'arrière-plan: bisque;
Box-shadow: 9px 9px;

En utilisant CSS, nous fournissons une largeur, une hauteur, un rembourrage et une couleur d'arrière-plan à l'élément div. Enfin, en utilisant la propriété Box-Shadow, nous avons donné 9px aux dimensions horizontales et verticales de l'ombre. Notez que l'ombre aura la même couleur que le texte présent à l'intérieur de l'élément div.

Sortir

Une ombre horizontale et verticale a été ajoutée au conteneur div.

Ajouter de la couleur à l'ombre

Comme déjà mentionné, par défaut, la couleur de l'ombre sera la même que celle du contenu présent à l'intérieur de l'élément, vous pouvez changer sa couleur en le spécifiant dans la propriété Box-Shadow. Utilisez l'extrait de code suivant.

CSS

div
Box-Shadow: 9px 9px LightEagreen;

Ici, nous avons spécifié la couleur de l'ombre.

Sortir

Une ombre de lightEagreen a été ajoutée à la boîte.

Ajoutez un effet flou à l'ombre

Dans le but d'ajouter un flou à l'ombre, spécifiez l'intensité de flou dans la propriété Box-Shadow. Suivez l'exemple ci-dessous.

CSS

div
Box-Shadow: 9px 9px 7px RVB (32, 178, 170);

Nous avons réglé l'intensité floue sur 7px. Notez que l'effet flou améliore lorsque vous augmentez l'intensité floue.

Sortir

Un effet flou a été ajouté avec succès.

Modifier la taille de l'ombre

Afin de modifier la taille de l'ombre, vous pouvez spécifier l'intensité de propagation de l'ombre. L'intensité de propagation définit essentiellement la propagation de l'ombre plutôt que la taille. Voici comment tu fais.

CSS

div
Box-shadow: 9px 9px 7px 10px LightEagreen;

Dans le code ci-dessus, nous avons d'abord réglé les dimensions horizontales et verticales de l'ombre sur 9px, puis nous avons réglé l'intensité floue sur 7px et enfin spécifié l'intensité de propagation comme 10px.

Sortir

Une ombre avec une intensité de propagation spécifique est appliquée comme vous le souhaitez.

Note: Afin de diminuer la propagation de l'ombre, attribuez des valeurs négatives au rayon de propagation.

Tous les exemples mentionnés ci-dessus montrent comment ajouter une ombre extérieure à un élément. Cependant, vous pouvez également ajouter une ombre intérieure à un élément.

Ajouter une ombre intérieure

À cette fin, insérez simplement un paramètre d'encart sur la propriété Box-Shadow. Suivez l'extrait de code ci-dessous:

CSS

div
Box-Shadow: InSet 9px 9px 7px LightEagreen;

En plus de définir la taille, le rayon flou et la couleur de l'ombre, nous avons transformé l'ombre extérieure en une ombre intérieure en utilisant «encadré».

Sortir

Une ombre intérieure a été ajoutée avec succès.

Ajout de plusieurs ombres

Pour ajouter de nombreuses ombres sur un élément, vous pouvez ajouter une liste d'ombres à la propriété Box-Shadow séparée par des virgules. Voici un exemple.

CSS

div
Box-Shadow: 6px 6px LightEagreen, 8px 8px Lightalmon, 12px 12px LightskyBlue;

Ici, nous ajoutons trois ombres différentes, chaque ombre ayant une taille et une couleur spécifiques.

Sortir

Plusieurs ombres ont été ajoutées avec succès.

Ayant la connaissance du rayon de propagation, de l'ombre intérieure et de plusieurs ombres, vous pouvez faire une autre chose amusante avec des ombres. Considérez l'exemple ci-dessous.

CSS

div
Box-Shadow: InSet 6px 6px 10px LightEagreen,
encart -6px -6px 10px LightSlategrey;

Dans le code ci-dessus, nous ajoutons deux ombres intérieures sur le même élément, mais les deux ombres ont des positions et des couleurs différentes.

Sortir

Deux ombres intérieures ont été ajoutées avec succès.

Conclusion

Dans le but d'ajouter une ombre à l'élément HTML, la propriété CSS Box-Shadow est utilisée. Vous devez spécifier la longueur de la dimension horizontale ainsi que la dimension verticale de l'ombre dans la propriété Box-Shadow. Vous pouvez également ajouter de la couleur et un effet flou à l'ombre d'un élément. En dehors de cela, la propriété Box-Shadow vous permet d'améliorer la propagation d'une ombre ou d'ajouter une ombre intérieure à un élément. Ce tutoriel est conçu pour vous guider sur diverses façons qui peuvent être utilisées pour ajouter une ombre à un élément.