Box -Schatteneffekt in CSS

Die Verbesserung der Benutzererfahrung Ihrer Website spielt eine wichtige Rolle bei der Aufmerksamkeit des Benutzers. Es gibt mehrere Möglichkeiten, wie Sie diese Aufgabe ausführen können. Eine offensichtliche Möglichkeit besteht darin, das Gesamtaussehen Ihrer Website zu verschönern, und dies kann durch Hinzufügen von Farben, Bildern und Animationen auf der Website durchgeführt werden. Eine weitere interessante Sache, die das Aussehen der Website verbessern kann, sind verschiedene Arten von Schatteneffekten. In CSS gibt es zwei Arten von Schatteneffekten, die Textschatten und Box-Shadow sind. In diesem Artikel erzählen wir Ihnen alles über den Box-Shadow-Effekt.

CSS Box Shadow

Verwenden Sie die Box-Shadow-Eigenschaft zum Hinzufügen von Schatten zu verschiedenen HTML-Elementen. Im Folgenden haben wir verschiedene Möglichkeiten gezeigt, wie Sie Ihren HTML -Elementen Schatten hinzufügen können.

Fügen Sie horizontaler und vertikaler Schatten hinzu

So fügen Sie einen Schatteneffekt auf ein bestimmtes Element horizontal und vertikal einfach zu beiden Dimensionen der Box-Shadow-Eigenschaft hinzu. Betrachten Sie das folgende Beispiel.

Html

Lernkastenschatteneffekt

Hier erstellen wir einfach ein DIV-Element, um das Konzept des Box-Shadow-Effekts zu demonstrieren.

CSS

div
Breite: 250px;
Höhe: 150px;
Polsterung: 10px;
Hintergrundfarbe: Bisque;
Box-Shadow: 9px 9px;

Mit CSS bieten wir dem Div -Element eine Breite, Höhe, Polsterung und Hintergrundfarbe an. Zuletzt haben wir mit der Eigenschaft Box-Shadow die horizontalen und vertikalen Abmessungen des Schattens 9px gegeben. Beachten Sie, dass der Schatten die gleiche Farbe hat wie der im Div -Element vorhandene Text.

Ausgang

Der Div -Behälter wurde ein horizontaler und vertikaler Schatten hinzugefügt.

Fügen Sie dem Schatten Farbe hinzu

Wie bereits erwähnt, ist die Farbe des Schattens standardmäßig die gleiche wie die des im Element vorhandenen Inhalts. Sie können seine Farbe jedoch ändern, indem Sie sie in der Box-Shadow-Eigenschaft angeben. Verwenden Sie den folgenden Code -Snippet.

CSS

div
Box-Shadow: 9PX 9PX LOCKELAGREEN;

Hier haben wir die Farbe des Schattens angegeben.

Ausgang

Ein Lichtaggregat -Schatten wurde der Schachtel hinzugefügt.

Fügen Sie dem Schatten einen unscharfen Effekt hinzu

Geben Sie die Unschärfeintensität in der Eigenschaft Box-Shadow-Eigenschaft an, um dem Schatten Unschärfe zu verleihen. Folgen Sie dem folgenden Beispiel.

CSS

div
Box-Shadow: 9PX 9PX 7PX RGB (32, 178, 170);

Wir haben die Unschärfenintensität auf 7PX eingestellt. Beachten Sie, dass sich der Unschärfeneffekt verbessert, wenn Sie die Unschärfeintensität erhöhen.

Ausgang

Ein Unschärfeneffekt wurde erfolgreich hinzugefügt.

Ändern Sie die Größe des Schattens

Um die Größe des Schattens zu verändern, können Sie die Spread -Intensität des Schattens angeben. Die Spread -Intensität definiert im Grunde die Ausbreitung des Schattens und nicht die Größe. So machst du es.

CSS

div
Box-Shadow: 9px 9px 7px 10px Lighteagreen;

Im obigen Code haben wir zunächst die horizontalen und vertikalen Dimensionen des Schattens auf 9PX eingestellt, dann haben wir die Unschärfeintensität auf 7PX eingestellt und zuletzt die Spread -Intensität als 10px angegeben.

Ausgang

Ein Schatten mit einer spezifischen Ausbreitintensität wird wie gewünscht aufgetragen.

Notiz: Um die Ausbreitung des Schattens zu verringern, wenden Sie dem Spread -Radius negative Werte zu.

Alle oben genannten Beispiele zeigen, wie man einem Element einen äußeren Schatten hinzufügt. Sie können einem Element jedoch auch einen inneren Schatten hinzufügen.

Fügen Sie einen inneren Schatten hinzu

Setzen Sie zu diesem Zweck einfach einen Einschubparameter in die Box-Shadow-Eigenschaft ein. Folgen Sie dem folgenden Code -Snippet:

CSS

div
Box-Shadow: Einschub 9PX 9PX 7PX LOCKELAGREEN;

Abgesehen von der Definition der Größe, des Unschärfsradius und der Farbe des Schattens haben wir den äußeren Schatten mit „Einschatten“ in eine innere verwandelt, indem wir "Einschatten" in eine innere Weise verwandelt haben.

Ausgang

Ein innerer Schatten wurde erfolgreich hinzugefügt.

Hinzufügen mehrerer Schatten

Um zahlreiche Schatten zu einem Element hinzuzufügen, können Sie der Box-Shadow-Eigenschaft, die von Commas getrennt ist, eine Liste von Schatten hinzufügen. Hier ist ein Beispiel.

CSS

div
Box-Shadow: 6PX 6PX LACTSAGREEN, 8PX 8PX LightSalmon, 12px 12px LightskyBlue;

Hier fügen wir drei verschiedene Schatten hinzu, wobei jeder Schatten eine bestimmte Größe und Farbe hat.

Ausgang

Mehrere Schatten wurden erfolgreich hinzugefügt.

Mit dem Wissen über Spread -Radius, innerer Schatten und mehrere Schatten können Sie mit Schatten ein weiteres lustiges Ding machen. Betrachten Sie das folgende Beispiel unten.

CSS

div
Box-Shadow: Einschub 6px 6px 10px Lighteagreen,
Einschub -6px -6px 10px LightsLategrey;

Im obigen Code fügen wir zwei innere Schatten auf demselben Element hinzu, aber beide Schatten haben unterschiedliche Positionen und Farben.

Ausgang

Zwei innere Schatten wurden erfolgreich hinzugefügt.

Abschluss

Um dem HTML-Element einen Schatten hinzuzufügen, wird die Eigenschaft CSS-Box-Shadow verwendet. Sie müssen die Länge der horizontalen sowie die vertikale Dimension des Schattens in der Box-Shadow-Eigenschaft angeben. Sie können dem Schatten eines Elements auch Farbe und einen unscharfen Effekt hinzufügen. Abgesehen davon können Sie die Eigenschaft Box-Shadow-Eigenschaft die Ausbreitung eines Schattens verbessern oder einem Element einen inneren Schatten hinzufügen. Dieses Tutorial soll Sie über verschiedene Möglichkeiten führen, die verwendet werden können, um einem Element einen Schatten zu verleihen.