Efecte text-shadow

Utilizare de baz
Text-shadow este o proprietate care se de care funcioneaz n majoritatea navigatoarelor, cu excepia notabil a IE. n IE, pentru versiunile anterioare IE9, text-shadow poate fi emulat cu proprietatea filter. Sintaxa comenzii: text-shadow: poziie-orizontal poziie-vertical neclaritate culoare; Utilizarea text-shadow implic manipularea a trei tipuri de parametri: Coordonatele umbrei, n raport cu textul. Dac poziia n plan orizontal i cea n plan vertical au ambele valoarea 0, atunci umbra se suprapune cu textul. Neclaritatea umbrei ( blur ). Stabilete ct de ntins este umbra. Culoarea. Dac se folosete modelul rgba de reprezentare a culorilor n CSS, poate fi definit att culoarea, ct i transparena acesteia. Acest efect poate fi folosit, n cea mai simpl form, doar cu valorile de poziionare, singurele obligatorii: text-shadow: 2px 2px;

Umbra de perspectiv poate fi evideniat mai bine prin folosirea unei valori pentru neclaritatea umbrei i o culoare uor mai deschis fa de cea a textului: text-shadow: 2px 2px 3px #333

Urmtoarea umbr este poziionat 2 pixeli la dreapta, 4 pixeli n jos, cu o neclaritate de trei pixeli. n comparaie cu exemplul anterior, n afar de nuana culorii specificm i opacitatea sa ( de 30%): text-shadow: 2px 4px 3px rgba(0,0,0,0.3);

Pentru a obine o umbr simpl n IE, vom folosi proprietatea filter: zoom: 1; filter: progid:DXImageTransform.Microsoft.Dropshadow(OffX=3, OffY=3, Color=#333) Proprietatea zoom este necesar pentru a fora IE s recunoasc layout-ul obiectului.

Umbr De Perspectiv Umbr n Stil Apple

O umbr simpl i elegant, care ilustreaz simplitatea CSS3: background: #666; color: #000; text-shadow: 0 1px 1px #fff;

Umbr Solid
Pentru a crea un efect retro, vom folosi valoarea 0 pentru neclaritate. Acest lucru va conferi umbrei un aspect de dur i de vechi n acelai timp: text-shadow: 6px 6px 0px rgba(0,0,0,0.2);

Umbr Dubl
Pot fi folosite mai multe umbre. Secretul const n separarea umbrelor cu o virgul: text-shadow: umbra1, umbra2, umbra3 Posibilitatea folosirii mai multor umbre poate fi folosit pentru a crea un text care imit titlurile din ziarele vechi. Vor fi folosite dou umbre, prima avnd aceeai culoare cu a fundalului:
text-shadow: 4px 3px 0px #fff, 9px 8px 0px rgba(0,0,0,0.15);

Inscripie ntunecat
Pentru a crea iluzia unui text gravat, vor fi parcuri urmtorii pai: culoarea textului va avea o nuan uor mai ntunecat dect cea a fundalului. efectul de umbr va fi unul uor (1px pentru poziionare orizontal/vertical, 1px pentru neclaritate), cu o opacitate de 10%. background: #333; color: #222; font: 80px Impact; text-shadow: 0 1px 1px #4d4d4d;

Efecte 3D Efect 3D Elementar

color:rgba(255,255,0,.7) ; font-weight: bold; text-shadow: 1px 1px rgba(255,128,0,.7), 2px 2px rgba(255,128,0,.7), 3px 3px rgba(255,128,0,.7), 4px 4px rgba(255,128,0,.7), 5px 5px rgba(255,128,0,.7);

Umbr Distanat n Jos

Sunt aplicate patru umbre, aflate pe aceeai poziie orizontal cu literele ( 0px ), dar cu grade tot mai mari de deplasare pe vertical:
text-shadow: 0px 0px 0px 0px 3px 0px #b2a98f, 14px 10px rgba(0,0,0,0.15), 24px 2px rgba(0,0,0,0.1), 34px 30px rgba(0,0,0,0.1);

Umbr Apropiat
Acest exemplu respect aceeai idee, dar umbrele sunt mai apropiate fa de text:
text-shadow: 0px 4px 3px rgba(0,0,0,0.4), 0px 8px 13px rgba(0,0,0,0.1), 0px 18px 23px rgba(0,0,0,0.1);

Proximitatea umbrelor fa de text creeaz iluzia de greutate a acestuia.

Textul 3D Elaborat De Mark Dotto

text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);

Textul 3D Elaborat De Gordon Hall

background-color: #666666; -webkit-background-clip: text; -moz-background-clip: text; background-clip: text; color: transparent; text-shadow: rgba(255,255,255,0.5) 0px 3px 3px;

Umbre Strlucitoare
Pentru a implementa acest efect, valorile pentru poziia orizontal i cea vertical a umbrei trebuie s fie egale cu zero, pentru a crea impresia de lumin care radiaz din text:
text-shadow: 0px 0px 6px yellow;

Dac dorim ca efectul de strlucire s fie mai puternic, vom folosi o valoare mai mare pentru neclaritate: color:white; text-shadow:0 0 30px yellow , 0 0 70px yellow ; n plus, folosim o doua umbr, cu o raz mai mare a neclaritii, pentru a obine un efect mai puternic de strlucire.

Supererou
text-shadow: -10px 10px 0px #00e6e6, -20px 20px 0px #01cccc, -30px 30px 0px #00bdbd;

Surse Multiple De Lumin

text-shadow: 0px 15px 5px rgba(0,0,0,0.1), 10px 20px 5px rgba(0,0,0,0.05), -10px 20px 5px rgba(0,0,0,0.05);

Reliefare
Reliefare Uoar
color: rgba(0,0,0,0.6); text-shadow: 2px 8px 6px rgba(0,0,0,0.2), 0px -5px 35px rgba(255,255,255,0.3);

Reliefare n Stil Photoshop

Se folosesc dou umbre: background:#ccc ; color:#ccc; text-shadow: -1px -1px white, 1px 1px #333; Prima umbr adaug un contur alb laturilor din stnga i de sus ale literelor, iar a doua umbr adaug un contur negru laturilor din dreapta i de jos:

Text Neclar
Acest truc aparine lui simurai. Prin folosirea valorii transparent pentru proprietatea color, vom vedea doar umbra textului: color: transparent; text-shadow: 0 0 10px #fff

Text Conturat
Valorile negative contureaz partea din stnga sus a literei, iar cele pozitive, din dreapta jos. text-shadow: -2px -2px 0 blue, 2px 2px 0 blue;