Zarys Efekt do tekstu - CSS

Arkusz stylów kaskadowych to prosty język projektowy, który sprawia, że ​​proces tworzenia stron internetowych jest prezentowany i atrakcyjny. Dodatkowo umożliwia nam dodanie kilku stylów do tekstu, takich jak kolor, cień i inne elementy. Dodanie efektu konturu jest jednym z nich. Użytkownicy zmieniają rozmiar czcionki, dekorację i masę czcionki, stosując więcej właściwości stylizacji.

Ten post opisuje:

• Jak dodać efekt konturu do tekstu za pomocą „Składka tekstowa" Nieruchomość?
• Jak dodać efekt konturu do tekstu za pomocą „cień tekstu" Nieruchomość?

Jak dodać efekt konturu do tekstu za pomocą właściwości „Stroke tekstowe”?

„„Składka tekstowa„Własność można wykorzystać do dodania efektu zarysu do tekstu. Niektóre typy właściwości „Stroke tekstowe” są wspomniane poniżej:

• "-Webkit-Text-Stroke„Własność podaje skok do tekstu. Można go określić jako właściwość skrótów, ustawiając szerokość i wartości kolorów.
• "-Webkit-Text-Stroke szerokość”Określa szerokość udaru.
• "-kolor Webkit-Tekst-Stroke”Stosuje kolor do udaru.
• "-Webkit-Text-Fill Color”Dodaje kolor do tekstu.

Właściwość skoku tekstowego musi być określona za pomocą „Webkit-" prefiks. Jest to obsługiwane tylko przez przeglądarki oparte na Webkit, takie jak „Opera”,„Safari”,„Chrom", I "Android". Alternatywnie „„cień tekstu„Własność jest kompatybilna z prawie wszystkimi przeglądarkami.

Aby uzyskać lepsze zrozumienie, sprawdź poniższe przykłady.

Przykład 1

Utwórz plik HTML, postępując zgodnie z instrukcjami:

• Najpierw dodaj „”Element i przypisz go„treść" klasa.
• Wewnątrz „” dodaj „

  „Element z identyfikatorem”tekst„Aby określić tekst do dokumentu. Ten "tekst„Identyfikator zostanie zastosowany z właściwościami CSS, aby dodać efekt konturu:

CSS- Efekt zarysowy do tekstu

Teraz przejdź do sekcji CSS, aby zastosować efekty zarysowe do tekstu.

Stylowa klasa „treści”

.treść
szerokość: 500px;
Margines: Auto;

„„.treść”Jest wykorzystywany do dostępu do„„Element mający klasę”treść". Zastosowane są do niego następujące właściwości:

• "szerokość„Właściwość ustawia szerokość elementu.
• "margines”Określa przestrzeń wokół elementu.

Style „P”

Teraz uzyskaj dostęp do „P„Element według id”tekst”I zastosuj następujące właściwości:

#Text
kolor biały;
-WebKit-Tekst-Stroke: 1px White;
Tekst-shadow: 0px 1px 4px #46256d;
Rozmiar czcionki: 45px;

Tutaj:

• "kolor”Określa kolor czcionki elementu.
• "rozmiar czcionki”Właściwość ustawia rozmiar czcionki elementu.
• "-Webkit-Text-Stroke„Właściwość służy do zastosowania efektu zarysu do tekstu.

Wyjście

Przykład 2

#Text
kolor biały;
Rozmiar czcionki: 42px;
-WebKit-Text-Stroke-Width: 1px;
-Webkit-Tekst-Stroke-Color: Purple;

W drugim przykładzie ustawiliśmy szerokość i kolor konturu tekstu, określając „-Webkit-Text-Stroke szerokość" I "-kolor Webkit-Tekst-Stroke" nieruchomości.

Wyjście

Przykład 3

#Text
FONT-FAMILY: Kursywna;
kolor biały;
Rozmiar czcionki: 35px;
-WebKit-Text-Stroke Width: 2px;
-Webkit-Tekst-Stroke-Color: Black;

W tym przykładzie „rodzina czcionek„Właściwość określa styl tekstu elementu.

Wyjście

Jak dodać efekt konturu do tekstu za pomocą właściwości „Tekst-shadow”?

CSS „cień tekstu„Właściwość jest wykorzystywana do dodania efektu cienia do tekstu i jest obsługiwana przez wszystkie przeglądarki.

Oto graficzna reprezentacja dodawania wielu cieni do tekstu:

Przykład 1

#Text
kolor biały;
Rozmiar czcionki: 40px;
Tekst -shadow: -1px 1px 2px #253f11, 1px 1px 2px #253f11, 1px -1px 0 #253f11,
-1px -1px 0 #253f11;

Opis dodanych właściwości jest zilustrowany powyżej.

Wyjście

Przykład 2

#Text
kolor biały;
Rozmiar czcionki: 48px;
-WebKit-Text-Stroke: 1px #F0ECEC;
Tekst-shadow: 0px 1px 5px RGB (0, 0, 175);

W wyżej wymieniony kod zastosowaliśmy zarówno „cień tekstu" I "-Webkit-Text-Stroke”Właściwości CSS.

Wyjście

Dostarliśmy różne przykłady, aby zastosować efekt zarysu do tekstu.

Wniosek

Aby dodać efekt konturu do tekstu, CSS „Składka tekstowa„Własność można wykorzystać. Ta właściwość obejmuje „szerokość tekstu”,„kolor tekstu", I "kolorowa kolor". Kolejną właściwością dodającą efekty zarysowe do tekstu w CSS jest „cień tekstu". Ten blog wyjaśnił, jak dodać efekt konturu do tekstu z wieloma przykładami.