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.

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.

Reis. 1. Box-Shadow-Eigenschaftswerte

1. Stichwort Inset setzt den Schatten innerhalb des Elements;
2. Verschieben Sie den Schatten horizontal (5 Pixel - rechts, -5 Pixel - links);
3. vertikale Verschiebung (5px - nach unten, -5px - nach oben);
4. Schattenunschärferadius (0 – scharfer Schatten);
5. Schattendehnung (5px – Dehnung, -5px – Verkleinerung);
6. Schattenfarbe.

Es muss nur die horizontale und vertikale Verschiebung angegeben werden; 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.

Wie aus der Tabelle hervorgeht, muss die Schattenverschiebung nicht unbedingt in Pixel angegeben werden, obwohl dies praktisch ist. Die Schattenfarbe kann in jedem verfügbaren Format angegeben werden, sodass sie zum Erhalten eines durchscheinenden Schattens geeignet ist RGBA-Format, ein solcher Schatten wird vor jedem Hintergrund gut aussehen. Beispiel 1 zeigt, wie das geht.

Beispiel 1: Schatten auf einem Hintergrundbild

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Das Ergebnis dieses Beispiels ist 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 bei komplexen 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

Beispiel 2 zeigt die Erstellung eines solchen Blocks.

Beispiel 2. Block mit Schatten

HTML5 CSS3 IE 9+ Cr Op Sa Fx

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

Beispiel 2. Block mit Schatten

HTML5 CSS3 IE 9+ Cr Op Sa Fx

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 hinter dem Komma angegeben; der Schatten wird rechts vom Bild angezeigt und aus Symmetriegründen ebenfalls verkleinert.

Hallo, liebe Leser. Heute machen wir es mit Ihnen schöner Schatten für Blöcke, wenn CSS-Hilfe . Ich denke, dass dies für Sie sehr nützlich sein wird, insbesondere wenn Sie Vorlagen erstellen. Und Blöcke mit Schatten sehen sehr attraktiv und modern aus.

Browserunterstützung

Grundsätzlich unterstützen alle modernen Browser Schatteneffekte:

• Internet Explorer 9.0 und höher;
• Firefox 3.5 und höher;
• Chrome 1 und höher;
• Safari 3 und höher;
• Opera 10.5 und höher.

Ich möchte auch einen wichtigen Punkt erwähnen: Für einige Browser werden wir bestimmte Präfixe verwenden. Wird für Firefox verwendet -moz-, für Chrome und Safari müssen Sie das Präfix verwenden -Webkit.

Kommen wir nun zum interessantesten Teil. Schauen wir uns alle Schatten einzeln an, es gibt 8 Effekte.

Schatteneffekt 1

In diesem Beispiel befindet sich der Schatten des Blocks unten.

HTML

CSS

Schatteneffekt 2

In diesem Beispiel geht der Schatten des Blocks nach links und rechts, aber in der Mitte gibt es keinen. Es stellt sich heraus, dass es sich um einen sehr interessanten Effekt handelt.

HTML

CSS

Schatteneffekt 3

Hier ist der Schatten des Blocks nur links.

HTML

CSS

Schatteneffekt 4

Schatten rechts.

HTML

CSS

Schatteneffekt 5

In diesem Fall hat sich der Schatten auf beiden Seiten stärker nach unten bewegt.

HTML

CSS

Schatteneffekt 6

Hier ist der Effekt gekrümmter Schatten am unteren Rand des Blocks zu sehen.

HTML

CSS

Schatteneffekt 7

Der gleiche Effekt ist nur ein Schatten unter und über dem Block.

HTML

CSS

Schatteneffekt 8

Der Effekt gekrümmter Schatten an den Seiten des Blocks.

HTML

CSS

Das ist alles, liebe Freunde. Wenn Sie etwas nicht verstehen, fragen Sie unbedingt in den Kommentaren nach. Bis bald.

