Arkusze CSS - rady i triki

cienie tekstowe

CSS poziom  3 posiada właściwość zwaną 'text-shadow' do dodawania cieni do każdej litery tekstu. W najprostszej formie wygląda to w ten sposób:

h3 {text-shadow: 0.1em 0.1em #333}

Dodaje to ciemno-szary cień (#333) po prawej stronie (0.1em) i na dole(0.1em). Rezultatem jest:

(Od sierpnia 2005 nie wszystkie przeglądarki obsługują jeszcze 'text-shadow'. Powyższy przykład powinien działać w Safari i Konqueror.)

nieostre cienie tekstowe

Najprostrza forma właściwości 'text-shadow' ma dwie części: kolor (tak jak w powyższym przykładzie - #333) i offset (0.1em 0.1em jak wyżej). Rezultatem tego jest ostry cień. Ale offset może być zamazany.

Zamazanie takie jest ustawiane jako jeszcze jeden offset. Oto dwie linie, jedna z malą nieostrością (0.05em) a jedna z dużą (0.2em):

h3.a {text-shadow: 0.1em 0.1em 0.05em #333}
h3.b {text-shadow: 0.1em 0.1em 0.2em black}

Czytelny biały tekst

Cienie mogą ułatwić czytelność tekstu jeśli kontrast omiędzy pierwszym planem a łem nie jest zbyt duży. Oto przykład bialego tekstu na bladym niebieskim tle bez cienia i z cieniem:

h3 {color: white}
h3.a {color: white; text-shadow: black 0.1em 0.1em 0.2em}

Multicienie

Można zastosować więcej niż jeden cień. Generalnie ale wygłąda to dziwnie:

h3 {text-shadow: 0.2em 0.5em 0.1em #600,
      -0.3em 0.1em 0.1em #060,
      0.4em -0.3em 0.1em #006}

Z dobrze umieszonym ciemnym i jasnym cieniem, efekt może być całkiem przydatny:

h3.a {text-shadow: -1px -1px white, 1px 1px #333}
h3.b {text-shadow: 1px 1px white, -1px -1px #333}

Jest to trochę niebezpieczne jeśli pzreglądarka nie obsługuje 'text-shadow'. Kolory tła i tekstu w tym przykładzie są prawie takie same (#CCCCCC and #D1D1D1), więc bez cienia nie ma tutaj prawie żadnego kontrastu.

rysowanie liter jako zarysÓw

Dwu-cieniowy przykład z poprzedniej sekcji można wziąść trochę dalej. Z czterema cieniami literą można nadać zarys:

h3 {text-shadow: -1px 0 black, 0 1px black,
      1px 0 black, 0 -1px black}

Nie jest to perfekcyjny zarys i obecnie (sierpień 2005) dyskusja jest nadal otwarta czy CSS powinny mieć oddzielną właściwość (czy wartość dla 'text-decoration') do tworzenia zarysów.

Neony

Jeśli umieści się cień za tekstem np: z zerowym offsetem efektem jest poświata wokół liter. Jeśli poświata z pojedynczego cienia nie jest wystarczając intensywna, można powtórzyć ten sam cień kilkakrotnie:

h3.a {text-shadow: 0 0 0.2em #8F7}
h3.b {text-shadow: 0 0 0.2em #F87, 0 0 0.2em #F87}
h3.c {text-shadow: 0 0 0.2em #87F, 0 0 0.2em #87F,
        0 0 0.2em #87F}