L'ombre portée est un effet qui dépose ou ajoute une ombre derrière les éléments HTML sélectionnés lors du rendu sur la page Web. Cet effet peut être obtenu en utilisant le ' ombre portée() 'méthode comme valeur pour CSS' filtre ” propriété ou en utilisant le “ boîte ombre ' propriété. En utilisant la propriété 'box-shadow', l'amélioration visuelle, l'expérience utilisateur, l'emphase et la mise au point peuvent être attirées sur un élément HTML ciblé spécifique.
Ce guide montre la procédure de création d'un effet d'ombre portée à l'aide de la propriété box-shadow :
-
- Créer une ombre portée solide à l'aide de la propriété box-shadow
- Créer une ombre portée floue à l'aide de la propriété box-shadow
- Agrandir la zone d'ombre portée
Comment créer des ombres portées en CSS3 à l'aide de la propriété box-shadow ?
Le ' boîte ombre ” permet au développeur d'établir une hiérarchie visuelle en indiquant la position relative des éléments sur la page. En l'utilisant, les créateurs de pages Web peuvent créer l'illusion d'objets projetant des ombres sur les surfaces, donnant aux éléments une sensation plus interactive.
Syntaxe
La propriété 'box-shadow' a une syntaxe de :
boîte ombre: [ décalage horizontal ] [ décalage vertical ] [ rayon de flou ] [ rayon de diffusion ] [ couleur ] ;
Une explication des termes utilisés dans la syntaxe ci-dessus :
-
- Au départ, le « décalage horizontal ” récupère/stocke la position de l'axe X, et le “ négatif ” La valeur définit l'ombre vers la gauche et vice versa.
- Le ' décalage vertical ” valeur stocke la position de l'axe Y, le “ positif ” définit l'ombre vers le bas, et vice versa dans le cas de “ négatif ' valeur.
- Ensuite, le « rayon de flou ” valeur à partir du nom définit le flou de l'ombre.
- Le ' rayon de diffusion ” La valeur spécifie de combien de rayon l'ombre doit s'étendre.
- Le ' couleur ' définit la couleur de l'ombre, il peut être dans le ' LGV ' ou ' RVB » format aussi.
Maintenant, passons en revue quelques exemples pour une meilleure compréhension :
Exemple 1 : appliquer une ombre portée solide à l'aide de la propriété box-shadow
Pour définir l'ombre portée solide, seules les directions et la couleur de l'ombre sont insérées en tant que valeur dans le ' boîte ombre ' propriété:
< style >.boxShadowExample {
largeur : 210 pixels ;
bordure : 2px soie de maïs solide ;
hauteur : 210px ;
Couleur de l'arrière plan: #f0f0f0 ;
box-shadow : 10px 10px vert forêt ;
}
style >
Dans le code ci-dessus :
-
- Tout d'abord, l'élément HTML est sélectionné avec une classe de ' boxOmbreExemple ”. Et la valeur de ' 210px » est fourni au « hauteur ' et ' largeur ' propriétés. Utilisez également le ' frontière ' et ' Couleur de l'arrière plan ” propriétés pour une meilleure visualisation.
- Ensuite, définissez la valeur de ' 10px 10px vert forêt ' au ' boîte ombre ” Propriété CSS. Le ' 10px ” est le décalage horizontal et vertical déterminant l'endroit où l'ombre doit s'appliquer. Et le ' forêt verte » est la couleur de l'ombre.
Après la compilation, la page Web apparaît comme ceci :
La sortie confirme qu'une ombre portée de type solide a été placée à l'aide de la propriété box-shadow.
Exemple 2 : appliquer une ombre portée floue à l'aide de la propriété box-shadow
Pour rendre l'ombre déjà appliquée floue, une valeur numérique supplémentaire est insérée avant la couleur du ' boîte ombre ' propriété. Visitez le code mis à jour ci-dessous :
< style >.boxShadowExample {
largeur : 210 pixels ;
bordure : 2px soie de maïs solide ;
hauteur : 210px ;
couleur d'arrière-plan : fumée blanche ;
boîte-ombre : 10px 10px 15px vert forêt ;
}
style >
Selon le code ci-dessus, l'ombre est maintenant ' 15px » flouté. Après la fin de la phase de compilation, la page Web ressemble à ceci :
La figure ci-dessus montre que l'ombre est maintenant floue.
Exemple 3 : Agrandissement de la zone d'ombre portée
La valeur de propagation est fournie au ' boîte ombre ” propriété pour étendre la région de l'ombre. La valeur du spread doit être au format numérique. Comme dans l'extrait de code ci-dessous, la zone d'ombre est étendue à ' 20px ” :
< style >.boxShadowExample {
largeur : 210 pixels ;
bordure : 2px soie de maïs solide ;
hauteur : 210px ;
couleur d'arrière-plan : fumée blanche ;
boîte-ombre : 10px 10px 15px 20px vert forêt ;
}
style >
Après l'exécution, l'ombre portée apparaît maintenant comme ceci :
Comme vous pouvez le voir, la région de l'ombre est maintenant augmentée de 20 pixels.
Conclusion
Le ' boîte ombre ” la propriété est utilisée pour la création d'un “ ombre portée ” effet sur les éléments HTML sélectionnés. Le ' ombre portée ' la propriété accepte cinq valeurs, ' décalage horizontal ”, “ décalage vertical ”, “ rayon de flou ”, “ rayon de diffusion ' et ' couleur ”. Les valeurs « décalage horizontal » et « décalage vertical » définissent les dimensions de l'ombre d'où l'ombre portée doit émerger. La valeur 'rayon de flou' rend l'ombre floue et la valeur 'rayon de propagation' étend la région de l'ombre.