Mit dem Aufkommen des Standards CSS 3 führte die Box-Shadow-Eigenschaft ein, die unter Webentwicklern weit verbreitet ist, da sie es einfach macht, einen oder mehrere Schatten zur Box eines Elements hinzuzufügen, um den gewünschten visuellen Effekt zu erzielen.

Im vorherigen Artikel haben wir uns die Eigenschaft border-radius angesehen. Mit ihr können Sie einen Schatten erzeugen abgerundete Ecken. Analog zu einem Textschatten (Textschatten) können Sie mehrere Schatten erstellen, die entsprechend angewendet werden Z-Achse von vorne nach hinten (mit dem ersten gegebenen Schatten oben).

Schauen wir uns die Syntax dieser modernen Eigenschaft genauer an:

Betrachten wir der Reihe nach die möglichen Werte dieser Eigenschaft:

Die wichtigsten Punkte, die Sie verstehen müssen, um Schatten für Elemente zu erstellen, sind:

Ich möchte Sie darauf aufmerksam machen, dass die Box-Shadow-Eigenschaft derzeit von allen modernen Browsern unterstützt wird:

Wenn Sie die Unterstützung für einige Browser, einschließlich Mobilgeräte, erweitern möchten iOS 3.2 - 4.3 Und Android 2.1 - 3, dann wird empfohlen, Herstellerpräfixe zu verwenden und die folgende Syntax zu verwenden (in den Beispielen im Artikel wird die Syntax nur für moderne Browser verwendet):

Kommen wir zum Üben und beginnen mit einfaches Beispiel, in dem wir den Elementen einen Schatten hinzufügen:

Das Ergebnis unseres Beispiels:

Verwendung mehrerer Schatten

Im folgenden Beispiel schlage ich vor, den interessanten Farbmischeffekt zu betrachten, der durch die Verwendung mehrerer Schatten erzielt werden kann:

• Zwei Blöcke mit fester Breite und Höhe (15 em und 10 em), zusätzliche Polsterung auf allen Seiten (2 em) und Einstellung der Blöcke auf Blocklinie, um sie anordnen zu können.
• Für Erste Block mit Klasse .prüfen wir haben darauf hingewiesen vier Schatten mit unterschiedlichen horizontalen und vertikalen Schattenwerten, sodass das Element auf allen Seiten unterschiedliche Schatten hat. Der Unschärferadius für alle Schatten wurde auf den gleichen Wert eingestellt. Die Farbe jedes Schattens ist unterschiedlich und wird mithilfe vordefinierter Farben festgelegt.
• Für zweite Block mit Klasse .test2 wir haben darauf hingewiesen vier Schatten mit unterschiedlichen horizontalen und vertikalen Schattenwerten. Der Unschärferadius für alle Schatten wurde auf den gleichen Wert eingestellt, während die Schattenstreckung auf negativ eingestellt war, was zu einer Verringerung des Schattens selbst führte. Die Farbe jedes Schattens ist unterschiedlich und wird mithilfe des RGBA-Systems angegeben.

Das Ergebnis unseres Beispiels:

Verwendung von Schatten für Bilder

Das letzte Beispiel dieses Artikels konzentriert sich auf die Verwendung von Schatten für Bilder. Ich möchte Sie sofort darauf aufmerksam machen, dass Sie den Schatten für das HTML-Element direkt angeben können Es wird nicht funktionieren, aber wir haben die Möglichkeit, ein Bild als Hintergrund für das Element anzugeben, an dem wir interessiert sind, und diesem Element dann den Schatten zuzuweisen, den wir benötigen.

Wir werden uns im Lehrbuchartikel „“ ausführlich mit der Arbeit mit Hintergrundbildern befassen und nun, um dem Studium der Verwendung von Schatten ein Ende zu setzen, nur oberflächlich darauf eingehen und im Folgenden das Bild als Hintergrund für ein Element verwenden Beispiel:

