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 |
