So erstellen Sie einen Schlagschatten mit CSS

Obwohl sich die Designtrends jedes Jahr ändern, können Sie sich auf die Verwendung von Standard-Schatteneffekten wie Box Schatten und Schlagschatten einen positiven Beitrag zur Ästhetik einer Website zu leisten. Sie können verwenden Schlagschatten um angenehme, schön gerenderte Effekte zu erzeugen, ohne kitschig zu wirken.

Schauen wir uns das CSS genauer an Schlagschatten Eigentum.

Was ist CSS-Drop-Shadow?

Schlagschatten ( ) ist ein CSS-Effekt, der einen Schatten um die Form eines angegebenen Objekts anzeigt. Hier ist die Syntax zum Anwenden eines CSS Schlagschatten.

Syntax:
Filter: Schlagschatten (Offset-x Offset-y Unschärfe-Radius-Farbe);

Es gibt eine breite Palette von Filterfunktionen einschließlich Unschärfe ( ), Helligkeit ( ), und Schlagschatten ( ).

Offset-x bestimmt den horizontalen Abstand und Offset-y bestimmt den vertikalen Abstand. Beachten Sie, dass negative Werte den Schatten links platzieren (Offset-x) und darüber (Offset-y) das Objekt.

Die letzten beiden Parameter sind optional. Sie können den Unschärferadius des Schattens als Länge angeben. Standardmäßig ist es auf 0 gesetzt. Sie können keinen negativen Unschärferadius haben.

Die Farbe des Schattens wird angegeben als. Wenn Sie keine Farbe angegeben haben, folgt sie dem Wert von Farbe Eigentum.

Wann ist CSS-Drop-Shadow nützlich?

Das weißt du vielleicht schon Box Schatten macht die Arbeit ganz gut. Sie denken vielleicht, warum brauchen wir? Schlagschatten überhaupt? Es gibt zahlreiche Fälle, in denen die Schlagschatten ( ) Funktion ist ein Lebensretter. Schauen wir uns einige davon an:

Nicht rechteckige Formen

Im Gegensatz zu a Box Schatten, Sie können eine hinzufügen Schlagschatten zu nicht rechteckigen Formen. Zum Beispiel haben wir ein transparentes SVG oder PNG mit einer nicht rechteckigen Form – zum Beispiel einen Stern. Hier kann das Hinzufügen eines Schattens, der dem Objekt selbst entspricht, mit entweder abgeschlossen werden Box Schatten oder Schlagschatten. Betrachten Sie beide Szenarien:

HTML

CSS

.star-img img {
Anzeige: Inline-Block;
Höhe: 15em;
Breite: 25em;
}
.Box Schatten {
Farbe Rot;
Kastenschatten: 0.60em 0.60em 0.2em;
}
.drop-shadow {
Filter: Schlagschatten (0.60em 0.60em 0.2em);
}

Ausgabe:

Beim Vergleich beider Effekte fällt auf, dass a Box Schatten gibt einen rechteckigen Schatten; Es spielt auch keine Rolle, ob das Bild transparent ist oder bereits einen Hintergrund besitzt. Auf der anderen Seite, Schlagschatten ermöglicht es Ihnen, einen Schatten zu erzeugen, der der Form des Bildes selbst entspricht.

Die limitierenden Faktoren sind, dass die Schlagschatten ( ) Funktion akzeptiert alle Parameter vom Typ außer der Einsatz Stichwort und Verbreitung Parameter.

Gruppierte Elemente

Es gibt mehrere Fälle, in denen Sie möglicherweise Komponenten erstellen müssen, indem Sie bestimmte Elemente überlappen. Wenn du verwendest Box Schatten, werden Sie sich dem Problem stellen, einen Schatten richtig zu werfen. So funktioniert es, wenn Sie ein Bild und eine Textkomponente gruppieren:

HTML

Im Moment leben

Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas porro quo nam odit, non debitis, facilis eligendi ea labore obcaecati ut quia asperiores. Modi, corrupti commodi quisquam ex numquam Vorfall.

Grundlegendes CSS

Karosserie {
Polsterung: 5em 1em;
Schriftfamilie: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande',
'Lucida Sans Unicode', Genf, Verdana, serifenlos;
}
h2 {
Schriftgröße: 2rem;
}
P {
Schriftgröße: 0.8rem;
}
.Elterncontainer {
Anzeige: flexibel;
Biegerichtung: Säule;
Höhe: 17rem;
Breite: 50em;
}
.image-container img {
Breite: 15em;
Position: absolut;
z-Index: 1;
oben: 2em;
links: 1,5 em;
}
.text-container {
Farbe: RGB (255, 236, 236);
Hintergrundfarbe: rgb (141 0 35);
Breite: 30rem;
Polsterung: 3rem;
align-self: Flex-Ende;
Position: relativ;
}

Wenden Sie nun die Box Schatten und Schlagschatten um den Unterschied zu sehen.