• Zwei Blöcke mit fester Breite und Höhe (237px und 232px), Ränder für alle Seiten (2em) hinzugefügt und die Blöcke auf Blocklinien eingestellt, um sie anordnen zu können. Wir haben die Blockgröße 237 x 232 Pixel auf die Größe des Bildes eingestellt, sodass wir in dieser Trainingsphase das Bild nicht skalieren mussten, um es an das Element anzupassen und diese zu beeinflussen CSS-Eigenschaften, die für ein späteres Studium geplant sind (im Lehrbuchartikel „“).
• Für Erste Block mit Klasse .prüfen Wir haben für den horizontalen und vertikalen Schatten einen Nullwert angegeben, gleichzeitig aber einen Unschärferadius von 50 Pixel angegeben und ihn durch die Einstellung eines Streckungsradius von 10 Pixel erweitert. Die Schattenfarbe wurde mit einer vordefinierten Farbe (Violett) angegeben. Darüber hinaus haben wir in der Deklaration das Schlüsselwort inset angegeben, das bewirkt, dass der Schatten in das Element fällt. Mit anderen Worten: Wir haben einen inneren Schatten des Elements erzeugt.
• Für zweite Block mit Klasse .test2 Wir haben für den horizontalen und vertikalen Schatten einen Nullwert angegeben, gleichzeitig aber einen Unschärferadius von 50 Pixel angegeben und ihn durch die Einstellung eines Streckungsradius von 10 Pixel erweitert. Die Schattenfarbe wird im RGBA-Modus angegeben.

Das Ergebnis unseres Beispiels:

Reis. 98 Beispiel für die Verwendung von Schatten für Bilder in CSS (Box-Shadow-Eigenschaft)

Fragen und Aufgaben zum Thema

Bevor Sie mit dem nächsten Thema fortfahren, erledigen Sie die Übungsaufgabe:

Wenn Sie Schwierigkeiten haben, die Übungsaufgabe zu lösen, können Sie das Beispiel jederzeit in einem separaten Fenster öffnen und die Seite überprüfen, um zu verstehen, welcher CSS-Code verwendet wurde.

2016-2020 Denis Bolshakov, Sie können Kommentare und Vorschläge zur Website an [email protected] senden

Blockschatten ist ein hervorragender dreidimensionaler Effekt, der Website-Blöcken Realismus und Volumen verleiht. Als ich mit dem Studium begann (vor etwa 5-6 Jahren), hatte ich keine Ahnung von der Existenz, und als ich eine Website erstellte, musste ich den Schatten der Blöcke in ein Bild umwandeln. Es war sehr umständlich und es hat nicht immer so geklappt, wie ich es wollte. Dank der Leistungsfähigkeit von CSS, das die Arbeit von Webdesignern erleichtert hat. Heute zeige ich Ihnen, wie Sie in CSS einen Schatten für Blöcke erstellen.

Um einen Schatten in CSS hinzuzufügen, verwenden Sie die Eigenschaft Box Schatten .

1. Verschieben Sie den Schatten horizontal (bis zu 100 Pixel nach rechts, bis zu -100 Pixel nach links);
2. Vertikale Verschiebung (bis zu 100 Pixel nach unten, bis zu -100 Pixel nach oben);
3. Schattenunschärfe (0 – klarer Schatten, 100 – sehr unscharfer Schatten);
4. Dehnen des Schattens (bis zu 100 Pixel – Dehnung, bis zu -100 Pixel – Komprimierung);
5. Schattenfarbe;
6. Einschub – der Schatten befindet sich innerhalb des Elements, ohne Einschub liegt der Schatten nach außen.

Ergebnis :

Tabelle mit Schatten:

Code	Beispiel:
Kastenschatten: 0px 13px 17px -6px #000000;
Kastenschatten: 10px -10px 0px -6px #000000;
Kastenschatten: 10px 13px 0px -6px #000000;
Kastenschatten: 1px 1px 32px -6px #000000;
Kastenschatten: -1px 23px 41px -25px #000000;
Kastenschatten: -1px 23px 41px -25px #4dc13c;
box-shadow: -10px -10px 40px -6px #000000 Einfügung;
Kastenschatten: 7px 10px 23px -8px #92a9e7;

