cienie tekstowe, zamazane cienie, etc

TłUMACZENIA ANGIELSKI METODYKA JĘZYKOZNAWSTWO SŁOWNIK KONTAKT

 

Dokument ten jest tłumaczeniem, które może zawierać błędy.

Zostało ono wykonane przez Angielski ELTT. Oryginalna wersja dokumentu en

Zobacz inne strony

Arkusze CSS - rady i triki

(This page uses CSS style sheets)

Cienie tekstowe

Zamazane cienie tekstowe

Czytelny biały tekst

Multicienie

Kontury

Neony

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:

The noak and the barcicle

(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}

“What do you say?” said the UK

In order to see more clearly

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}

Bez cienia :

What is in it for me?

Z cieniem :

With a shovel and some oranges

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}

I wish wish wish…

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}

I, Augustus (you know who)

That's extra, of course

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}

Are you feeling red?

A cat, an apple, etcetera

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}

With a zest of best

There's no no like a better no

Indeed, quite right, Mr M

CSS Valid CSS!Valid HTML 4.0!

Bert Bos
created 4 Aug 2005;
last updated $Date: 2005/08/04 18:41:37 $ GMT

firefox download Mapa