Box-Shadow-CSS-Beispiele. Innere Schatten in CSS. Langstrecken-Abwärtsverschiebung

Reguläre Schatten lassen sich einfach mit Box-Shadow oder Text-Shadow implementieren. Aber was ist, wenn Sie interne Schatten erzeugen müssen? In diesem Artikel wird beschrieben, wie Sie diese Schatten mit nur wenigen Codezeilen erstellen.

Syntax

Schauen wir uns zunächst die beiden Hauptmethoden zur Implementierung von Schatten in CSS an.

Kastenschatten

Design Kastenschatten enthält verschiedene Bedeutungen:

Horizontaler Versatz Und vertikaler Versatz- horizontale bzw. vertikale Verschiebung. Diese Werte geben an, in welche Richtung das Objekt seinen Schatten wirft:

Unschärferadius Und Ausbreitungsradius etwas komplizierter. Was ist der Unterschied? Schauen wir uns ein Beispiel mit zwei Elementen an, in denen die Werte angegeben sind Unschärferadius abweichen:

Der Rand des Schattens ist einfach unscharf. Bei andere Bedeutung Ausbreitungsradius wir sehen Folgendes:

In diesem Fall sehen wir, dass der Schatten über eine große Fläche verstreut ist. Wenn Sie keinen Wert angeben Unschärferadius Und Ausbreitungsradius, dann sind sie gleich 0.

Textschatten

Die Syntax ist sehr ähnlich Kastenschatten:

Die Bedeutungen sind ähnlich, aber nicht Ausbreitungsschatten. Anwendungsbeispiel:

Im Kastenschatten eingelassen

Um den Schatten innerhalb des Objekts „umzudrehen“, müssen Sie hinzufügen Einsatz im CSS:

Sobald Sie die grundlegende Box-Shadow-Syntax verstanden haben, ist es sehr einfach zu verstehen, wie innere Schatten implementiert werden. Die Werte sind immer noch dieselben, Sie können Farbe hinzufügen (RGB in Hex):

Die Farbe liegt im RGB-Format vor, der Alphawert ist für die Transparenz des Schattens verantwortlich:

Bilder mit Schatten

Das Hinzufügen eines inneren Schattens zu einem Bild ist etwas schwieriger als das Hinzufügen eines normalen Schattens div. Hier ist zunächst der übliche Bildcode:

Es ist logisch anzunehmen, dass Sie einen Schatten wie folgt hinzufügen können:

Img ( box-shadow: inset 0px 0px 10px rgba(0,0,0,0.5); )

Aber der Schatten ist nicht sichtbar:

Es gibt mehrere Möglichkeiten, dieses Problem zu lösen, von denen jede ihre Vor- und Nachteile hat. Schauen wir uns zwei davon an. Die erste besteht darin, das Bild in ein normales Format zu verpacken div:

Div ( height: 200px; width: 400px; box-shadow: inset 0px 0px 10px rgba(0,0,0,0.9); ) img ( height: 200px; width: 400px; position: relative; z-index: -2 ; )

Alles funktioniert, aber wir müssen ein wenig zusätzliches HTML- und CSS-Markup hinzufügen. Die zweite Möglichkeit besteht darin, das Bild als Hintergrund des gewünschten Blocks festzulegen:

