Comment appliquer des effets de superposition CSS à Box-Shadow

Superposition de contenu sont une partie importante de la conception Web moderne. Ils vous aident cacher un élément sur une page Web et plus tard - avec l'approbation de l'utilisateur - le révéler, et afficher des informations supplémentaires ou des contrôles, tels que les boutons situés derrière.

Une superposition typique est semi-transparent, avec un couleur de fond unie (généralement en noir), 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é et révèle le contenu dessous.

Dans cet article, nous verrons comment ajouter une superposition colorée aux 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 cet article traite des images, la technique présentée peut être appliquée en toute sécurité à d'autres types de contenu (tels que les blocs de texte)..

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

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

Si vous n'êtes pas un pédant de la taille HTML, avoir un élément supplémentaire pour la superposition n'est probablement pas une grosse affaire, car cela n'affectera probablement pas autant la bande passante de tout réseau. Cependant avoir séparé Les règles de style pour les éléments et leurs calques nuisent toujours à la lisibilité et à la maintenabilité des CSS.

Pour garder votre code dans l’ordre et ne pas gâcher votre plan HTML, il est préférable d’utiliser une solution CSS uniquement..

Créer une superposition avec boîte ombre

Alors, comment pouvez-vous réellement créer une superposition CSS uniquement? Avec l'aide du boîte ombre Propriété CSS. La boîte-ombre est parfaite pour ce travail, car ce qui est une superposition mais une ombre sombre projetée sur un élément?

La box-shadow a une valeur de propriété appelée encart, ce qui fait apparaître l'ombre vers l'intérieur du cadre de la boîte.

Une ombre encadrée avec une taille d’ombre égale à la moitié ou plus de la moitié de la largeur et de la hauteur de l’élément crée une ombre qui: couvre le tout élément.

 .box width: 200px; hauteur: 200px; box-shadow: green 0 0 0 100px inset;  

Puisque les superpositions habituellement avoir une certaine transparence, vous devez également l'ajouter à l'ombre de la boîte. Cela peut être fait en utilisant le rgba () fonction pour la couleur de l'ombre.

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

Pour le canal alpha, une valeur de 1 crée un couleur opaque, tandis que 0 crée un couleur totalement transparente.

En attribuant une valeur comprise entre 0 et 1 au canal 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 de différents pokemons. Ici, nous ne créerons que le code de Bulbasaur, le premier pokémon de la démo, les autres étant créés de la même manière (sur Codepen, vous pouvez également vérifier le code)..

HTML

Pour le HTML, il suffit de créer une boîte auquel nous ajouterons tout le reste avec CSS.

CSS

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

Depuis le boîte ombre propriété peut prendre plusieurs valeurs afin de rendre plusieurs ombres, Outre l'ombre superposée, j'ai également ajouté d'autres ombres de gris à la .pokemon et .pokemon éléments d'esthétique.

 / * images pokemon * / .pokemon width: 200px; hauteur: 200px; / * centre le contenu en utilisant flex box * / display: flex; justifier-contenu: centre; align-items: centre; / * superposition * / box-shadow: 0 0 0 100px inset, 0 0 5px grey; / * transition de survol * / transition: box-shadow 1s;  / * noms de pokemon * / .pokemon :: after width: 80%; hauteur: 80%; bloc de visualisation; police: 16 pts 'bookman old syle'; Couleur blanche; bordure: solide 2px; text-align: center; / * centre le contenu en utilisant flex box * / display: flex; justifier-contenu: centre; align-items: centre; / * transition en vol stationnaire * / transition: opacité 1s, 5s;  / * révèle une image pokemon en survol * / .pokemon: survol transition: box-shadow 1s; box-shadow: 0 0 0 5px inset, 0 0 5px gris, 0 0 10px gris inset;  / * cacher le nom du pokemon en survol * / .pokemon: hover :: after transition: opacity .5s; opacité: 0;  

Quand le .pokemon les éléments sont survolés, leur boîte-ombre doit changer pour révéler l'image derrière.

Vous pouvez voir que le .pokemon sélecteur obtient une nouvelle boîte-ombre qui supprime la superposition, et le .pokemon: survoler :: après sélecteur cache le nom du pokemon en utilisant le opacité propriété.

Vous avez peut-être aussi remarqué le absence de valeurs de couleur dans la zone de superposition-ombres dans le .pokemon et .pokemon règles de style. La couleur de l'ombre de la boîte de recouvrement des pokemons individuels doit être spécifiée dans leurs propres règles de style distinctes, comme ils sont tous différents les uns des autres.

Comme boîte ombre n'a pas de propriété à long terme, vous ne pouvez pas définir sa couleur d'ombre individuellement avec quelque chose comme, boîte-ombre-couleur; au lieu de cela - nous utilisons le Couleur propriété.

Par défaut, lorsque vous donnez une valeur pour le Couleur propriété, cette valeur est appliqué pour les couleurs de bordure, contour et boîte-ombre ainsi que. Donc, vous pouvez simplement utiliser le Couleur propriété 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 de l'ombre de la boîte * / color: rgba (71, 121, 94, 0,9);  #bulbasaur :: after / * nom du pokemon * / content: 'Bulbasaur';  

La couleur de l'ombre de superposition utilise ce qui précède rgba () fonction avec 0.9 pour la valeur alpha pour rendre la superposition transparente.

En plus de la couleur de l’ombre de surimpression, le CSS ci-dessus ajoute également les règles propres à chaque pokemon - l’image en tant que image de fond et le nom.

Et c'est tout, nous sommes prêts avec notre incrustation d'images colorées uniquement CSS. Regardez le code de tous les pokemons dans le stylo ci-dessous.