Comment CSS-Overlays effet avec Box-Shadow

Les superpositions de contenu sont une partie importante de la conception Web moderne. Ils vous aident à masquer un élément sur une page Web et, plus tard, avec l'approbation de l'utilisateur, le révèlent et affichent des informations ou des contrôles supplémentaires, tels que des boutons.

Une superposition typique est semi-transparente, avec une couleur de fond solide (généralement noire), et il y a du texte ou des boutons sur lesquels les utilisateurs peuvent voir ou interagir. Après l'interaction (clic ou survol), la superposition est supprimée et révèle le contenu en dessous.

Dans cet article, nous verrons comment ajouter une superposition colorée à des images en utilisant du CSS pur. Vous pouvez voir le résultat final sur la démo ci-dessous. Survolez les images pour que les superpositions révèlent les pokemons. Bien que ce post traite des images, la technique qu'il présente peut être appliquée en toute sécurité à d'autres types de contenu (tels que des blocs de texte).

Évitez d'ajouter des éléments HTML supplémentaires

Les superpositions sont souvent créées en positionnant un élément HTML supplémentaire avec une valeur d' opacity inférieure à 1 juste au-dessus de l'élément à couvrir . Le problème est que cette technique implique l'utilisation d'un élément supplémentaire (ou pseudo-élément) pour la superposition.

Si vous n'êtes pas un pédant de taille HTML, avoir un élément supplémentaire pour la superposition n'est probablement pas une grosse affaire, car très probablement, il ne sera pas beaucoup taxer la bande passante de n'importe quel réseau. Cependant, avoir des règles de style distinctes pour les éléments et leurs superpositions nuit encore à la lisibilité et à la maintenabilité de CSS.

Pour garder votre code dans l'ordre, et ne pas gâcher votre contour HTML, c'est un meilleur choix pour utiliser une solution uniquement CSS.

Créer une superposition avec box-shadow

Alors, comment pouvez-vous réellement créer une superposition CSS seulement? Avec l'aide de la propriété CSS box-shadow . La boîte-ombre est parfaite pour ce travail, car qu'est-ce qu'une superposition mais une ombre portée sur un élément ?

La boîte-ombre a une valeur de propriété appelée inset, qui fait apparaître l'ombre vers l' intérieur de l'image de la boîte .

Une boîte-ombre avec une ombre de la moitié ou plus de la moitié de la largeur et la hauteur de l'élément, crée une ombre qui couvre l' ensemble de l' élément .

 .box {largeur: 200px; hauteur: 200px; boîte-ombre: vert 0 0 0 100px encart; } 

Étant donné que les superpositions ont généralement une certaine transparence, vous devez également l'ajouter à l'ombre de la boîte. Cela peut être fait en utilisant la fonction rgba() pour la couleur de l'ombre .

La partie rgb de rgba représente les valeurs des canaux de couleur rouge, vert et bleu, tandis que a représente le canal alpha, responsable de la transparence .

Pour le canal alpha, une valeur de 1 crée une couleur opaque, tandis que 0 crée une couleur entièrement transparente .

En affectant une valeur comprise entre 0 et 1 à la couche alpha de la valeur de couleur rgba de l'ombre de la boîte, vous pouvez créer une superposition semi-transparente .

Créer le code pour la démo

Notre démo montrera les images et les noms des différents pokemons. Ici, nous allons seulement créer le code pour Bulbasaur, le premier pokémon de la démo, car les autres sont créés de la même façon (sur Codepen, vous pouvez aussi consulter le code pour eux).

HTML

Pour le HTML, nous avons seulement besoin de créer une boîte à laquelle nous ajouterons tout le reste avec CSS.

CSS

Dans le CSS ci-dessous, les éléments .pokemon affichent les images pokemon, et les pseudo-éléments .pokemon::after portent le nom du pokemon.

Puisque la propriété box-shadow peut prendre plusieurs valeurs afin de rendre plusieurs ombres, en plus de l'ombre de superposition, j'ai également ajouté d'autres ombres de gris aux éléments .pokemon et .pokemon:hover pour l'esthétique.

 / * images pokemon * / .pokemon {largeur: 200px; hauteur: 200px; / * centre le contenu en utilisant la boîte de flex * / display: flex; justify-content: centre; align-items: centre; / * superposition * / boîte-ombre: 0 0 0 100px encart, 0 0 5px gris; / * transition de transition * / transition: box-shadow 1s; } / * noms de pokemon * / .pokemon :: après {width: 80%; hauteur: 80%; bloc de visualisation; police: 16pt 'bookman old syle'; Couleur blanche; bordure: 2px solide; text-align: centre; / * centre le contenu en utilisant la boîte de flex * / display: flex; justify-content: centre; align-items: centre; / * transition de survol * / transition: opacité 1s .5s; } / * Afficher l'image pokemon sur hover * / .pokemon: hover {transition: box-shadow 1s; boîte-ombre: 0 0 0 5px encart, 0 0 5px gris, 0 0 10px gris encart; } / * cache le nom de pokemon sur hover * / .pokemon: hover :: after {transition: opacité .5s; opacité: 0; } 

Lorsque les éléments .pokemon sont .pokemon, leur ombre doit changer pour révéler l'image derrière.

Vous pouvez voir que le sélecteur .pokemon:hover obtient une nouvelle case-shadow qui supprime la superposition, et le .pokemon:hover::after cache le nom du pokemon en utilisant la propriété opacity .

Vous avez peut-être également remarqué l' absence de valeurs de couleur dans la zone de superposition des ombres des règles de style .pokemon et .pokemon:hover . La couleur de superposition des pokemons individuels doit être spécifiée dans leurs propres règles de style, car elles sont toutes différentes les unes des autres.

Comme box-shadow n'a pas de propriété longhand, vous ne pouvez pas définir sa couleur d'ombre individuellement avec quelque chose comme, box-shadow-color ; à la place - nous utilisons la propriété de color .

Par défaut, lorsque vous attribuez une valeur à la propriété color, cette valeur est également appliquée à la bordure, au contour et aux couleurs box-shadow . Ainsi, vous pouvez simplement utiliser la propriété color pour ajouter de la couleur à box-shadow.

 #bulbasaur {background-image: url (https://assets.hongkiat.com/uploads/css-only-overlays-box-shadow/bulbasaur.jpg); / * valeur de couleur utilisée pour la couleur d'ombre de boîte * / couleur: rgba (71, 121, 94, 0.9); } #bulbasaur :: après {/ * nom de pokemon * / contenu: 'Bulbasaur'; } 

La couleur de l'ombre de superposition utilise la fonction rgba() précitée avec 0.9 pour la valeur alpha pour rendre la superposition transparente.

En plus de la couleur de l'overlay box-shadow, la CSS ci-dessus ajoute également les règles propres à chaque pokemon - l'image en tant qu'image de background-image et le nom.

Et c'est tout, nous sommes prêts avec notre superposition d'images colorées CSS. Jetez un oeil sur le code de tous les pokemons dans le stylo ci-dessous.