W drugiej części poradnika, w którym opisuję nowości, wchodzące w skład CSS3, omówię cienie tekstu. Jest to bardziej efektowny, niż efektywny, dodatek, pozwalający wyrazić głębię i unowocześnić wygląd typografii na naszej witrynie. Większość z obecnie nowych przeglądarek obsługuje już, zatwierdzoną przez konsorcjum W3C, składnię w postaci text-shadow: parametry; Jeżeli natomiast przeglądarka nie obsługuje owego ulepszenia, cień po prostu nie zostanie wyświetlony.
Do utworzenia cienia tekstu potrzebne nam będą 4 parametry: kolor cienia, przesunięcie w pionie (wartość dodatnia – w górę, wartość ujemna – w dół), przesunięcie w poziomie (wartość dodatnia – w prawo, wartość ujemna – w lewo), poziom rozmazania.
Aby zastosować to w praktyce, przypisz swoim arkuszu CSS, do wybranego elementu, następującą własność.
1 2 3 | h2 { text-shadow: rgba(0,255,255,0.5) 3px 2px 4px; } |
Kilka przydatnych uwag
- Cień tekstu można zastosować, jak mówi nazwa, tylko dla elementów tekstowych
- Cień nie ma wpływu na położenie tekstu
- Można go pokolorować na dowolny kolor
- Co definiowania koloru najlepiej jest użyć notacji RGBA – dzięki kanałowi alfa, wszystko co znajdzie się pod cieniem, będzie przezroczyste
- Aby anulować zdefiniowany cień, należy użyć standardowej własności none
