Umrisseffekt für Text - CSS

Cascading Style Sheet ist eine einfache Designsprache, die das Erstellen von Webseiten präsentierbar und ansprechend macht. Darüber hinaus können wir dem Text mehrere Stile hinzufügen, wie Farbe, Schatten und andere Elemente. Das Hinzufügen eines Umrisseffekts ist einer von ihnen. Benutzer ändern die Schriftgröße, die Dekoration und das Schriftgewicht, indem sie mehr Stylingeigenschaften anwenden.

Dieser Beitrag wird beschreiben:

• So fügen Sie dem Text mit “einen Umriss -Effekt hinzu“. “Textstrich" Eigentum?
• So fügen Sie dem Text mit “einen Umriss -Effekt hinzu“. “Textschatten" Eigentum?

So fügen Sie dem Text mit der Eigenschaft "Text-Stroke" einen Umriss-Effekt hinzu?

Der "TextstrichEigenschaft kann verwendet werden, um dem Text einen Umrisseffekt hinzuzufügen. Einige der Arten von Eigenschaften "Texte" werden nachstehend erwähnt:

• “-Webkit-Text-StrokeDas Eigentum gibt dem Text einen Schlaganfall. Es kann als Kurzeigeneigenschaft angegeben werden, indem die Breite und die Farbwerte festgelegt werden.
• “-Webkit-Text-Stroke-Breite”Bestimmt die Breite des Schlaganfalls.
• “-webkit-text-stroke-color”Wendet die Farbe auf den Schlaganfall an.
• “-webkit-text-fill-color”Fügt dem Text Farbe hinzu.

Die Texthubeigenschaft muss mit dem angegeben werdenWebkit-" Präfix. Es wird nur von Webkit-basierten Browsern unterstützt, wie z. "Oper","Safari","Chrom", Und "Android”. Alternativ die “TextschattenEigenschaft ist mit fast allen Browsern kompatibel.

Für ein besseres Verständnis finden Sie die unten genannten Beispiele.

Beispiel 1

Erstellen Sie eine HTML -Datei, indem Sie den Anweisungen folgen:

• Zuerst fügen Sie eine "hinzu"Element und zuweisen Sie es "das"Inhalt" Klasse.
• In diesem "" fügen Sie die "hinzu"

  "Element mit der ID"Text”Um dem Dokument einen Text anzugeben. Das "TextID wird mit CSS -Eigenschaften angewendet, um einen Umrisseffekt hinzuzufügen:

CSSS-SUCKLINE-Effekt zum Text

Gehen Sie nun zum CSS.

Stil „Inhalts“ -Klasse

.Inhalt
Breite: 500px;
Rand: Auto;

Der ".Inhalt"Wird verwendet, um auf die zuzugreifen""Element mit Klasse"Inhalt”. Die folgenden Eigenschaften werden darauf angewendet:

• “BreiteEigenschaft legt die Breite des Elements fest.
• “RandGibt den Raum um das Element an.

Stil „P“ Element

Zugang nun auf die “P”Element durch ID“Text”Und wenden Sie die folgenden Eigenschaften an:

#Text
Farbe weiß;
-webkit-text-taste: 1px white;
Text-Shadow: 0PX 1PX 4PX #46256D;
Schriftgröße: 45px;

Hier:

• “FarbeGibt die Schriftfarbe des Elements an.
• “SchriftgrößeEigenschaft legt die Schriftgröße des Elements fest.
• “-Webkit-Text-StrokeEigenschaft wird verwendet, um den Umrisseffekt auf den Text anzuwenden.

Ausgang

Beispiel 2

#Text
Farbe weiß;
Schriftgröße: 42px;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: lila;

Im zweiten Beispiel haben wir die SMS -Breite und -farbe festgelegt, indem wir die “angeben-Webkit-Text-Stroke-Breite" Und "-webkit-text-stroke-color" Eigenschaften.

Ausgang

Beispiel 3

#Text
Schriftfamilie: Kursiv;
Farbe weiß;
Schriftgröße: 35px;
-webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: schwarz;

In diesem Beispiel das “SchriftfamilieEigenschaft gibt den Stil des Elementtextes an.

Ausgang

So fügen Sie dem Text mit der Eigenschaft "Text-Shadow" einen Umriss-Effekt hinzu?

Das CSS “TextschattenDie Eigenschaft wird verwendet, um Text einen Schatteneffekt hinzuzufügen und von allen Browsern unterstützt wird.

Hier ist die grafische Darstellung des Hinzufügens mehrerer Schatten zu Text:

Beispiel 1

#Text
Farbe weiß;
Schriftgröße: 40px;
Text -Shadow: -1px 1px 2px #253f11, 1px 1px 2px #253f11, 1px -1px 0 #253f11,
-1px -1px 0 #253f11;

Die Beschreibung der zusätzlichen Eigenschaften ist oben dargestellt.

Ausgang

Beispiel 2

#Text
Farbe weiß;
Schriftgröße: 48px;
-webkit-text-taste: 1px #f0ecec;
Text-Shadow: 0PX 1PX 5PX RGB (0, 0, 175);

Im obigen Code haben wir beide angewendet “Textschatten" Und "-Webkit-Text-Stroke”CSS -Eigenschaften.

Ausgang

Wir haben verschiedene Beispiele zur Verfügung gestellt, um den Umrisseffekt auf den Text anzuwenden.

Abschluss

Um dem Text einen Umrisseffekt hinzuzufügen, das CSS “TextstrichEigenschaft kann verwendet werden. Diese Eigenschaft beinhaltet "Text-Stroke-Breite","Text-Stroke-Farbe", Und "Text-Fill-Farben”. Eine andere Eigenschaft, um den SMS in der CSS Umrisseffekte hinzuzufügen, ist “Textschatten”. In diesem Blog wurde erklärt.