CSS ist voller Optionen, um das Erscheinungsbild Ihrer Websites zu verbessern. Text- und Rahmenschatten sind Paradebeispiele. Sie bieten ähnliche Ergebnisse wie die Schatten in Bildbearbeitungssoftware wie Photoshop.

Aber wie funktionieren CSS-Schatten? Lassen Sie uns gleich eintauchen.

So verwenden Sie CSS Box Shadow

Sie können einen CSS-Box-Schatten mit einer einzelnen CSS-Zeile anwenden, die einen Bereich von bis zu sechs Werten enthält. Die Reihenfolge der Werte ist entscheidend für das Funktionieren Ihres CSS-Box-Schattens und sieht so aus:

Box-Schatten: Versatz-x Versatz-y Unschärfe Ausbreitung Farbeinsatz;

Sehen wir uns die einzelnen Werte der Reihe nach an.

CSS-Box-Schattenposition

Die Offset-x- und Offset-y-Werte steuern die Position Ihres Boxschattens. Der Offset-x-Wert stellt die horizontale Position des Schattens dar, während Offset-y der vertikale Offset ist.

 Box-Schatten: 10px 10px;

Positive Werte führen zu einem Schatten unterhalb und rechts des Elements.

Sie können auch negative Werte für h-Offset und v-Offset verwenden:

instagram viewer 
 Box-Schatten: -10px -10px;

Ein negativer h-Offset verschiebt den Schatten nach links, während ein negativer v-Offset ihn nach oben verschiebt:

CSS-Box-Schattenunschärfe

Wie Sie sehen können, erzeugt das Hinzufügen des h-Versatzes und des v-Versatzes zu Ihrem Schatten einen soliden Schatten ohne Auslaufen. Der Blur-Wert verwischt Ihren CSS-Box-Schatten und wird wirksam, wenn Sie einen dritten Wert angeben:

Box-Schatten: 10px 10px 20px;

Je höher die Zahl, die Sie zum Unschärfewert hinzufügen, desto unschärfer wird Ihr CSS-Box-Schatten. Dieser Wert darf nicht negativ sein.

CSS Box Shadow Spread

Mit dem Spread-Wert können Sie die Größe Ihres Schattens ändern, ohne seine Position zu ändern.

 Box-Schatten: 10px 10px 20px 30px;

Ein positiver Spread-Wert macht den CSS-Box-Schatten größer, während ein negativer Wert ihn kleiner macht.

CSS-Box-Schattenfarbe

CSS-Feldschatten verwenden standardmäßig die Textfarbe des Elements, aber Sie können dies überschreiben, indem Sie eine Farbe hinzufügen:

Box Schatten: 10px 10px 20px 10px #0000ff;

Die Farbe, die Sie verwenden, muss in einem zulässigen CSS-Farbformat vorliegen, z. B. als Hex-Code, RGB-Code oder vordefinierte Farbe. Du kannst Erfahren Sie mehr über Hex-Codes und andere CSS-rechtliche Farboptionen, bevor Sie mit Ihren Schatten beginnen.

CSS-Box-Schatteneinfügung

CSS-Box-Schatten fallen standardmäßig außerhalb ihres zugewiesenen Elements. Indem Sie der Box-Shadow-Eigenschaft einen Einschub hinzufügen, können Sie den Schatten auf der Innenseite des Elements anzeigen.

Box Schatten: 10px 10px 20px 10px Einschub #0000ff;

Dies ist ein vordefinierter Textwert; Fügen Sie es einfach hinzu oder entfernen Sie es, um den Wert festzulegen.

So verwenden Sie CSS-Textschatten

CSS-Textschatten sind wie Box-Schatten, obwohl sie weniger Werte zu ändern haben. Die Syntax für einen CSS-Textschatten sieht folgendermaßen aus:

Textschatten: Versatz-x Versatz-y Unschärferadiusfarbe;

Aber wie funktionieren diese Werte?

CSS-Textschattenposition

