Árnyék a szövegeken

Ha láttad a CSS 3-ról szóló beharangozó cikket akkor tudod hogy mit fogsz ebben a cikkben találni, ha nem akkor megmutatom:



Ilyen árnyékolt szöveget készíthetsz

A cikk folytatásában >>


A kód mindösszesen ennyi:

text-shadow: 0px 0px 3px #000000; /* CSS by srmark */


Lássuk hozzá a magyarázatot:
Kék rész: Az árnyék pozíciója vízszintesen, ennyi pixellel tolja el az árnyékot a szöveghez képest, ha jobbra akarod tolni akkor növeld a számot, ha csökkenteni akarod akkor negatív számot írj:


text-shadow: -10px 0px 3px #DD3333;
text-shadow: 0px 0px 3px #DD3333;
text-shadow: 10px 0px 3px #DD3333;
Zöld rész: ugyanaz mint a kék, csak itt a függőleges pozíciót határozza meg:



text-shadow: 0px -10px 3px #DD3333;

text-shadow: 0px 0px 3px #DD3333;

text-shadow: 0px 10px 3px #DD3333;



Narancssárga rész: meghatározza az árnyék méretét, ha 0px-t írsz akkor nem mosódik el hanem kétszer látszik a szöveg egymás mögött, ha valamekkora mértékű eltolás is van rajta, példák:


text-shadow: 2px 2px 0px #DD3333;

text-shadow: 5px 5px 0px #DD3333;

text-shadow: 0px 0px 3px #DD3333;

text-shadow: 0px 0px 6px #DD3333;

text-shadow: 0px 0px 15px #DD3333;



Piros rész: ez a rész pedig az árnyék színét állítja be, erre külön példát nem mutatok mert ezt mindenki érti.


Lehetőség van árnyékok halmozására is, tehát egy szövegre több réteg árnyékot tenni, pl ahogy a focistáknak is a kivilágított stadionba, a szövegünknek is lehet akár 4 árnyékra is egyszerre, de ne essünk túlzásba mert a túl sok árnyék nem mindig mutat jól, és ha túl sok van belőle az oldal lassúvá válhat, az árnyékok halmozását egy vesszővel elválasztva lehet megoldani így:

text-shadow: -10px -10px 0px #DD3333, 10px 10px 0px #DD3333;

Ezzel a halmozással el lehet érni hogy erőteljesebb, vastagabb legyen az árnyék, ha 3-4 réteget ráteszünk egy szövegre:



text-shadow: 0px 0px 3px #000000, 2px 2px 5px #000000, 4px 4px 5px #000000, 6px 6px 8px #000000;/* CSS by srmark */

Ezt csak ritkán használjuk mert az oldalt lassíthatja.

Ennyit a kód elméleti működéséről, ha itt a hotdogon akarod használni a kódot, megteheted akárhol, profilon, magazinban, stb.. ahogy a többi css-t, de egyelőre ezt a kódot csak a Firefox 3.5 vagy annál újabb (3.6), és a legújabb Safari és Chrome böngészők támogatják.

Akik nem tudják hogyan lehet ezt beépíteni a hotdogos oldalaikra azoknak itt van néhány példa:


Ez a kód a profilodon lévő dobozok fejlécében lévő szövegekre tesz árnyékot:
table div.head {text-shadow: 2px 2px 3px #FF0000, 2px 2px 5px #FF0000;}


Ez a kód minden oldalon a fenti fejlécen lévő menüre tesz árnyékot, magazinban és profilon is egyaránt ha még az eredeti fejléc van:
div.head div.menu {text-shadow: 2px 2px 5px #FF0000;}



Ez pedig a magazinokban lévő dobozok fejlécében lévő szövegekre tesz árnyékot:
table.standard_box td.box_header_txt2, table.standard_box td.box_header_txt {text-shadow:0 0 8px #FFFFFF, 0 0 10px #FFFFFF;}

Beillesztő kódot minden helyen tegyél hozzá!

Ez csak néhány példa volt, természetesen szinte akármire lehet tenni szöveg árnyékot ahol szöveg van (képeken levő szövegre nem mert az a képben van benne), szelektorokat találsz ezekben a cikkekben, és a CSS magazinon belül akárhol: