Kurs języka HTML i CSS

Poradnik webmastera

  • Zwiększ rozmiar czcionki
  • Domyślny  rozmiar czcionki
  • Zmniejsz rozmiar czcionki

Cieniowanie tekstu

Email Drukuj PDF

Pomimo że trzecia specyfikacja kaskadowych arkuszy stylów to ciągle wersja robocza, możemy w niej znaleźć wiele nowych stylów i właściwości, dzięki którym formatowanie tworzonej strony jest jeszcze wygodniejsze. W dalszej części niniejszego podrozdziału opisałem wybrane nowe style, które działają w nowych wersjach przeglądarek dostępnych na rynku w chwili, gdy opracowywałem niniejszą część kursu CSS.

Cieniowanie tekstu

text-shadow

Dostępne wartości:

none | długość | kolor | inherit

Wartość domyślna:

none

Przykład:

p {text-shadow: 2px 2px 5px red;}

Dziedziczenie:

Nie

Obsługa:

Opera, Mozilla Firefox, Safari, Chrome

Jeżeli zajdzie taka potrzeba, to stosując styl text-shadow, możemy przypisać efektowny cień do formatowanego tekstu. Przykładowy arkusz stylów dodający cień do nagłówka stopnia pierwszego może mieć postać zgodną z poniższym wzorem.

H1

{

text-shadow: 2px 2px 5px red;

font-size:40pt;

}

Pierwsza z wartości występujących bezpośrednio po znaku dwukropka odpowiada za przesunięcie cienia w prawą stronę, a druga wartość reguluje przesunięcie cienia w dół. Użycie ujemnych wartości spowoduje przesunięcie cienia w lewą stronę i do góry.

Trzeci z parametrów określa stopień rozmycia cienia — im większa wartość, tym rozmycie będzie większe. Jeżeli nie określimy trzeciego parametru, to wtedy uzyskany cień będzie idealnie ostry i wyraźny.

Ostatnim elementem całej układanki jest definicja koloru formatowanego cienia.

Dostępny poniżej przykład działa poprawnie w nowych wersjach przeglądarek Mozilla Firefox, Chrome, Opera i Safari. Natomiast użytkownicy Internet Explorera muszą się zadowolić rysunkiem 15.13.

<<przykład>>

<div class="przyklad">

<h1 style="text-shadow: 2px 2px 5px red; font-size:40pt;">Lorem ipsum dolor sit amet</h1>

</div>

<</przykład>>

Rysunek 15.13. Przykład działania stylu text-shadow

 

CSS. Tworzenie nowoczesnych stron WWW.

CSS3. Tworzenie nowoczesnych stron WWW
(czerwiec 2012)

HTML5 i CSS3. Standardy przyszłości

HTML5 i CSS3
Standardy przyszłości

CSS3. Szybki start. Wydanie V

CSS3. Szybki start.
Wydanie V

Nowości Helionu

Statystyki

Użytkowników : 766
Artykułów : 513
Zakładki : 28
Odsłon : 15571899