7.1 Właściwość text-decoration
CSS oferuje różne właściwości do stylizacji i dekoracji tekstu na stronach internetowych. Właściwości text-decoration, text-transform i text-shadow pozwalają dodawać podkreślenia, zmieniać wielkość liter i tworzyć cienie, co pomaga uczynić tekst bardziej wyrazistym i atrakcyjnym.
Właściwość text-decoration zarządza efektami dekoracyjnymi tekstu, takimi jak podkreślenie, nadkreślenie i przekreślenie. Pozwala także ustawić kolor i styl linii używanych do dekoracji tekstu.
Wartości:
none: usuwa wszystkie dekoracje tekstoweunderline: podkreśla tekstoverline: dodaje linię nad tekstemline-through: dodaje linię przez tekst (przekreślenie)blink: tekst miga (nie wspierane przez wszystkie przeglądarki)text-decoration-color: ustawia kolor linii dekoracjitext-decoration-style: ustawia styl linii (solid, double, dotted, dashed, wavy)text-decoration-thickness: ustawia grubość linii dekoracji
Przykład użycia:
.underline {
text-decoration: underline;
}
.overline {
text-decoration: overline;
}
.line-through {
text-decoration: line-through;
}
.custom-decoration {
text-decoration: underline wavy red;
}
<body>
<p class="underline">Ten tekst jest podkreślony.</p>
<p class="overline">Ten tekst jest nadkreślony.</p>
<p class="line-through">Ten tekst jest przekreślony.</p>
<p class="custom-decoration">Ten tekst jest podkreślony falistą czerwoną linią.</p>
</body>
7.2 Właściwość text-transform
Właściwość text-transform zarządza przekształceniem tekstu, zmieniając wielkość liter. Jest to przydatne do automatycznej zmiany tekstu na tytuły, małe litery itp.
Wartości:
none: brak przekształceń (wartość domyślna)capitalize: pierwsza litera każdego słowa staje się wielkąuppercase: wszystkie litery stają się wielkielowercase: wszystkie litery stają się małefull-width: przekształca tekst na pełną (podwójną) szerokość (nie wspierane przez wszystkie przeglądarki)
Przykład użycia:
.capitalize {
text-transform: capitalize;
}
.uppercase {
text-transform: uppercase;
}
.lowercase {
text-transform: lowercase;
}
<body>
<p class="capitalize">ten tekst będzie zaczynał się wielką literą dla każdego słowa.</p>
<p class="uppercase">ten tekst będzie całkowicie wielkimi literami.</p>
<p class="lowercase">TEN TEKST BĘDZIE CAŁKOWICIE MAŁYMI LITERAMI.</p>
</body>
7.3 Właściwość text-shadow
Właściwość text-shadow dodaje cień do tekstu, co pozwala stworzyć efekty wizualne i poprawić czytelność tekstu na stronie internetowej.
Wartości:
<offset-x>: przesunięcie cienia po osi X (horyzontalnie)<offset-y>: przesunięcie cienia po osi Y (wertykalnie)<blur-radius>: promień rozmycia cienia (opcjonalnie)<color>: kolor cienia (opcjonalnie)
Przykład użycia:
.text-shadow {
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
.multiple-shadows {
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5), -2px -2px 4px rgba(255, 255, 255, 0.5);
}
<body>
<p class="text-shadow">Ten tekst ma cień.</p>
<p class="multiple-shadows">Ten tekst ma wiele cieni.</p>
</body>
Wyjaśnienie kodu:
text-shadow: 2px 3px 4px rgba(0, 0, 0, 0.5);: dodaje cień z przesunięciem horyzontalnym 2px, przesunięciem wertykalnym 3px, promieniem rozmycia 4px i półprzezroczystym czarnym koloremtext-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5), -2px -2px 4px rgba(255, 255, 255, 0.5);: dodaje dwa cienie z różnymi parametrami, tworząc bardziej skomplikowany efekt wizualny
GO TO FULL VERSION