Les ombres portées en CSS
Les ombres portées sont un élément de design important dans la création de pages Web. En utilisant les propriétés CSS appropriées, il est possible de créer des ombres portées qui ajoutent une profondeur et une texture visuelle à un élément. Dans cet article, nous allons explorer les différentes façons de créer des ombres portées en CSS.
La propriété box-shadow
La propriété box-shadow
est une fonctionnalité CSS3 qui permet de créer des ombres portées sur n'importe quel élément. Cette propriété prend les valeurs suivantes :
box-shadow: h-shadow v-shadow blur spread color inset;
-
h-shadow
: spécifie la distance horizontale de l'ombre. Les valeurs négatives déplacent l'ombre vers la gauche, tandis que les valeurs positives la déplacent vers la droite. -
v-shadow
: spécifie la distance verticale de l'ombre. Les valeurs négatives déplacent l'ombre vers le haut, tandis que les valeurs positives la déplacent vers le bas. -
blur
: spécifie le flou de l'ombre. Les valeurs plus élevées créent une ombre plus floue. -
spread
: spécifie la taille de l'ombre. Les valeurs positives augmentent la taille de l'ombre, tandis que les valeurs négatives la réduisent. -
color
: spécifie la couleur de l'ombre. La valeur par défaut estblack
. -
inset
: spécifie que l'ombre est enfoncée dans l'élément plutôt que projetée à l'extérieur. La valeur par défaut estoutset
.
Voici un exemple de code CSS utilisant box-shadow
:
.box {
width: 200px;
height: 200px;
background-color: #eee;
box-shadow: 10px 10px 5px #888888;
}
Dans cet exemple, une boîte de 200 x 200 px est créée avec une couleur de fond grise clair. L'ombre portée est créée en utilisant les valeurs 10px 10px 5px #888888
, ce qui signifie qu'elle est décalée de 10 px en bas et à droite, a un flou de 5 px et une couleur de #888888
.
Les ombres portées avancées
En utilisant la propriété box-shadow
avec des valeurs spécifiques, il est possible de créer des ombres portées plus avancées. Voici quelques exemples :
Ombres portées multiples
Il est possible de créer plusieurs ombres portées en utilisant la propriété box-shadow
plusieurs fois. Voici un exemple :
.box {
box-shadow: 10px 10px 5px #888888, 20px 20px 10px #777777;
}
Dans cet exemple, deux ombres portées sont créées : une première à 10 px en bas et à droite avec un flou de 5 px et une couleur de #888888
, et une deuxième à 20 px en bas et à droite avec un flou de 10 px et une couleur de #777777
.
Ombres portées intérieures
En utilisant la valeur inset
, il est possible de créer une ombre portée intérieure qui est enfoncée dans l'élément plutôt que projetée à l'extérieur. Voici un exemple :
.box {
box-shadow: inset 5px 5px 5px #888888;
}
Dans cet exemple, une ombre portée intérieure est créée à 5 px en bas et à droite avec un flou de 5 px et une couleur de #888888
.
Ombres portées avec des formes personnalisées
Il est possible de créer des ombres portées avec des formes personnalisées en utilisant le clip-path CSS. Voici un exemple :
.box {
clip-path: polygon(0 75%, 75% 75%, 75% 100%, 100% 50%, 75% 0, 0 0);
box-shadow: 10px 10px 5px #888888;
}
Dans cet exemple, un polygone personnalisé est créé à l'aide de clip-path
et une ombre portée est créée avec les valeurs 10px 10px 5px #888888
.
Les autres propriétés
Il existe également d'autres propriétés CSS permettant de créer des ombres portées :
text-shadow
La propriété text-shadow
est similaire à box-shadow
, mais elle crée une ombre portée pour le texte plutôt qu'un élément. Voici un exemple :
h1 {
text-shadow: 2px 2px 2px #888888;
}
Dans cet exemple, un texte de niveau 1 HTML est créé avec une ombre portée à 2 px en bas et à droite avec un flou de 2 px et une couleur de #888888
.
filter
La propriété filter
peut également être utilisée pour créer des ombres portées. Voici un exemple :
.box {
background-color: #eee;
filter: drop-shadow(10px 10px 5px #888888);
}
Dans cet exemple, une boîte de couleur de fond grise clair est créée avec une ombre portée créée à l'aide de filter
et les valeurs 10px 10px 5px #888888
.
Conclusion
Les ombres portées sont un élément important du design Web qui ajoutent une texture et une profondeur visuelle. En utilisant les différentes propriétés CSS disponibles, il est possible de créer des ombres portées avancées qui ajoutent de la complexité à une conception. Les propriétés box-shadow
, text-shadow
et filter
sont toutes utiles pour créer des ombres portées, et il est important d'expérimenter avec différentes valeurs pour trouver la meilleure apparence pour votre conception.
Sources :
- Les ombrages en CSS3 - Alsacreations
- CSS3 Shadows - Alsacreations
- Générateur d'ombre Css portée ou de lueur(box-shadow)
- Box-shadow CSS propriété - Zone Css
- Effets de boîte avancés - Apprendre le développement web | MDN
- Générateur d'ombres CSS3 - Support du Web
- Ombres avancées avec CSS3 et box-shadow - Creative Juiz
- Comment créer une ombre portée avec CSS - MUO
- Attribut box-shadow css - Tutowebdesign
- Drop-shadow() - Fonction CSS
Le CSS ombre portée est un effet graphique créé à l'aide de feuilles de style en cascade et d'images de fond. Il a été créé pour donner une impression d'ombre et de profondeur aux textes et aux images, ce qui permet aux sites web d'avoir une apparence beaucoup plus professionnelle. Avec l'ombre portée, vous pouvez ajouter des effets 3D aux polices de votre site, qui peuvent aider le visiteur à discerner les mots et les images plus facilement. Les sombres portées peuvent également être appliquées à des bordures et à des images, ce qui permet de créer des effets plus dynamiques.
Lorsqu'il s'agit d'utiliser la fonctionnalité d'ombre portée dans un site web, le navigateur le plus couramment utilisé est Internet Explorer. Internet Explorer prend en charge la fonctionnalité d'ombre portée via une fonctionnalité appelée "Drop Shadow" ou "Dib Shadow" qui peut être appliquée à un élément spécifique sur une page web. Les propriétés CSS pour l'ombre portée peuvent être définies en définissant la couleur, la distance et l'opacité. De plus, vous pouvez également définir la position horizontale et verticale, le flou et la taille de l'ombre.
Je trouve personnellement que l'ombre portée peut donner à un site web un look vraiment professionnel et améliorer l'expérience de l'utilisateur. Je me souviens d'avoir récemment créé un site web pour un client et d'avoir ajouté une ombre portée à certains des éléments. Le client était très heureux du résultat final et je pense que c'était en partie ...