Div (Höhe: 200px; Breite: 400px; Hintergrund: URL(http://lorempixum.com/400/200/transport/2); Box-Shadow: Inset 0px 0px 10px rgba(0,0,0,0.9); )

Folgendes kann bei der Verwendung von Innenschatten passieren:

In den Textschatten eingefügt

Um einen inneren Textschatten zu implementieren, fügen Sie ihn einfach zum Code hinzu Einsatz funktioniert nicht:

Um das Problem zu lösen, wenden Sie es zunächst auf den Header an h1 Stellen Sie einen dunklen Hintergrund und einen hellen Schatten ein:

H1 (Hintergrundfarbe: #565656; Farbe: transparent; Textschatten: 0px 2px 3px rgba(255,255,255,0,5); )

Folgendes passiert:

Eine geheime Zutat hinzufügen Hintergrundclip wodurch alles abgeschnitten wird, was über den Text hinausgeht (auf einen dunklen Hintergrund):

H1 (Hintergrundfarbe: #565656; Farbe: transparent; Textschatten: 0px 2px 3px rgba(255,255,255,0,5); -webkit-background-clip: text; -moz-background-clip: text; hintergrundclip: text ; )

Es stellte sich heraus, dass es fast genau das war, was wir brauchten. Jetzt verdunkeln wir den Text einfach ein wenig (Alpha) und das Ergebnis ist:

Typografie ist das Lieblingsspielzeug von Webdesignern. CSS hat ein sehr interessantes Tool - Textschatten(Textschatten), der auf den ersten Blick recht einfach erscheint, aber mit seiner Hilfe können Sie mit Einfallsreichtum und Fantasie unvergessliche Effekte erzielen.

Schattengrundlagen

Eigentum Textschatten sehr einfach zu bedienen. Es wird von allen modernen Browsern unterstützt und das sogar ohne die Verwendung von Präfixen. Aber es gibt keine Unterstützung im IE (auch nicht im IE9). Sie können Tools wie Modernizr verwenden, um CSS3-Effekte auch in älteren IE-Versionen zu erzielen.

Syntax

Um einen Textschatten zu erstellen, verwenden Sie die Eigenschaftensyntax Textschatten was unten angegeben ist. Es müssen vier Parameter definiert werden: Die ersten beiden legen die Position des Schattens fest, der dritte legt den Grad der Unschärfe fest und der vierte bestimmt die Farbe des Schattens.

Textschatten: horizontal_offset Vertical_offset Unschärfefarbe;

Unten sehen Sie ein Beispiel für einen Textschatten, der um zwei Pixel nach unten und vier Pixel nach rechts versetzt, um drei Pixel unscharf und bei 30 % Deckkraft auf Schwarz eingestellt ist.

Textschatten: 2px 4px 3px rgba(0,0,0,0.3);

Das Ergebnis der Verwendung dieser Eigenschaft sieht folgendermaßen aus:

Warum wird RGBA verwendet?

Sie müssen RGBA nicht verwenden, um die Schattenfarbe anzugeben, wenn Sie eine Eigenschaft definieren. RGBA fügt jedoch beim Definieren eines Schattens eine weitere Dimension hinzu – den Grad der Transparenz.

Diese Methode ist viel einfacher als andere Methoden zur Farbbestimmung. Sie müssen sich nicht darauf konzentrieren, den Farbton der Schattenfarbe zu bestimmen, die möglicherweise nur geringfügig dunkler oder heller als die Hintergrundfarbe ist. Mit RGBA können Sie einfach Weiß oder Schwarz verwenden und deren Deckkraft erhöhen, um beim Mischen von Farben die gewünschte Hintergrundfarbe zu erzielen.

Eigentum nutzen Textschatten Sie können verschiedene Effekte für Text erstellen, nicht nur einfache Schlagschatten. Hier ist zum Beispiel der Code zum Erzeugen der Illusion von vertieftem Text.

Zuerst müssen Sie die Textfarbe etwas dunkler als die Hintergrundfarbe einstellen. Und dann müssen Sie die Immobilie nutzen Textschatten mit weißer Farbe und erhöhter Transparenz.

Die Hintergrundfarbe ist #222 und die Textfarbe ist auf 60 % Deckkraft eingestellt. Der weiße Schatten ist leicht nach unten und rechts positioniert und hat eine Deckkraft von 10 %.

Körper (Hintergrund: #222;) #text h1 (Farbe: rgba(0,0,0,0.6); Textschatten: 2px 2px 3px rgba(255,255,255,0.1);)

Es besteht überhaupt keine Notwendigkeit, den Schatten zu verwischen. Ein klarer Schatten kann gut zu einem Website-Design passen.

Textschatten: 6px 6px 0px rgba(0,0,0,0.2);

Der wahre Spaß beginnt, wenn man die Einschränkung, nur einen Schatten zu haben, über Bord wirft. Durch die Verwendung eines Kommas zum Trennen von Definitionen können Sie so viele Schatten verwenden, wie Sie benötigen!

Textschatten: Schatten1, Schatten2, Schatten3;

Hier ist ein Beispiel für die Verwendung von zwei Schatten. Der erste hat die gleiche Farbe wie der Hintergrund.

Textschatten: 4px 3px 0px #fff, 9px 8px 0px rgba(0,0,0,0.15);

Langstrecken-Abwärtsverschiebung

Sobald Sie den Umgang mit mehreren Schatten beherrschen, werden die Ergebnisse immer dramatischer. Es ist sehr einfach, einen 3D-Effekt für Text zu erstellen.

Das Beispiel verwendet vier Schatten, die alle in unterschiedlichen Abständen nach unten verschoben und unscharf sind.

Textschatten: 0px 3px 0px #b2a98f, 0px 14px 10px rgba(0,0,0,0.15), 0px 24px 2px rgba(0,0,0,0.1), 0px 34px 30px rgba(0,0,0,0.1 );

Verschieben Sie einen kleinen Abstand nach unten und verwischen Sie stark

Hier ist eine weitere Umsetzung derselben Idee. Die drei Schatten sind um einen geringeren Abstand verschoben und unschärfer.

Textschatten: 0px 4px 3px rgba(0,0,0,0.4), 0px 8px 13px rgba(0,0,0,0.1), 0px 18px 23px rgba(0,0,0,0.1);

3D-Text von Mark Dotto

Der Effekt wird auf der Website MarkDotto.com verwendet. Es verwendet 12 verschiedene Schatten, um einen tollen 3D-Effekt zu erzeugen.

Textschatten: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0 ,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);

Eingerückter Text von Gordon Hall

Beachten Sie, dass ich meine Technik im obigen Beispiel „Quick and Dirty“-Buchdruckeffekt genannt habe. Das liegt daran, dass es eine viel aufwändigere Möglichkeit gibt, ernsthaft eingefügten Text zu erstellen, der viel glaubwürdiger ist.

Gordon nutzt ernsthaftes CSS-Voodoo, um nicht nur einen äußeren, sondern auch einen echten inneren Schatten zu erzeugen. Eine ausführliche Erklärung der Technik finden Sie in seinem Blogbeitrag.

Hintergrundfarbe: #666666;

-webkit-Hintergrundclip: Text;

-moz-Hintergrundclip: Text;

Hintergrundclip: Text;

Farbe: transparent;

Textschatten: rgba(255,255,255,0,5) 0px 3px 3px;

Glühen

Textschatten: 0px 0px 6px rgba(255,255,255,0,7);

Textschatten: -10px 10px 0px #00e6e6, -20px 20px 0px #01cccc, -30px 30px 0px #00bdbd; Mehrere Lichtquellen Textschatten: 0px 15px 5px rgba(0,0,0,0,1), 10px 20px 5px rgba(0,0,0,0,05), -10px 20px 5px rgba(0,0,0,0,05);

Farbe: rgba(0,0,0,0,6); Textschatten: 2px 8px 6px rgba(0,0,0,0,2), 0px -5px 35px rgba(255,255,255,0,3);

Abschluss

Wie die meisten

1. CSS-Effekte
2. , Schatten sind sehr einfach umzusetzen. Aber eine Kombination einfacher Aktionen kann zu erstaunlichen Effekten führen.
3. Ein Schatten unter einem Blockelement auf einer Seite wird normalerweise verwendet, um einen dreidimensionalen Effekt zu erzeugen, die Aufmerksamkeit auf das Element zu lenken oder als Teil eines Designs. Ein kleiner Schatten unter den Elementen verleiht der Seite zusätzlich Volumen und Tiefe.
4. Um einen Schatten hinzuzufügen, verwenden Sie die Box-Shadow-Eigenschaft, die sechs Werte hat, von denen nur zwei erforderlich sind. In Abb. Abbildung 1 zeigt die Box-Shadow-Eigenschaft mit allen möglichen Werten, nummeriert, um sie zu identifizieren.
5. Reis. 1. Box-Shadow-Eigenschaftswerte
6. Das Schlüsselwort inset setzt den Schatten innerhalb des Elements.

Verschieben Sie den Schatten horizontal (5 Pixel - rechts, -5 Pixel - links);

vertikale Verschiebung (5px - nach unten, -5px - nach oben);

Schattenunschärferadius (0 – scharfer Schatten);

Schattendehnung (5px – Dehnung, -5px – Verkleinerung);	Schattenfarbe.	Es ist notwendig, nur die horizontale und vertikale Verschiebung anzugeben; alle anderen Parameter werden standardmäßig übernommen. In diesem Fall ist der Schatten scharf, ohne Unschärfe oder Schwarz.
Durch die Kombination verschiedener Parameter und deren Werte können Sie eine große Vielfalt an Schattentypen erhalten. In der Tabelle 1 zeigt den Code und das Ergebnis, zu dem er führt.		Tisch 1. Kombinationen von Schattenparametern
Code		Ergebnis
Beschreibung		Kastenschatten: 5px 5px;
Scharfer Schatten rechts und unten.		Kastenschatten: -5px -5px;
Scharfer Schatten links und oben.		Kastenschatten: 0 0 5px;
Verschwommener Schatten um ein Element.		Kastenschatten: 0 0 5px 2px;
Erweitern Sie den Schatten um 2 Pixel.		Kastenschatten: 0 0 5px 2px rot;

Wie aus der Tabelle hervorgeht, muss die Schattenverschiebung nicht unbedingt in Pixel angegeben werden, obwohl dies praktisch ist. Die Farbe des Schattens kann in jedem verfügbaren Format angegeben werden; um beispielsweise einen durchscheinenden Schatten zu erhalten, ist das RGBA-Format geeignet, ein solcher Schatten sieht auf jedem Hintergrund gut aus. Beispiel 1 zeigt, wie das geht.

Beispiel 1: Schatten auf einem Hintergrundbild

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Das ist Change Management. Sun Tzu, trans. Nikolai Konrad Ergebnis

dieses Beispiel

in Abb. dargestellt. 2. Der Schatten folgt der Abrundung der Ecken des Blocks.

Reis. 2. Schatten auf dem Hintergrundbild

Beachten Sie beim Hinzufügen eines „breiten“ Schattens, dass dieser möglicherweise über die sichtbaren Ränder des Browserfensters hinausragt und somit dazu führt, dass eine horizontale Bildlaufleiste angezeigt wird.

Pseudoelemente können auch mit Schatten versehen werden; dies ist manchmal für komplexe Layouts erforderlich. In Abb. Abbildung 3 zeigt einen Header-Block mit einem hinzugefügten Schatten. Um Linien an der Kreuzung zu vermeiden, müssen Sie das Pseudoelement ::after verwenden und ihm einen Schatten hinzufügen.

Reis. 3. Blockieren Sie mit Schatten

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Überschrift

Reis. 3. Blockieren Sie mit Schatten

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Ein Element kann mehr als einen Schatten haben, aber mehrere ihrer Parameter werden durch Kommas getrennt im Wert der Box-Shadow-Eigenschaft aufgeführt. Beispiel 3 zeigt, wie man allen Bildern einen Doppelschatten hinzufügt.

Bild

Das Ergebnis dieses Beispiels ist in Abb. dargestellt. 4.

Reis. 4. Doppeltes Schattenbild

Der erste Schatten wird links vom Bild mit einem Unschärferadius von 20 Pixel angezeigt und seine Größe wird um den vierten Parameter (-20 Pixel) reduziert. Die Parameter des zweiten Schattens werden nach dem Komma angezeigt; der Schatten wird rechts vom Bild angezeigt und aus Symmetriegründen ebenfalls verkleinert.

Die Reihenfolge der Aufnahme ist grundsätzlich wichtig. Der erste Wert ist immer der Versatz entlang der X-Achse, der zweite - entlang der Y-Achse.

Wenn entlang einer der Achsen kein Versatz erforderlich ist, setzen Sie ihn auf Null:

Class(box-shadow: 0 8px;) – verschiebt den Schatten nur entlang der Y-Achse

Wenn entlang einer der Achsen kein Versatz erforderlich ist, setzen Sie ihn auf Null:

Ergebnis

Class(box-shadow: 8px 8px;) – Verschiebung entlang beider Achsen

Negativer Wert für Box-Shadow-Achsen

Wenn entlang einer der Achsen kein Versatz erforderlich ist, setzen Sie ihn auf Null:

Der Schatten bewegt sich in die entgegengesetzte Richtung:

Class(box-shadow: -8px 8px;) – verschiebt den Schatten mit einem negativen Wert entlang der X-Achse Kastenschatten Schattenunschärferadius

Dritter Eigenschaftsparameter

Wenn entlang einer der Achsen kein Versatz erforderlich ist, setzen Sie ihn auf Null:

Wenn der Wert größer als Null ist, verlieren die Kanten an Schärfe, der Schatten wird größer und optisch heller. Unschärfe wird von allen Seiten angewendet:

Class(box-shadow: 0 0 8px;) – kein Offset, nur Unschärfe

Wenn entlang einer der Achsen kein Versatz erforderlich ist, setzen Sie ihn auf Null:

Class(box-shadow: 0 8px 8px;) – Y-Achsen-Versatz und Unschärfe

Wenn entlang einer der Achsen kein Versatz erforderlich ist, setzen Sie ihn auf Null:

Ein negativer Wert gilt als Fehler und der Schatten wird überhaupt nicht angezeigt.

Schattendehnungsradius

Vierter Eigenschaftsparameter Kastenschatten. Ändert die Größe des Schattens relativ zum Element. Dehnbar in alle Richtungen:

Class(box-shadow: 0 0 0 8px;) – keine Verschiebung oder Unschärfe, nur Dehnung

Wenn entlang einer der Achsen kein Versatz erforderlich ist, setzen Sie ihn auf Null:

In diesem Fall ist der Schatten in Breite und Höhe 16 Pixel größer als das Element: 8 Pixel links + 8 Pixel rechts und 8 Pixel oben + 8 Pixel unten.

Negativer Schattendehnungswert in CSS

Der Schatten wird nicht gedehnt, sondern nach allen Seiten um den angegebenen Wert schmaler:

Class(box-shadow: 0 16px 0 -8px;) – Verringern Sie den Schatten mit einem negativen Wert

Wenn entlang einer der Achsen kein Versatz erforderlich ist, setzen Sie ihn auf Null:

Schattenfarbe

Standardmäßig dupliziert die Schattenfarbe die Schriftfarbe: wie in den Beispielen oben.

Die Schattenfarbe wird in einem beliebigen verfügbaren CSS-Format angegeben:

• #ff0009
• RGB(255, 0, 9)
• hsl(358, 100 %, 50 %);

Geben Sie dem Element einen blauen Schatten:

Klasse(box-shadow: 0 8px #3a8fe7;)

Wenn entlang einer der Achsen kein Versatz erforderlich ist, setzen Sie ihn auf Null:

Innerer Schatten

Parameter Einsatz Zeigt einen Schatten innerhalb des Blocks an.

Im Gegensatz zu den oben aufgeführten Optionen gibt es keine strenge Schreibreihenfolge. Beide Optionen führen zum gleichen Ergebnis:

Box-Shadow: 0 8px #3a8fe7 Einschub; Box-Shadow: Einschub 0 8px #3a8fe7;

Wenn entlang einer der Achsen kein Versatz erforderlich ist, setzen Sie ihn auf Null:

Die zweite Option ist beim Lesen des Codes leichter zu verstehen.

Mehrere Schatten

Mehrere Schatten werden durch Kommas getrennt angegeben. Anzeigereihenfolge von oben nach unten:

Klasse( box-shadow: 0 8px #3a8fe7, 0 16px #3ae7af; )

Wenn entlang einer der Achsen kein Versatz erforderlich ist, setzen Sie ihn auf Null:

Wenn Sie die Stelle wechseln, ist der blaue Schatten nicht sichtbar:

Klasse( box-shadow: 0 16px #3ae7af, 0 8px #3a8fe7; )

Wenn entlang einer der Achsen kein Versatz erforderlich ist, setzen Sie ihn auf Null:

Der innere und äußere Schatten werden gleichzeitig gesetzt:

Klasse( box-shadow: 0 16px #3ae7af, inset 0 8px #3a8fe7; )

Wenn entlang einer der Achsen kein Versatz erforderlich ist, setzen Sie ihn auf Null:

Abgerundeter Schatten

Wenn einem Element die Eigenschaft gegeben wird Grenzradius, wird der Schatten abgerundete Ecken haben.

Klasse( box-shadow: 0 16px #3a8fe7; border-radius: 8px; )

Wenn entlang einer der Achsen kein Versatz erforderlich ist, setzen Sie ihn auf Null:

Indem wir die Schattendehnung einstellen, erhöhen wir auch die Rundung. Beispielsweise beträgt der Randradius 8 Pixel und die Schattendehnung 4.

8+4=12px ist der Rundungsradius des Schattens.

Klasse( box-shadow: 0 16px 0 4px #3a8fe7; border-radius: 8px; )

Wenn entlang einer der Achsen kein Versatz erforderlich ist, setzen Sie ihn auf Null:

Das gleiche Prinzip gilt für die Verkleinerung des Schattens, wenn der Wert negativ ist.

8+(-4)=4px – wir erhalten eine doppelt so kleine Schattenrundung.

Wenn die Schattenkomprimierung größer als der Randradius ist, erhalten wir einen Schatten mit rechten Winkeln. Die Komprimierung beträgt beispielsweise 16 Pixel.

8+(-16)=(-8), aber die Verrundung darf keinen negativen Wert haben und es wird Null angewendet.

Klasse( box-shadow: 0 24px 0 -16px #3a8fe7; border-radius: 8px; )

Wenn entlang einer der Achsen kein Versatz erforderlich ist, setzen Sie ihn auf Null:

CSS-Eigenschaft Kastenschatten Unterstützt von allen gängigen Browsern außer Opera Mini.

Heute lernen wir, wie man CSS-Schatten ohne Bilder erstellt. Nach Abschluss dieses Tutorials benötigen Sie keinen CSS-Schattengenerator mehr.

Der Hauptvorteil von mit CSS3 erstellten Schatten ist die einfache Implementierung und die Reduzierung der Anzahl der Anfragen an den Server (da wir keine Bilder mehr verwenden). Um einen CSS-Schatten zu erstellen, benötigen wir ein div-Tag und eine CSS-Box-Shadow-Eigenschaft. Sie benötigen kein zusätzliches Markup, da wir :after- und :before-Pseudoelemente erstellen, die wir hinter dem Hauptobjekt (einem Div mit der Klasse) platzieren Block).

Schauen Sie sich den HTML-Code an, für den wir einen CSS3-Schatten erstellen werden:

Als nächstes können Sie sehen vorgefertigte Beispiele und der Code, der zu ihrer Implementierung erforderlich ist. Um den Text auf der Seite zu minimieren, werden wir ihn weglassen CSS-Eigenschaften mit Browser-Präfixen. Vollständiger Code Sie können es sehen, indem Sie auf den Link „Beispiel“ klicken, der dem Beispiel entspricht.

.block ( position:relative; width:40%; padding:1em; margin:2em 10px 4em; background:#fff; border-radius:4px; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3) , 0 0 40px rgba(0, 0, 0, 0.1) inset; ) .block:before, .block:after ( content:""; position:absolute; z-index:-2; unten:15px; links:10px ; width:50%; height:20%; box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);

.block ( position:relative; width:40%; padding:1em; margin:2em 10px 4em; background:#fff; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba( 0, 0, 0, 0,1) inset; border:1px solid #efefef; border-radius:0 0 120px 120px / 0 0 6px 6px ) .block:before, .block:after ( content:""; position:absolute ; z-index:-2; left:10px; height:55%; box-shadow:0 8px 12px rgba(0, 0, 0, 0.5); transform:skew(-8deg) .block: after ( right:10px; left:auto; transform:skew(8deg) rotation(3deg); )

Mithilfe eines Schattens können Sie eine Blockperspektive erzeugen. Siehe Beispiel.

.block ( position:relative; width:40%; padding:1em; margin:2em 10px 4em; background:#fff; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba( 0, 0, 0, 0.1) inset; ) .block:before, .block:after ( content:""; position:absolute; z-index:-2; ) .block:before ( left:80px; unten:5px ; width:50%; height:35%; max-width:-80px 0 8px rgba(0, 0, 0, 0.4 ) .block:after ( display:none; )

CSS-Schatten am erhöhten Block. Siehe Beispiel.

.block ( position:relative; width:40%; padding:1em; margin:2em 10px 4em; background:#fff; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba( 0, 0, 0, 0,1) Einschub; Box-Shadow: 0 15px 10px -10px rgba(0, 0, 0, 0,5), 0 1px 4px rgba(0, 0, 0, 0,3), 0 0 40px rgba(0 , 0, 0, 0.1) Einschub ) .block:before, .block:after ( content:""; position:absolute; z-index:-2; )

Beispiel für einen CSS3-Schatten für einen vertikal gefalteten Block. Siehe Beispiel.

.block ( position:relative; width:40%; padding:1em; margin:2em 10px 4em; background:#fff; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba( 0, 0, 0, 0.1) inset; ) .block:before, .block:after ( content:""; position:absolute; z-index:-2; ) .block:before ( top:10px; unten:10px ; left:0; right:50%; box-shadow:0 15px rgba(0,0,0,0.6);

.block ( position:relative; width:40%; padding:1em; margin:2em 10px 4em; background:#fff; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba( 0, 0, 0, 0.1) inset; ) .block:before, .block:after ( content:""; position:absolute; z-index:-2; ) .block:before ( top:10px; unten:10px ; left:0; right:0; box-shadow:0 15px rgba(0,0,0,0.6);

Beispiel für einen CSS3-Schatten für einen horizontal gefalteten Block. Siehe Beispiel.

.block ( position:relative; width:40%; padding:1em; margin:2em 10px 4em; background:#fff; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba( 0, 0, 0, 0.1) inset; ) .block:before, .block:after ( content:""; position:absolute; z-index:-2; ) .block:before ( top:50%; unten: 0px; left:10px; box-shadow:0 0 15px rgba(0,0,0,0.6);

.block ( position:relative; width:40%; padding:1em; margin:2em 10px 4em; background:#fff; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba( 0, 0, 0, 0.1) inset; ) .block:before, .block:after ( content:""; position:absolute; z-index:-2; ) .block:before ( top:0px; unten:0px ; left:10px; right:10px; box-shadow:0 0 15px rgba(0,0,0,0.6);

CSS3-Schatten für gedrehten Block. Siehe Beispiel.

.block ( position:relative; width:40%; padding:1em; margin:2em 10px 4em; background:#fff; border-radius:4px; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3) , 0 0 40px rgba(0, 0, 0, 0.1) inset; box-shadow:none; transform:rotate(-3deg); .block > :first-child:before ( content:""; position:absolute; z -index:-1; right:0px; box-shadow:0 1px 4px rgba(0, 0, 0,3), 0 0 40px rgba (0, 0, 0,1) .block :before, .block:after ( content:""; position:absolute; z-index:-2; unten:15px; links:10px; width:50% ; height:20%; max-width:300px; box- Shadow:0 15px 10px rgba(0, 0, 0, 0,7); transform:rotate(-3deg);