Tout savoir sur l'ombre en CSS3
L'ombre est un effet visuel important en design web. Elle permet de donner de la profondeur et du relief à un élément en créant un effet de portée. En CSS3, il existe deux propriétés pour créer une ombre : box-shadow
et text-shadow
.
La propriété box-shadow
La propriété box-shadow
permet de créer une ombre portée autour d'un élément. Elle est utilisée pour ajouter de la profondeur et du relief à une boîte ou même une image. Voici la syntaxe de la propriété box-shadow
:
box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow
: spécifie la position horizontale de l'ombre. Une valeur négative la fera déplacer vers la gauche et une valeur positive vers la droite.v-shadow
: spécifie la position verticale de l'ombre. Une valeur négative la déplacera vers le haut et une valeur positive vers le bas.blur
: spécifie le flou de l'ombre.spread
: spécifie la taille de l'ombre.color
: spécifie la couleur de l'ombre.inset
: facultatif, ajoute une ombre interne plutôt qu'une ombre externe.
Il est important de noter que la propriété box-shadow
est compatible avec les navigateurs modernes (IE9 et supérieurs, Firefox, Chrome, Safari, Opera).
Exemple
Voici un exemple de la propriété box-shadow
sur une boîte :
.box {
box-shadow: 2px 2px 5px #888888;
}
Dans cet exemple, l'ombre est portée de 2 pixels vers la droite et de 2 pixels vers le bas, avec un flou de 5 pixels et une couleur grise.
Il est également possible de créer plusieurs ombres en utilisant la virgule pour séparer les différentes valeurs :
.box {
box-shadow: 2px 2px 5px #888888, -2px -2px 5px #FFFFFF;
}
Dans cet exemple, nous avons deux ombres : une ombre grise en bas à droite et une ombre blanche en haut à gauche qui donne un effet de relief à la boîte.
La propriété text-shadow
La propriété text-shadow
permet de créer une ombre autour du texte. Elle est utilisée pour donner un effet de relief et de profondeur au texte. Voici la syntaxe de la propriété text-shadow
:
text-shadow: h-shadow v-shadow blur color;
h-shadow
: spécifie la position horizontale de l'ombre.v-shadow
: spécifie la position verticale de l'ombre.blur
: spécifie le flou de l'ombre.color
: spécifie la couleur de l'ombre.
Exemple
Voici un exemple de la propriété text-shadow
sur un texte :
h1 {
text-shadow: 2px 2px 5px #888888;
}
Dans cet exemple, l'ombre est portée de 2 pixels vers la droite et de 2 pixels vers le bas, avec un flou de 5 pixels et une couleur grise. Cela donne un effet très agréable au texte.
Générateur d'ombres en CSS3
Pour faciliter la création d'ombres en CSS3, il existe plusieurs générateurs d'ombres en ligne qui permettent de générer le code CSS nécessaire. Voici quelques-uns des meilleurs sites pour générer des ombres CSS3 :
-
Générateur d'ombres CSS3 : Ce site permet de générer des ombres autour d'un texte ou d'une boîte en utilisant la propriété
box-shadow
outext-shadow
. Il permet également de générer du code pour les navigateurs spécifiques (Chrome, Firefox, IE, Opera, Safari). -
Générateur d'ombres CSS portées ou de lueur : Ce site permet de générer des ombres portées ou de lueur pour les textes et les boîtes.
Conclusion
Les ombres en CSS3 sont un excellent moyen d'ajouter de la profondeur et du relief à un élément sur un site web. Les propriétés box-shadow
et text-shadow
sont compatibles avec les navigateurs modernes et sont faciles à utiliser en CSS. Les générateurs d'ombres CSS en ligne sont également un excellent moyen de gagner du temps lors de la création de sites web.
box-shadow - CSS : Feuilles de style en cascade - MDN Web Docs
developer.mozilla.org/fr/do...Ajouter des ombres aux éléments avec box-shadow en CSS
www.pierre-giraud.com/html-...Les ombrages en CSS3 - Alsacreations
www.alsacreations.com/tuto/...Créez des bordures et des ombres - OpenClassrooms
openclassrooms.com/fr/cours...Les ombres portées en CSS sur les bordures et sur les textes.
www.devenir-webmaster.com/V...box-shadow CSS propriété - Zone Css
www.zonecss.fr/proprietes-c...Les ombres en CSS3 avec box-shadow - V1V2
www.v1v2.io/blog/ombre-css3...L'ombre CSS3 est un effet puissant et très pratique lorsque vous travaillez avec des sites Web modernes. L'ombre CSS3 est l'un des moyens les plus précis pour donner à vos éléments Web une profondeur supplémentaire et du contraste. Les propriétés de l'ombre CSS3 permettent de créer des ombres dans plusieurs directions, à différents dégradés et à différents angles. Vous pouvez également appliquer plusieurs effets d'ombre sur un même élément.
Les propriétés d'ombre CSS3 comprennent la position, l'étendue, la couleur et l'opacité. Vous pouvez utiliser l'ombre CSS3 pour créer des effets 3D, des dégradés à plusieurs couches et des ombres avec différents angles et de différentes intensités. L'ombre CSS3 est un moyen pratique et fonctionnel de donner plus de profondeur à vos conceptions Web et d'améliorer visuellement leurs effets.
Lorsque j'utilise l'ombre CSS3, j'aime expérimenter avec des couleurs et des dégradés différents pour voir comment je peux obtenir différents effets. L'utilisation d'ombres CSS3 est toujours un défi et il est très amusant d'expérimenter avec des formes et des couleurs différentes pour voir ce que je peux obtenir. Au cours de mes expérimentations, j'ai récemment réalisé qu'en utilisant différentes couleurs pour les ombres CSS3, je peux ajouter plus de profondeur et de contraste à mes conceptions. C'est l'une des caractéristiques que j'aime le plus lorsque je travaille avec l' ...