Tout sur les ombres en CSS
L'ombre est un élément visuel qui peut donner du relief à une page web. Il est possible de créer des ombres portées sur les boîtes, images et textes en CSS. Dans cet article, nous allons explorer les différentes propriétés et fonctions de CSS qui permettent de créer des ombres.
Propriété box-shadow
La propriété CSS box-shadow permet d'ajouter une ombre portée à un élément. La syntaxe est la suivante :
box-shadow: h-shadow v-shadow blur spread color inset;
- h-shadow : représente la coordonnée horizontale de l'ombre. Elle peut être positive (vers la droite) ou négative (vers la gauche).
- v-shadow : représente la coordonnée verticale de l'ombre. Elle peut être positive (vers le bas) ou négative (vers le haut).
- blur : représente le flou de l'ombre. Plus cette valeur est élevée, plus l'ombre sera floue.
- spread : représente la taille de l'ombre. Plus cette valeur est élevée, plus l'ombre sera grande que l'élément.
- color : représente la couleur de l'ombre. Peut être une couleur en hexadécimal, RVB, nommée ou la valeur transparent.
- inset : ajoute une ombre à l'intérieur de l'élément.
Voici un exemple de code CSS qui ajoute une ombre portée à une boîte :
.box {
width: 200px;
height: 200px;
background-color: #ccc;
box-shadow: 5px 5px 5px #000;
}
Dans cet exemple, l'ombre est positionnée à 5px de distance de l'élément vers la droite et le bas, avec un flou de 5px et une couleur noire.
Fonction drop-shadow()
La fonction CSS drop-shadow() permet d'ajouter une ombre portée à une image. Contrairement à box-shadow, elle prend comme argument une image au lieu d'un élément HTML. La syntaxe est la suivante :
filter: drop-shadow(h-shadow v-shadow blur color);
Les arguments sont les mêmes que pour box-shadow.
Voici un exemple de code CSS qui ajoute une ombre portée à une image :
img {
filter: drop-shadow(5px 5px 5px #000);
}
Dans cet exemple, l'ombre est positionnée à 5px de distance de l'image vers la droite et le bas, avec un flou de 5px et une couleur noire.
Propriété text-shadow
La propriété CSS text-shadow permet d'ajouter une ombre portée à un texte. La syntaxe est la suivante :
text-shadow: h-shadow v-shadow blur color;
Les arguments sont les mêmes que pour box-shadow.
Voici un exemple de code CSS qui ajoute une ombre portée à un texte :
h1 {
text-shadow: 2px 2px 2px #000;
}
Dans cet exemple, l'ombre est positionnée à 2px de distance du texte vers la droite et le bas, avec un flou de 2px et une couleur noire.
Utilisation de plusieurs ombres
Il est possible d'utiliser plusieurs ombres pour un même élément en séparant les différentes valeurs par une virgule. Voici un exemple de code CSS qui utilise deux ombres pour créer un effet de relief :
.box {
width: 200px;
height: 200px;
background-color: #ccc;
box-shadow: 5px 5px 5px #000, -5px -5px 5px #fff;
}
Dans cet exemple, deux ombres ont été ajoutées à la boîte. La première ombre est positionnée à 5px de distance vers la droite et le bas avec une couleur noire, tandis que la deuxième ombre est positionnée à -5px de distance vers la gauche et le haut avec une couleur blanche.
Créer une ombre avec une image
Il est également possible de créer une ombre en utilisant une image. Pour cela, il faut créer une image qui représente l'ombre avec une transparence partielle, puis l'utiliser comme fond pour l'élément.
Voici un exemple de code CSS qui utilise une image pour créer une ombre :
.shaded-box {
width: 200px;
height: 200px;
background: url(shadow.png) no-repeat;
padding: 20px;
}
Dans cet exemple, l'image shadow.png représente une ombre avec une transparence partielle. Cette image est utilisée comme fond pour la boîte.
Conclusion
Avec les propriétés et fonctions de CSS présentées dans cet article, il est possible de créer des ombres portées pour les boîtes, images et textes. L'ajout d'ombres peut donner du relief à une page web et améliorer son aspect visuel. Il est également possible de combiner plusieurs ombres pour obtenir des effets intéressants.
box-shadow - CSS : Feuilles de style en cascade - MDN Web Docs
developer.mozilla.org/fr/do...drop-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-...CSS3 Shadows - Alsacreations
www.alsacreations.com/tuto/...Une ombre pour donner du relief en CSS - Xul.fr
www.xul.fr/css/ombre.phpOmbres - Formation ISN - HTML & CSS
math.univ-lyon1.fr/irem/For...Ombres avancées avec CSS3 et box-shadow - Creative Juiz
www.creativejuiz.fr/blog/tu...[CSS] Ombre d'une div qui chevauche une autre - OpenClassrooms
openclassrooms.com/forum/su...Zonecss.fr : Exemple de code CSS -moz-box-shadow - Pinterest
www.pinterest.fr/pin/417568...Le conteneur CSS "ombre" est un concept de conception de site Web qui permet à un site de se démarquer. Il permet aux développeurs Web d'ajouter une finition riche et intéressante à leur design et à leur projet.
Le "ombre" est créé en combinant les propriétés CSS "box-shadow" et "background clip". Ces propriétés fournissent une couche supplémentaire d'attrait et d'intérêt à un site Web. La boîte d'ombre dans ce type de conception est plus large que la bordure et elle est légèrement plus sombre. Cela permet aux éléments de se détacher et de créer un effet 3D.
Le conteneur CSS "ombre" est extrêmement populaire pour donner une sensation de profondeur et de texture à un design. Les développeurs créent souvent des ombres sous des menus ou des boîtes sur leurs sites Web pour ajouter plus d'intérêt visuel. D'autres utilisent le "ombre" pour encadrer des blocs de texte et des images, ce qui ajoute une sensation de profondeur à leur contenu et le met en valeur.
Lorsque j'ai récemment mis à jour mon site Web personnel, j'ai essayé d'utiliser un conteneur CSS "ombre" pour mettre en valeur certaines images. L'ajout d'une boîte d'ombre a donné à mon site Web une sensation plus riche et plus profonde, ce qui a eu un effet positif sur l'expérience visuelle que je souhaitais offrir à mon public.