CSS-Textschatten-Offsets funktionieren sehr ähnlich wie die gleichen Box-Schattenwerte:

Textschatten: 10px 10px;

Positive Werte positionieren den Schatten unterhalb und rechts vom Text.

Negative Werte bewirken das Gegenteil und platzieren den Schatten über und links vom Text.

 Textschatten: -10px -10px;

Sie können negative und positive Werte mischen, um Ihren CSS-Textschatten perfekt zu positionieren.

CSS-Text-Schattenunschärfe-Radius

Mit dem CSS-Textschatten-Unschärferadius können Sie den Schatten hinter Ihrem Text verwischen.

Textschatten: 10px 10px 10px;

Der Standardwert für diesen Wert ist 0 (keine Unschärfe).

CSS-Textschattenfarbe

Standardmäßig entsprechen CSS-Textschatten der Farbe des Textes. Sie können die Farbe Ihres Textes ändern, indem Sie sie am Ende der CSS-Textschatteneigenschaft hinzufügen.

Textschatten: 10px 10px 10px #0000ff;

Wie bei CSS-Box-Schattenfarben müssen Sie dafür eine CSS-legale Farbe verwenden.

Designbeispiele für CSS-Boxen und Textschatten

Sobald Sie die Grundlagen verstanden haben, können Sie mit der Verwendung von CSS-Boxen und Textschatten experimentieren. Die folgenden Ideen sollen Sie dazu inspirieren, Ihre eigenen kreativen Wege zur Verwendung dieser CSS-Eigenschaften zu finden.

Zweifarbige Ränder mit zwei CSS-Kastenschatten

Sie können einem HTML-Element mehr als einen Rahmenschatten oder Textschatten hinzufügen. Solange zwischen ihnen Kommas stehen, können Sie einer einzelnen Eigenschaft neue Schatten hinzufügen.

Box Schatten: 30px 30px#0000ff, -30px-30px 0px#00ff00;

Diese zweifarbige Umrandung ist ein gutes Beispiel dafür. Zwei CSS-Box-Schatten mit entgegengesetzten Positionen und ohne Unschärfe/Spreizung erzeugen eine hervorragende kreative Grenze.

Duale CSS-Textschatten für dramatische Effekte

Ähnlich wie bei der obigen Idee können Sie mehrere Textschatten hinzufügen und positionieren, um interessante Ergebnisse zu erzielen.

Textschatten: 35px 20px 4px dunkelgrau, -35px -20px 4px dunkelgrau;

Dieses Beispiel zeigt eine Textzeile mit einem Schatten darüber und einem Schatten darunter, die beide textbasierte Farbwerte haben.

Mehrfarbige Hintergründe mit eingefügten CSS-Kastenschatten

CSS ist leistungsfähig genug, um einzigartige und interessante Assets ohne externe Dateien zu erstellen. Die Verwendung eines eingefügten CSS-Kastenschattens als Hintergrund ist ein großartiges Beispiel dafür.

Box Schatten: 20px 10px 10px 40px #000000 Einschub, -50px -30px 8px 60px grauer Einschub, 30px 20px 6px 90px hellgrauer Einschub;

Dieses Feld hat einen weißen Hintergrund, zusammen mit drei eingesetzten Schatten in verschiedenen Farben. Die Schatten überlappen sich, um einen einzigartigen Hintergrund zu schaffen.

Es ist einfach, diesen Effekt weiter zu verstärken Hinzufügen eines stilvollen CSS-Hintergrundverlaufs zu deinem Element.

CSS Box Shadows & Text Shadows für kreatives Webdesign

CSS-Felder und Textschatten sind einfach zu verwenden, sobald Sie wissen, wie man damit arbeitet. Sie haben jetzt die Werkzeuge, die Sie benötigen, um mit der Arbeit an Ihren eigenen Designs zu beginnen, aber Sie sollten weiterhin CSS erforschen, um Ihre Fähigkeiten zu verbessern.