Cienie tekstu w CSS3


27 grudnia 2011 / Michał Kortas


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ść.

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


Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *