niedziela, 27 kwietnia 2014

TUTORIAL: Cień tekstu


Witam serdecznie w kolejnym tutorialu.
Dzisiaj zapoznam Was z kodem CSS, który urozmaici i doda charakteru zwykłemu tekstowi.
Zaczynamy!


cień
Aby dodać swojemu tekstowi bardziej przestrzennego widoku warto użyć kodu:

text-shadow: 1px 2px 0.5px #333

Cieniowany tekst



poświata
Zmieniając niektóre wartości możemy uzyskać efekt poświaty. (najbardziej widoczny na ciemnym tle)

text-shadow: 0px 0px 4px #333

    Tekst z poświatą  



efekt 3D
Możemy również uzyskać efekt trójwymiarowego tekstu używając kodu: (najbardziej efektowne w przypadku, gdy kolor tekstu i tła jest taki sam)

text-shadow: -1px -1px white, 1px 1px #333

  Efekt wypukły  


text-shadow: 1px 1px white, -1px -1px #444

  Efekt wklęsły  



kontur

text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black

  Obrysowany tekst  


instalowanie kodu
 Udajemy się do zakładki Szablon > Dostosuj > Zaawansowane > Dodaj arkusz CSSi tutaj w białe pole wklejamy wzory.
Każdy element w szablonie posiada inną nazwę:
Tytuł posta
h3 { ;}
Tytuły gadżetów
h2 { ;}
Data posta
.date-header { ;}

Czyli np. chciałabym aby mój tytuł posta miał cień, więc w okno arkuszy CSS dodaję następujący kod:
h3 {text-shadow: 1px 2px 0.5px #333;}

Mam nadzieję że pomogłam. ;)

Brak komentarzy:

Prześlij komentarz