Mithilfe eines Schattens können Sie einen dreidimensionalen Block erstellen:

Code	Beispiel
Box-Shadow: 1px 0px rgb(220,195,35), 1px 1px rgb(192,167,7), 2px 1px rgb(219,194,34), 2px 2px rgb(191,166,6), 3px 2px rgb(218,193,33), 3px 3px rgb(190.165,5), 4px 3px rgb(217.192,32), 4px 4px rgb(189.164,4), 5px 4px rgb(216.191,31), 5px 5px rgb(188.163,3), 6px 5px rgb(215.190, 30), 6px 6px RGB(187.162,2), 7px 6px RGB(214.189,29), 7px 7px RGB(186.161,1), 8px 7px RGB(213.188,28), 8px 8px RGB(185.160,0), 9px 8px rgb(212.187,27), 9px 9px rgb(184.159,0);
Box-Shadow: -1px 0px rgb(220,195,35), -1px 1px rgb(192,167,7), -2px 1px rgb(219,194,34), -2px 2px rgb(191,166,6), -3px 2px rgb(218,193 ,33), -3px 3px rgb(190,165,5), -4px 3px rgb(217,192,32), -4px 4px rgb(189,164,4), -5px 4px rgb(216,191,31), -5px 5px rgb(188,163 ,3), -6px 5px rgb(215.190,30), -6px 6px rgb(187.162,2), -7px 6px rgb(214.189,29), -7px 7px rgb(186.161,1), -8px 7px rgb(213.188 ,28), -8px 8px rgb(185.160,0), -9px 8px rgb(212.187,27), -9px 9px rgb(184.159,0);
Box-Shadow: -1px -0px rgb(220,195,35), -1px -1px rgb(192,167,7), -2px -1px rgb(219,194,34), -2px -2px rgb(191,166,6), -3px -2px rgb(218.193,33), -3px -3px rgb(190.165,5), -4px -3px rgb(217.192,32), -4px -4px rgb(189.164,4), -5px -4px rgb(216.191, 31), -5px -5px rgb(188.163,3), -6px -5px rgb(215.190,30), -6px -6px rgb(187.162,2), -7px -6px rgb(214.189,29), -7px - 7px rgb(186.161,1), -8px -7px rgb(213.188,28), -8px -8px rgb(185.160,0), -9px -8px rgb(212.187,27), -9px -9px rgb(184.159,0 );
Box-Shadow: 1px -0px rgb(220,195,35), 1px -1px rgb(192,167,7), 2px -1px rgb(219,194,34), 2px -2px rgb(191,166,6), 3px -2px rgb(218,193 ,33), 3px -3px rgb(190,165,5), 4px -3px rgb(217,192,32), 4px -4px rgb(189,164,4), 5px -4px rgb(216,191,31), 5px -5px rgb(188,163 ,3), 6px -5px rgb(215.190,30), 6px -6px rgb(187.162,2), 7px -6px rgb(214.189,29), 7px -7px rgb(186.161,1), 8px -7px rgb(213.188 ,28), 8px -8px rgb(185.160,0), 9px -8px rgb(212.187,27), 9px -9px rgb(184.159,0);

Blok1 ( Breite: 70 %; maximale Breite: 550 Pixel; Rand: 10 Pixel automatisch; Polsterung: 1em; Boxschatten: 0 1 Pixel 4 Pixel RGBA (0, 0, 0, .3), -23 Pixel 0 20 Pixel -23 Pixel RGBA (0 , 0, 0, .8), 23px 0 20px -23px rgba(0, 0, 0, .8), 0 0 40px rgba(0, 0, 0, .1) Einschub; )

Ergebnis :

