Tout savoir sur les ombres portées en CSS
Les ombres portées sont un effet visuel très utile en design web pour donner de la profondeur et de la dimension à un élément. Utilisées judicieusement, elles peuvent améliorer l'expérience utilisateur et rendre une interface plus attrayante. Dans cet article, nous allons découvrir les différentes manières de créer des ombres portées avec CSS.
La propriété box-shadow
La propriété box-shadow est la méthode la plus courante pour ajouter des ombres portées en CSS. Elle permet de simuler l'effet d'un objet projetant une ombre sur une surface. La syntaxe de la propriété box-shadow est la suivante :
box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow
: détermine la position horizontale de l'ombre portée ;v-shadow
: détermine la position verticale de l'ombre portée ;blur
: détermine le flou de l'ombre portée ;spread
: permet de définir la taille de l'ombre portée ;color
: spécifie la couleur de l'ombre portée ;inset
: permet de créer une ombre intérieure plutôt qu'une ombre portée classique.
La propriété box-shadow peut accepter jusqu'à 6 valeurs, mais seules deux valeurs sont obligatoires : h-shadow
et v-shadow
. Voici un exemple :
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
Dans cet exemple, l'ombre portée est située à 2 pixels à droite et 2 pixels en bas de l'objet. La taille de l'ombre est de 5 pixels et sa couleur est un noir semi-transparent (rgba(0, 0, 0, 0.3)).
La fonction drop-shadow()
La fonction drop-shadow() est une alternative à la propriété box-shadow. Elle permet de créer des ombres portées plus réalistes en simulant l'effet d'une source de lumière située au-dessus de l'objet. La syntaxe de la fonction drop-shadow() est la suivante :
filter: drop-shadow(h-shadow v-shadow blur color);
h-shadow
: détermine la position horizontale de l'ombre portée ;v-shadow
: détermine la position verticale de l'ombre portée ;blur
: détermine le flou de l'ombre portée ;color
: spécifie la couleur de l'ombre portée.
La fonction drop-shadow() ne permet pas de définir la taille de l'ombre portée, contrairement à la propriété box-shadow. Voici un exemple :
filter: drop-shadow(2px 2px 5px rgba(0, 0, 0, 0.3));
Dans cet exemple, l'ombre portée est située à 2 pixels à droite et 2 pixels en bas de l'objet. La taille de l'ombre est de 5 pixels et sa couleur est un noir semi-transparent (rgba(0, 0, 0, 0.3)).
Les ombres sur les textes et les bordures
La propriété box-shadow et la fonction drop-shadow() peuvent également être utilisées pour créer des ombres sur les textes et les bordures. Il est important de noter que les ombres sur les textes peuvent être moins lisibles si elles sont trop prononcées.
Voici un exemple d'ombre portée sur une bordure :
.box {
border: 1px solid #ccc;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}
Dans cet exemple, l'objet a une bordure solide de 1 pixel de couleur grise (#ccc) et une ombre portée située à 2 pixels à droite et 2 pixels en bas de l'objet. La taille de l'ombre est de 5 pixels et sa couleur est un noir semi-transparent (rgba(0, 0, 0, 0.3)).
Conclusion
Les ombres portées sont un effet visuel simple mais efficace pour donner de la profondeur et de la dimension à une interface web. La propriété box-shadow et la fonction drop-shadow() sont des moyens simples et efficaces pour ajouter des ombres portées en CSS. Il est important de ne pas surcharger l'interface avec trop d'ombres et de choisir des couleurs et des tailles appropriées pour ne pas perturber l'expérience utilisateur.
Sources :
- MDN Web Docs - box-shadow
- MDN Web Docs - drop-shadow()
- W3docs - Comment Créer une Ombre Portée Pour une Image PNG
- Devenir Webmaster - Les ombres portées en CSS sur les bordures et sur les textes
- Pierre Giraud - Ajouter des ombres aux éléments avec box-shadow en CSS
- W3C - Ombres portées
- Outils CSS - Générateur d'ombre Css portée ou de lueur(box-shadow)
- Alsacreations - Les ombrages en CSS3
- OpenClassrooms - Créez des bordures et des ombres
box-shadow CSS propriété - Zone Css
www.zonecss.fr/proprietes-c...L'ombre portée CSS est un effet graphique intéressant qui permet aux graphiques, aux éléments Web et à d'autres éléments d'afficher une ombre. Il est largement utilisé pour ajouter des couches visuelles complexes à des éléments tels que les boutons, les barres de défilement et les cadres.
Cet effet est connu pour donner des effets visuels 3D à des éléments qui autrement seraient plates. En ajoutant un décalage de l'ombre portée, vous pouvez faire en sorte qu'un élément ressemble à une surface plus profonde et plus réaliste qu'il ne l'est en réalité.
L'ombre portée CSS est une technique développée par le W3C qui est implémentée en utilisant le langage de style en cascade. La syntaxe standard implique un décalage horizontal et vertical (X et Y) pour une ombre, ainsi qu'une couleur et une opacité. Plusieurs autres propriétés telles que la zone de l'ombre peuvent être ajoutées pour contrôler l'apparence de l'ombre portée.
L'ombre portée CSS est très souple et facile à utiliser. Il est également performant et peut être appliqué à divers éléments Web tels que les images, les vidéos et les textes.
Personnellement, j'ai utilisé l'ombre portée CSS pour ajouter des effets visuels intéressants à mes sites Web. Je trouve que c'est un excellent outil qui améliore de manière significative l'expérience utilisateur et rend l'apparence des sites plus attrayante.