Języki

Niniejszy dokument jest tłumaczeniem, które może zawierać błędy, lub który mógł się zdeaktualizować w stosunku do wersji angielskiej. Wykonane przez: Emil Sierżęga

Web Style Sheets CSS tips & tricks

Zobacz także indeks wszystkich porad.

Na tej stronie:

Cieniowanie tekstu

CSS3 posiada właściwość zwaną text-shadow, dzięki której jesteśmy w stanie dodać cień do każdej litery tekstu. W najprostszej formie wygląda to tak: 

h3 {text-shadow: 0.1em 0.1em #333}

Dodajemy ciemnoszary cień (#333), trochę z prawej (0.1em) i lekko u dołu (0.1em), biorąc za punkt odniesienia normalną pozycję tekstu. Rezultat widać poniżej:

Treść bez treści się tu mieści

Rozmyte cieniowanie

Najprostsza postać text-shadow składa się z dwóch części: koloru (jak #333 we wcześniejszym przykładzie) oraz offsetu (czyli 0.1em 0.1em również z przykładu). Rezultatem tego jest ostry cień ze wskazanym offsetem. Ale offset ten można łatwo rozmyć, tworząc mniej lub bardziej niewyraźny cień.

Poziom rozmycia podawany jest jako osobny offset. Poniżej znajdują się dwie linie tekstu. Jedna z niewielkim rozmyciem (0.05em), a druga z czterokrotnie większym (0.2em): 

h3.a {text-shadow: 0.1em 0.1em 0.05em #333}
h3.b {text-shadow: 0.1em 0.1em 0.2em black}

“Co waść prawisz?”– czasem mówił ładnie

Musisz przyjrzeć się dokładnie

Czytelny biały tekst

Cienie mogą sprawić, że tekst jest bardziej czytelny, jeśli różnica między tłem, a kolorem czcionki jest niewielka. Przykład znajdziesz poniżej. Biały tekst na jasnoniebieskim tle, najpierw bez, a później z cieniem: 

h3 {color: white}
h3.a {color: white; text-shadow: black 0.1em 0.1em 0.2em}

Bez cieniowania:

Co tutaj jest dla mnie?

Z cieniowaniem:

Kilka pomarańczy do wykopania

Multicienie

Możesz dodawać więcej niż jeden cień. Jednak rezultat często wygląda dość dziwnie: 

h3 {text-shadow: 0.2em 0.5em 0.1em #600,
      -0.3em 0.1em 0.1em #060,
      0.4em -0.3em 0.1em #006}

Chciałbym, chciałbym, chciałbym…

Multicienie mogą być użyteczny, jeśli dodajemy do siebie dwa dobrze dobrane jasne i ciemne cienie: 

h3.a {text-shadow: -1px -1px white, 1px 1px #333}
h3.b {text-shadow: 1px 1px white, -1px -1px #444}

Ja, robot (wiesz który)

To ekstra, rzecz jasna

Taki efekt może być niebezpieczny, jeśli Twoja przeglądarka nie potrafi poprawnie wyświetlać text-shadow. W zasadzie, kolor tła i kolor tekstu są w tym przykładzie prawie takie same (#CCCCCC i #D1D1D1), więc bez cieniowania napis jest prawie niewidoczny.

Rysowanie liter jako kontury

Poprzedni przykład można rozwinąć nakładając na tekst nie dwa, a cztery cienie. Stworzymy wtedy kontur wokół liter: 

h3 {text-shadow: -1px 0 black, 0 1px black,
      1px 0 black, 0 -1px black}

Czy czujesz się czerwony?

kot, jabłko, itepe

To nie jest perfekcyjny kontur. W chwili pisania tych słów (sierpień 2005), a nawet w chwili pisania ich tłumaczenia (lipiec 2015), wciąż otwarta jest dyskusja czy CSS powinien stworzyć osobną własność, albo może dodatkową wartość dla text-decoration, w celu wyświetlania lepszych konturów.

W blasku neonów

Jeśli nałożysz rozmyte cieniowanie zaraz za tekstem, np. dodając zerowy offset, to wokół liter wytworzysz świecącą poświatę. Jeśli pojedynczy cień nie daje wystarczającego efektu wystarczy go powtórzyć kilka razy: 

h3.a {text-shadow: 0 0 0.2em #8F7}
h3.b {text-shadow: 0 0 0.2em #F87, 0 0 0.2em #F87}
h3.c {text-shadow: 0 0 0.2em #87F, 0 0 0.2em #87F,
        0 0 0.2em #87F}

Banan w cieście

Nie nie nie ma lepszego nie

W rzeczy samej, całkiem prawda, Panie M

Bert Bos, Prowadzący dział CSS
Prawa autorskie © 1994–2021 W3C® Privacy policy

Utworzono 4 Sie 2005;
Ostatnia aktualizacja śro, 6 sty 2021, 05:40:49

Języki

O tłumaczeniach