Blok1 ( Breite: 30 %; maximale Breite: 550 Pixel; Rand: 2em automatisch; Polsterung: 1em; Hintergrund: #DADADA; Kastenschatten: 6px 6px #BBBBBB, 12px 12px #919191; )

Ergebnis :

Blok1 ( width: 30 %; margin: 0 auto; padding: 2em; box-shadow: 0 0 0 1px #ccc, 0 -20px 0 -10px #00FF00, 20px 0 0 -10px #FF0000, 0 20px 0 -10px # FFFF00, -20px 0 0 -10px #FF3399; )

Ergebnis :

Mit einem Schatten können Sie einen schönen Rahmen erstellen.

Schöner Rahmen mit EigenschaftenKasten- Schatten

Blok1 ( Breite: 20 %; maximale Breite: 250 Pixel; Rand: 0 automatisch; Polsterung: 1em; Rand: 2 Pixel gestrichelt #999; Boxschatten: 0 0 0 1 Pixel #999, Einschub 0 0 0 1 Pixel #999; )
Ergebnis
:

Blok1 ( Breite: 30 %; maximale Breite: 250 Pixel; Rand: 2em automatisch; Polsterung: 4em; Hintergrund: #dcc005; Boxschatten: 0 0 4em 4em #fff Einfügung; )
Ergebnis
:

Blok1 ( max-width: 250px; margin: 0 auto; padding: 1em; border-radius: 10px; background: rgb(100,100,100) radial-gradient(circle at 0 0, rgba(255,255,255,.65), rgba(255,255,255, .35)); box-shadow: inset rgba(0,0,0,.5) -3px -3px 8px, inset rgba(255,255,255,.9) 3px 3px 8px, rgba(0,0,0,.8) 3px 3px 8px -3px; )
Ergebnis
:


 
 
 
 
 
 
 

 

 
Webseite
 

 







Ergebnis
:

Diese schönen Effekte können mithilfe von Schatten in CSS erzielt werden.  Lassen Sie sich etwas Neues und Originelles einfallen, alles liegt in Ihren Händen.  Sie verfügen über das Wissen und die Fähigkeiten. 
Und eines Tages werde ich einen Artikel darüber veröffentlichen, wie Sie ohne Photoshop erstellen können.  Seien Sie also im Mittelpunkt des Geschehens und abonnieren Sie meine Blog-Updates.  Verpassen Sie kein Thema, das Sie interessiert.  So, das war's, viel Glück!!!
Erläuterungen:
, – CSS-Spracheigenschaften, die zum Erstellen von Schatten verwendet werden.
, , — Schatteneigenschaftsparameter.
, , , — CSS-Eigenschaften, die für die Änderung der Größe und Position von Elementen verantwortlich sind.
— Tag, verantwortlich für die Erstellung von Links.

Selektoren sind eine Art Links, mit deren Hilfe CSS bestimmt, welche Elemente bestimmte Stile anwenden sollen.
Hover ist ein Zustandsselektor.
— Eigenschaft der animierten Objektänderung.
Schatten werden häufig verwendet, um einen dreidimensionalen Effekt zu erzielen.  Sie ermöglichen es Ihnen, Texten und Blöcken einen einzigartigen Stil zu verleihen und in Kombination mit speziellen Schriftarten eine tolle Wirkung zu erzielen.

CSS bietet uns so viel Raum für Fantasie und Experimente, dass es Jahre dauern wird, sie alle auszuprobieren.
In diesem Artikel gehen wir ausführlich auf das Erstellen von Schatten in CSS ein.  Zusätzlich zu den regulären Außenschatten zeigen wir Ihnen, wie Sie Innen- und Zustandsschatten erstellen.
CSS – Boxschatten.  Box-Shadow-Eigenschaft

html( Hintergrund: #fff; ) Body( Breite: 80 %; Rand: 0 automatisch; Hintergrundfarbe: rgba(150,60,60,0.54) Box-Shadow: -1px 5px 5px 5px rgba(77,63,63 ,0,88) ) 
Mit dem Tool können wir einen oder mehrere Schatten mit beliebiger Farbe um einen Block herum erstellen.
Was ist im Wesentlichen ein Schatten?  Dies ist eine exakte Kopie der Fläche des Elements, die eine bestimmte Farbe und Position hat.  Diese Parameter können mit der Box-Shadow-Eigenschaft festgelegt werden.
Die Schatteneigenschaften werden in dieser Reihenfolge verwendet:
Horizontal bewegen.
Vertikal bewegen.
Grad der Unbestimmtheit.
Dehnen.
Schattenfarbe.
Dies ist die Reihenfolge, in der die Schattenparameter angegeben werden sollten.  Die Hauptsache ist, den Wert nicht zu verwechseln, da die ersten 4 auf die gleiche Weise mit numerischen Werten festgelegt werden - , , usw.

Der erste Parameter, der aufgerufen wird – verschiebt den Schatten horizontal relativ zum Block.  Akzeptiert alle Werte, auch negative.
Negative Werte verschieben den Schatten nach links und positive Werte verschieben den Schatten nach rechts.  Der Parameterwert kann gleich 0 sein, wenn Schatten entlang der vertikalen Achse verwischt werden.
Als nächstes folgt die Immobilie .  Verantwortlich für die vertikale Bewegung des Schattens.  Es akzeptiert auch alle Werte – positiv und negativ.  Negative Werte verschieben den Schatten nach oben und positive Werte verschieben den Schatten nach unten.
Dieser Parameter kann auf 0 gesetzt werden. Wird normalerweise für horizontale Schattenunschärfe verwendet.
Aufmerksamkeit!  Wir empfehlen, den Wert in Pixeln anzugeben.  Sie können andere Werte verwenden - , , % und andere, dies wird jedoch nicht empfohlen.  Alle diese Werte sind für die Schattenerzeugung recht groß.  Wenn Sie sie angeben, können Sie es mit den Größen übertreiben.

3 Wert - oder verschwimmen.  Die Eingabe dieses Werts ist nicht erforderlich; auch ohne Angabe funktionieren die Schatten weiterhin.
Der angegebene Wert bestimmt den Radius, entlang dem der Schatten unscharf wird.  Negative Werte werden nicht angezeigt.
Hier können auch größere Werte verwendet werden.  Eine starke Unschärfe trägt dazu bei, einen farbenfrohen Effekt zu erzielen, allerdings nur in manchen Situationen.
Der vorletzte Wert, der für die Streckung des Schattens verantwortlich ist.  Dies ist ebenfalls optional, kann Ihrem Schatten jedoch etwas Farbe verleihen.
Die Ausdehnung erfolgt durch die Streckung des zentralen festen Teils des Schattens, der sich zwischen den unscharfen Kanten befindet.
Dieser Parameter kann beliebige Werte annehmen, sowohl positive als auch negative.  Positive Werte strecken den Schatten, während negative Werte ihn verkleinern.
Und der letzte Parameter - .  Es ist auch nicht erforderlich, es anzugeben, da der Boxschatten standardmäßig eine eigene Farbe hat – Schwarz.
Zum Farbwechsel eignet sich jedes Farbsystem – sowie Standardfarben.
Aufmerksamkeit!  Wenn Sie möchten, dass die Eigenschaft in Safari funktioniert, muss dieser Parameter angegeben werden, auch wenn Sie die Standardfarbe Schwarz verwenden.
Innerer Schatten – CSS

html( Hintergrund: #fff; ) Body( Breite: 80 %; Rand: 0 automatisch; Hintergrundfarbe: rgba(150,60,60,0.54) Box-Shadow: -1px 5px 5px 5px rgba(77,63,63 ,0,88) Einschub; ) 
Schauen wir uns also das erste Beispiel für die Verwendung von Schatten an.  Hier betrachten wir die Erstellung eines inneren Schattens für den Körperblock.
Öffnen Sie zunächst unser HTML-Dokument und füllen Sie es aus.  Sie müssen keine Tags angeben, den Inhalt nicht ausfüllen, die Hauptsache ist, ein Tag zu erstellen .
Öffnen Sie unser CSS-Dokument und schreiben Sie das Tag , es wird unser Hauptselektor sein.
Als nächstes öffnen wir Zahnspange und notieren Sie die Eigenschaft .  Position festlegen, verwischen, strecken.  Sie wissen bereits, wie Sie diese Werte festlegen.  Danach legen wir die Farbe des Schattens fest, wir haben ihn weiß gemacht, aber Sie können ihn nach Ihren Wünschen einstellen.
Jetzt das Wichtigste.  Um in CSS einen inneren Schatten eines Blocks zu erstellen, müssen Sie den Einfügungswert angeben.  Sie können es direkt nach der Definition der Farbe angeben.
Als Ergebnis haben wir diesen Block erhalten:
HTML/CSS – Textschatten

html( Hintergrund: #fff; ) Body( Breite: 80 %; Rand: 0 automatisch; Hintergrundfarbe: rgba(150,60,60,0.54) Box-Shadow: -1px 5px 5px 5px rgba(77,63,63 ,0,88) Einfügung; ) div( Rand: 150px; Boxschatten: -1px 5px 5px 5px rgba(77,63,63,0,88); Schriftgröße: 25px; ) 
Wird auf ähnliche Weise erstellt, verwendet jedoch anstelle von box-shadow die Eigenschaft .  Die Eigenschaftsparameter sind in der folgenden Reihenfolge.
Horizontale Verschiebung.
Vertikale Verschiebung.
Unschärferadius.  Nicht unbedingt.
Farbe.
Wie Sie sehen, gibt es in dieser Immobilie keine Stretch-Option.  Die Größe des Schattens ist immer identisch mit der Größe des Textes; dies kann nicht korrigiert werden.
Es ist sehr praktisch, Schatten übereinander aufzutragen.  Dazu müssen Sie mehrere Parametergruppen auflisten
Der erste Schatten wird näher am Text platziert, der zweite darüber.  Erinnert an die Arbeit mit den Umriss- und Rahmeneigenschaften, aber hier können Sie 2, 3 oder mehr Schatten erstellen.
Hover-Schatten – CSS
Schauen wir uns nun die Erstellung von Schatten für einen bestimmten Zustand an.  In unserem Beispiel verwenden wir eine Schaltfläche.
Um einen Schatten für eine Schaltfläche zu erstellen, müssen Sie diese zunächst platzieren.  Öffnen Sie das Tag a, notieren Sie die Schaltflächenklasse dafür und einen beliebigen Textwert zur besseren Anzeige.

Legen wir zunächst die Platzierung mithilfe der Eigenschaft „margin“ fest und vergrößern die Schaltfläche auf eine bestimmte Größe.  Um es zu vergrößern, können Sie die Eigenschaften width und height oder die Eigenschaft padding verwenden.
Jetzt legen wir die Hintergrundfarbe, den Text und den Rahmen fest.  Unser Button ist fertig, beginnen wir mit der Erstellung des Schattens.
Erstellen wir zunächst mit box-shadow einen regelmäßigen, kleinen Schatten.  Es ist standardmäßig sichtbar, ohne dass Sie den Mauszeiger über die Schaltfläche bewegen müssen.


Machen wir den einfachsten Effekt: Erhöhen Sie den Schatten.  Sie können es verschwimmen lassen oder die Dehnung nach Ihrem Geschmack ändern.
Um den besten Effekt zu erzielen, legen wir die Übergangseigenschaft für einen regulären Link fest und stellen die Zeit auf 0,5 Sekunden ein.
Jetzt haben wir eine tolle Schaltfläche mit einem schönen Schatten, der sich beim Bewegen der Maus sanft ausdehnt.

Abschluss
In diesem Artikel haben wir alle grundlegenden Möglichkeiten zum Erstellen von Schatten kennengelernt.  Wir haben alle Eigenschaften und Parameter von Schatten besprochen.
Alle Elemente, die in den Screenshots dargestellt wurden, finden Sie im Quellordner.  Wenn Sie möchten, können Sie diese selbst erkunden und mit den Werten experimentieren.  Vielleicht werden Sie es viel besser machen als wir.