.drop-shadow {
Filter: Schlagschatten (0,4rem 0,4rem 0,45rem rgba (0, 0, 30, 0,5));
}
.Kasten,
.box img {
Kastenschatten: 0,4rem 0,4rem 0,45rem rgba (0, 0, 30, 0,3);
}

Ausgabe:

Wie Sie sehen können, ist die Box Schatten wird auf jedes Element einzeln angewendet, während die Schlagschatten gruppiert beide und wendet den Schatten an.

Abgeschnittene Elemente

Du kannst den... benutzen Clip-Pfad -Eigenschaft, um einen bestimmten Bereich zu beschneiden, der bestimmt, welche Teile eines Bildes oder Elements angezeigt werden sollen. Die Schlagschattenfilter ermöglicht es uns, a. zu erstellen Schlagschatten auf das abgeschnittene Element, indem Sie es auf das übergeordnete Element dieses Elements anwenden:

HTML

CSS

.Elterncontainer {
Filter: Schlagschatten (0rem 0rem 1.5rem kastanienbraun);
}
.clipped-element {
Breite: 50em;
Höhe: 50m;
Rand: 0 automatisch;
Hintergrundbild: URL (lächelndes-Mädchen.jpg);
Beschneidungspfad: Kreis (50 %);
Hintergrundgröße: Cover;
Hintergrundwiederholung: keine Wiederholung;
}

Ausgabe:

Wir haben 50 % des Bildes mit einem kreisförmigen Pfad beschnitten. deshalb, die Schlagschattenfilter wird nur auf den sichtbaren Teil des Bildes angewendet. Ist es nicht toll?

Einschränkungen und Unterschiede

Wie wir oben besprochen haben, Schlagschatten unterstützt das nicht Verbreitung Parameter. Dies bedeutet, dass das Erstellen eines Umrisseffekts mit dem nicht möglich wäre Schlagschatten ( ) Funktion, weil es überall getötet wird. Außerdem rendert es verschiedene Schatteneffekte von den Box Schatten und Text-Schatten (mit den gleichen Parametern). Sie haben vielleicht das Gefühl, dass die Unterschiede zwischen den Box Schatten und Schlagschatten auf die reduzieren CSS-Box-Modell. Einer folgt ihm, der andere nicht. Hier ist ein Beispiel:

HTML

Jeder MUO-Artikel bringt Sie einen Schritt näher.


Jeder MUO-Artikel bringt Sie einen Schritt näher.



Jeder MUO-Artikel bringt Sie einen Schritt näher.

Grundlegendes CSS

Karosserie {
Polsterung: 5em 1em;
Schriftfamilie: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande',
'Lucida Sans Unicode', Genf, Verdana, serifenlos;
}
.Elterncontainer {
Breite: 72rem;
}
P {
Schriftgröße: 3em;
Schriftstil: fett;
}

Anwenden von Schatteneffekten

.drop-shadow {
Filter: Schlagschatten (0.5em 0.5em 0.1em #555);
}
.Box Schatten {
Kastenschatten: 0.5em 0.5em 0.1em #555;
}
.text-schatten {
Textschatten: 0.5em 0.5em 0.1em #555;
}

Ausgabe:

Sie können sehen, dass die Box Schatten gibt einen schwereren, dunkleren Schatten als der Text-Schatten und Schlagschatten. Außerdem gibt es einen leichten Unterschied in der Positionierung des Schattens zwischen den Text-Schatten und Schlagschatten. Dennoch können Sie je nach Bedarf verschiedene Schatteneffekte bevorzugen.

Browser-Unterstützung

Die Schlagschatten ( ) Funktion wird in allen modernen Browsern unterstützt, außer in älteren Browsern wie Internet Explorer. Obwohl dies die UX nicht ernsthaft beeinträchtigen würde, können Sie eine Funktionsabfrage mit a. hinzufügen Box Schatten Zurückfallen.

Experimentieren Sie mit verschiedenen Schatteneffekten

Die Popularität von Box Schatten ist aufgrund der Vielzahl der Anwendungsfälle ziemlich offensichtlich. Allerdings ist die Schlagschatten ( ) Funktion wird stark zu wenig genutzt. Wir hoffen, dass Sie mit verschiedenen Schatteneffekten experimentieren und versuchen, sie zu implementieren Schlagschatten bei Ihren zukünftigen Projekten.

Pseudoklassen erweitern CSS und Ihr persönliches Webentwicklungsrepertoire um einen völlig neuen Funktionsumfang. Erfahren Sie mehr über sie, um ein kompetenterer und effizienterer Webentwickler zu werden.

So verwenden Sie CSS box-shadow: 13 Tricks und Beispiele

Fade Boxen sehen langweilig aus. Peppen Sie sie mit dem CSS-Box-Shadow-Effekt auf!

Weiter lesen

Über den Autor