HTML5 & CSS3

Cienie tekstu w CSS3

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

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

Brak komentarzy

Napisz komentarz jako pierwszy!

Zostaw odpowiedź