Nur CSS-Überlagerungen mit Box-Shadow-Effekt

Inhaltsüberlagerungen sind ein wichtiger Teil des modernen Webdesigns. Sie helfen dir ein Element ausblenden auf einer Webseite und später - mit Zustimmung des Benutzers - Zeige es, und zusätzliche Informationen oder Steuerelemente anzeigen, z. B. Tasten dahinter.

Eine typische Überlagerung ist halbtransparent, mit einer feste Hintergrundfarbe (normalerweise schwarz), und es gibt Text oder Schaltflächen, mit denen Benutzer sehen oder interagieren können. Nachdem die Interaktion (Klicken oder Hovering) erfolgt ist, wird die Überlagerung angezeigt wird entfernt und enthüllt den Inhalt darunter.

In diesem Artikel erfahren Sie, wie farbige Überlagerung zu Bildern hinzufügen mit reinem CSS. Das Endergebnis sehen Sie unten in der Demo. Bewegen Sie den Mauszeiger auf die Bilder, um die Pokemons anzuzeigen. Obwohl in diesem Beitrag Bilder behandelt werden, kann die Technik, die es präsentiert, sicher auch auf andere Inhaltstypen (z. B. Textblöcke) angewendet werden.

Vermeiden Sie das Hinzufügen zusätzlicher HTML-Elemente

Überlagerungen werden häufig von erstellt Positionierung eines zusätzlichen HTML-Elements mit einem Opazität Wert kleiner als 1 direkt über dem abzudeckenden Element. Das Problem ist, dass diese Technik die Verwendung einer extra Element (oder Pseudoelement) für die Überlagerung.

Wenn Sie kein HTML-Pedant sind, ist es wahrscheinlich keine große Sache, ein zusätzliches Element für die Überlagerung zu haben, da dies höchstwahrscheinlich die Bandbreite eines Netzwerks nicht so stark belastet. Jedoch mit trennen Stilregeln für Elemente und deren Überlagerungen beeinträchtigen die Lesbarkeit und Wartbarkeit von CSS.

Um Ihren Code in Ordnung zu halten und Ihre HTML-Gliederung nicht durcheinander zu bringen, empfiehlt es sich, eine reine CSS-Lösung zu verwenden.

Überlagerung erstellen mit Box Schatten

Wie können Sie also eine reine CSS-Überlagerung erstellen? Mit der Hilfe des Box Schatten CSS-Eigenschaft Der Box-Shadow ist perfekt für diesen Job, da ist doch ein Overlay ein dunkler Schatten wirft über ein Element?

Der Box-Schatten hat einen Eigenschaftswert, der aufgerufen wird Einsatz, wodurch der Schatten erscheint innerhalb des Rahmens der Box.

Ein Inset-Box-Schatten mit einer Schattengröße, die die Hälfte oder mehr als die Hälfte der Breite und Höhe des Elements hat, erzeugt einen Schatten deckt den ab ganz Element.

 .Kasten Breite: 200px; Höhe: 200px; Box-Schatten: grün 0 0 0 100px Einfügung;  

Da in der Regel überlagert habe etwas Transparenz, Sie müssen es auch zum Box-Schatten hinzufügen. Dies kann mit der rgba () Funktion für Schattenfarbe.

Das rgb Ein Teil des RGB-Kanals repräsentiert die Kanalwerte für Rot, Grün und Blau, während ein repräsentiert die Alphakanal, welches ist verantwortlich für die transparenz.

Für den Alphakanal erzeugt ein Wert von 1 eine undurchsichtige Farbe, während 0 eine a erzeugt vollständig transparente Farbe.

Durch Zuweisen eines Werts zwischen 0 und 1 für den Alphakanal des rgba-Farbwerts des Boxschattens können Sie dies tun Erstellen Sie eine semi-transparente Auflage.

Erstellen Sie den Code für die Demo

Unsere Demo zeigt die Bilder und Namen der verschiedenen Pokemons. Hier erstellen wir nur den Code für Bulbasaur, das erste Pokemon in der Demo, da die anderen auf dieselbe Weise erstellt werden (auf Codepen können Sie auch den Code für sie überprüfen)..

HTML

Für das HTML brauchen wir nur eine Box erstellen dem fügen wir alles andere mit CSS hinzu.

CSS

In der CSS unten, die .Pokémon Elemente zeigen die Pokemon-Bilder und die .pokemon :: nach Pseudoelemente tragen den Namen des Pokemons.

Seit der Box Schatten Eigentum kann mehrere Werte annehmen damit rendern Sie mehrere Schatten, Neben dem Überlagerungsschatten fügte ich noch weitere Schatten hinzu .Pokémon und .Pokemon: schweben Elemente für die Ästhetik.

 / * pokemon Bilder * / .pokemon width: 200px; Höhe: 200px; / * zentriere den Inhalt mit der Flexbox * / display: flex; Inhalt rechtfertigen: Mitte; Ausrichten-Elemente: Mitte; / * overlay * / box-shadow: 0 0 0 100px-Einfügung, 0 0 5px grau; / * Hover-Out-Übergang * / Übergang: Box-Schatten 1s;  / * Pokemon-Namen * / .pokemon :: after width: 80%; Höhe: 80%; Bildschirmsperre; schriftart: 16pt 'bookman old syle'; Farbe weiß; Rand: 2px fest; Text ausrichten: Mitte; / * zentriere den Inhalt mit der Flexbox * / display: flex; Inhalt rechtfertigen: Mitte; Ausrichten-Elemente: Mitte; / * hover out Übergang * / Übergang: Deckkraft 1s, 5s;  / * enthüllen Pokemon-Bild auf Hover * / .pokemon: Hover Übergang: Box-Schatten 1s; Box-Schatten: 0 0 0 5px-Einsatz, 0 0 5px-Grau, 0 0 10px-Graueinsatz;  / * Pokemon-Name auf Hover verstecken * / .pokemon: Hover :: after Übergang: Deckkraft .5s; Deckkraft: 0;  

Wenn der .Pokémon Elemente werden schwebend angezeigt, ihr Box-Schatten muss geändert werden, um das dahinter liegende Bild anzuzeigen.

Sie können das sehen .Pokemon: schweben Selektor erhält einen neuen Boxschatten, der die Überlagerung entfernt, und die .pokemon: schweben :: nach Selector blendet den Namen des Pokemons mit dem Opazität Eigentum.

Sie haben vielleicht auch das bemerkt Fehlen von Farbwerten in der überlagerten Box-Schatten in der .Pokémon und .Pokemon: schweben Stilregeln. Die Overlay-Box-Schattenfarbe der einzelnen Pokemons muss angegeben werden in ihren eigenen Stilregeln, da sie sich alle voneinander unterscheiden.

Wie Box Schatten hat kein langatmiges Eigentum, Sie können die Schattenfarbe nicht einstellen individuell mit so etwas, Box-Schattenfarbe; stattdessen benutzen wir die Farbe Eigentum.

Standardmäßig, wenn Sie einen Wert für angeben Farbe Eigenschaft ist dieser Wert gilt für den Rand, die Kontur und die Farben des Schattenkastens auch. Sie können also einfach die Farbe Eigenschaft, um Box-Schatten Farbe hinzuzufügen.

 #bulbasaur Hintergrundbild: URL (https://assets.hongkiat.com/uploads/css-only-overlays-box-shadow/bulbasaur.jpg); / * Farbwert für Boxschattenfarbe * / Farbe: rgba (71, 121, 94, 0,9);  #bulbasaur :: after / * pokemon name * / content: 'Bulbasaur';  

Die Farbe des Überlagerungsschattens verwendet das oben genannte rgba () Funktion mit 0,9 für den Alpha-Wert, um die Überlagerung transparent zu machen.

Neben der Farbe des Overlay-Box-Shadows fügt das obige CSS auch die Regeln hinzu, die für jedes Pokemon individuell sind - das Bild als Hintergrundbild und der Name.

Und das ist alles, wir sind bereit mit unserer CSS-only-Farbüberlagerung. Sehen Sie sich den Code aller Pokemons unten im Stift an.