Stellen Sie beim Entwerfen einer Website sicher, dass das Gesamtaussehen der Website ästhetisch ansprechend ist, um die Benutzererfahrung zu verbessern. Zu diesem Zweck können Sie auf Ihrer Website Bilder oder Text hinzufügen. Wenn Sie jedoch nur einen einfachen Text hinzufügen Text-Shadow-Eigenschaft.

Wir haben dieses Tutorial entwickelt, damit Sie lernen, wie Sie Ihren einfachen Text auf unterschiedliche Weise interessant machen können, indem Sie Textschatten hinzufügen.

Lass uns anfangen.

CSS -Textschatten

Sie können einen Schatten zum Text hinzufügen, der auf Webseiten mit der CSS-Text-Shadow-Eigenschaft angezeigt wird. Hier werden wir verschiedene Möglichkeiten demonstrieren, wie Sie Ihrem Text Schatten hinzufügen können.

Fügen Sie horizontaler und vertikaler Schatten hinzu

So fügen Sie einen Schatten in einem Text horizontal und vertikal ein Schatten hinzu, einfach Werte für beide Dimensionen der Text-Shadow-Eigenschaft. Folgen Sie dem folgenden Beispiel.

Html

Hallo Welt

Hier haben wir eine geschaffen

Element und einige Text hinzugefügt.

CSS

H1
Text-Shadow: 2px 2px;
Farbe blau;

Mit der text-Shadow-Eigenschaft geben wir 2px sowohl an horizontale als auch an vertikale Abmessungen des Textes. Zusätzlich bieten wir dem Text auch blaue Farbe.

Ausgang

Dem Text wurde ein horizontaler und vertikaler Schatten hinzugefügt.

Fügen Sie dem Schatten Farbe hinzu

Eine weitere lustige Sache, die Sie tun können, ist, dem Text Farbe zusammen mit dem Schatten hinzuzufügen. Verwenden Sie den folgenden Code -Snippet.

CSS

H1
Text-Shadow: 2PX 2PX Blue;

Abgesehen davon, dass wir den horizontalen und vertikalen Abmessungen des Textes einen gewissen Wert geben, liefern wir auch die Farbe des Schattens. Diese Farbe wird nicht auf den Schatten angewendet, nicht auf den Text.

Ausgang

Der Schatten hat die Farbe blau gegeben.

Fügen Sie dem Schatten einen unscharfen Effekt hinzu

Um dem Schatten einen Unschärfeneffekt hinzuzufügen. Folgen Sie dem folgenden Code.

CSS

H1
Text-Shadow: 2PX 2PX 6PX RGB (255,20,147);

Im obigen Code repräsentieren zwei Werte der Text-Shadow-Eigenschaft die Länge des horizontalen und vertikalen Schattens und der dritte Wert repräsentiert die Intensität der Unschärfe. Wir haben dem Schatten auch eine tiefrosa Farbe zur Verfügung gestellt.

Ausgang

Der Unschärfeneffekt wurde erfolgreich hinzugefügt.

Fügen Sie dem Schatten einen Glüheffekt hinzu

Um einen Glüheffekt direkt hinter dem Text hinzuzufügen, folgen Sie dem folgenden Beispiel.

CSS

H1
Text-Shadow: 0 0 5px rot;

Im obigen Code -Snippet zuweisen wir den horizontalen und vertikalen Abmessungen des Text.

Ausgang

Dem Text wurde ein leuchtender Effekt hinzugefügt.

Hinzufügen mehrerer Schatten

Um zahlreiche Schatten in den Text hinzuzufügen, können Sie eine Liste von Schatten in der von Commas getrennten Text-Shadow-Eigenschaft hinzufügen.

CSS

H1
Text-Shadow: 3px 3px 4px gelb, 4px 4px 6px lila;

Im obigen Beispiel fügen wir dem Text einen gelben und lila Schatteneffekt hinzu.

Ausgang

Mehrere Schatten wurden erfolgreich hinzugefügt.

Hinzufügen einer Gliederung zum Text

Folgen Sie dem folgenden Beispiel, um dem Text mit der Eigenschaft von Text-Shadow einen Gliederungsriss hinzuzufügen:

CSS

H1
Farbe: Bisque;
Text -Shadow: 1px 1px schwarz, -1px -1px schwarz;

Im obigen Beispiel haben wir einen schwarzen Farbschatten mit 1PX -Abmessungen und Abmessungen von -1px und linke Abmessungen zugewiesen.

Ausgang

Dem Text wurde ein Umriss hinzugefügt.

Abschluss

Um Ihren einfachen Text interessant zu machen, können Sie ihm einen Schatteneffekt hinzufügen, indem Sie die Eigenschaft Text-Shadow verwenden. Zu diesem Zweck müssen Sie die Länge der horizontalen sowie die vertikale Dimension des Schattens in der Eigenschaft Text-Shadow angeben. Neben dem Hinzufügen eines Schatten. Es ist auch möglich, denselben Text mit der SMS-Shadow-Eigenschaft mehrere Schatten hinzuzufügen. In diesem Handbuch haben wir verschiedene Möglichkeiten zusammengefasst, wie Sie dem Text einen Schatteneffekt hinzufügen können.