Ce blog discutera de la méthode pour appliquer des effets d'ombre aux éléments HTML.
Comment créer un effet d'ombre portée sur des éléments HTML à l'aide de CSS ?
Le ' boîte ombre ” ajoute une ombre autour d'un élément où deux ou plusieurs valeurs d'effet ajoutées peuvent être séparées par des virgules.
La syntaxe de la propriété box-shadow est décrite ci-dessous.
Syntaxe
boîte ombre : rien |h-offset v-offset flou étalé couleur | encart | initial | tu hérites ;
La description de la syntaxe mentionnée ci-dessus est répertoriée ci-dessous :
- ' rien ” : C'est la valeur par défaut de la propriété box-shadow.
- ' décalage h ” : Cette valeur représente la distance horizontale.
- ' décalage en V ” : Cette valeur définit la distance verticale.
- ' se brouiller ” : La troisième valeur est un flou. Maximiser sa valeur maximisera l'effet de flou.
- ' propagé ” : La quatrième valeur représente la propagation de l'ombre. Il peut contenir des valeurs positives ou négatives, où la valeur positive augmente la propagation et une valeur négative la diminue.
- ' Couleur ” : Cette valeur est facultative, représentant la couleur actuelle.
- ' initial ” : cette valeur définit la propriété de sa valeur initiale.
- ' tu hérites ” : cette valeur hérite de la propriété de son élément parent.
- ' encart ” : La valeur d'encart est utilisée pour créer des ombres à l'intérieur de la boîte.
Voyons à quoi ressemble l'effet d'ombre à travers un exemple pratique.
Exemple
Dans le fichier HTML, ajoutez d'abord un ' pour fournir du contenu à la page Web. Maintenant, appliquez les propriétés CSS aux éléments HTML ajoutés. L'élément div est appliqué avec la propriété ' boîte ombre ' avec la valeur ' 3px 8px ”, qui représente le décalage horizontal et le décalage vertical. Production Dans la section suivante, les éléments HTML seront stylisés avec différentes propriétés. Voici les propriétés CSS supplémentaires appliquées à l'élément div : Le code ci-dessus affichera l'élément div comme indiqué ci-dessous : Maintenant, dans la section suivante, créez deux boîtes représentant deux éléments div. Nous donnerons à chacun d'eux différentes valeurs d'ombre de boîte multiples et observerons les résultats. Ici: On peut observer que nous avons stylé la div box2 avec les mêmes propriétés : Le ' boîte ombre ” peut être utilisée pour ajouter plusieurs effets d'ombre à un élément HTML. Cela peut être fait en utilisant des virgules entre chaque ombre comme indiqué dans l'exemple ci-dessous : Comme vous pouvez le voir, plusieurs ombres ont été appliquées avec succès : C'était tout à propos de l'utilisation de l'ombre de bordure CSS. Le ' boîte ombre ” La propriété CSS est utilisée pour appliquer des effets d'ombre aux éléments HTML. Cette propriété se compose principalement de deux valeurs pour le décalage horizontal et les décalages verticaux, mais il peut y avoir plusieurs valeurs telles que l'effet de flou, l'effet de rayon de propagation, la couleur, etc. De plus, vous pouvez également ajouter plusieurs ombres aux éléments en utilisant des virgules entre chaque propriété box-shadow. Cet article a expliqué la propriété CSS box-shadow avec des exemples pratiques. et
HTML
< div >
< h1 > L'ombre de la boîte < / h1 >
< p > boîte-ombre: 3px 8px < / p >
< / div >
CSS
div {
boîte ombre : 3px 8px ;
}
CSS
div {
frontière : 5px solide RVB ( 255 , 111 , 1 ) ;
boîte ombre : 3px 8px 9px 4px #f4af1b ;
}
HTML
>
>
Boîte de style1 div
#box1 {
largeur : 40% ;
la taille : 140px ;
frontière : 5px solide #ff9c83 ;
boîte ombre : 8px 10px 15px 20px #807f7f ;
}
Boîte de style2 div
#box2 {
largeur : 40% ;
la taille : 140px ;
frontière : 5px solide RVB ( 255 , 111 , 1 ) ;
boîte ombre : encart 4px 8px #f4af1b ;
marge-gauche : 350px ;
}
Astuce bonus : ajouter plusieurs ombres sur un élément HTML
Conclusion