12 opțiuni de umbră interesante pentru textul folosind css proprietate text-shadow

Tipografie - aceasta este una dintre cele mai populare instrumente în web design. Și cel mai bun dintre toate, este faptul chtoCSSdaet ne-o oportunitate de a „juca“ cu textul, mai ales umbra lui. Și la prima vedere, poate părea un element simplu, dar în legătură cu imaginea generală ia într-adevăr un efect frumos aspect.

Încercăm să ia în considerare mai multe opțiuni pentru umbre cu proprietatea text-shadow pentru text. Toate acestea pot fi copiate și lipite în munca ta.

umbra de bază.

Sintaxa pentru a crea o nuanță simplă este prezentată mai jos. Ai patru variabile pentru a lucra, primele două stabilit poziția de umbra ta, în al treilea - stabilit gradul de estompare, iar al patrulea - culoarea umbrei.

text-shadow: vertical de offset de culoare estompare orizontale de compensare;

Acum, în practică, umbra a fost coborâtă la 2 pixeli este deplasat spre dreapta cu 4 pixeli cu estompare 4 pixel negru, cu o transparență de 30%

text-shadow: 2px 4px 3px RGBA (0,0,0,0.3);

Rezultatul este un simplu, dar în același timp, umbra foarte atractiv.

Puteți folosi ceva care sa folosit si ca mai mult ca ea. Dar ni se pare, RGBA vă permite să adăugați o altă variabilă la proprietate. Prin urmare, este posibil să se stabilească nu numai culoarea umbrei, dar, de asemenea, transparența sa, fără a crește codul.

Iluzia dent text.

Cea mai mare lucru despre lucrul cu text-shadow este că vă oferă mai multe opțiuni decât umbra proprietății. De exemplu, crearea de text iluzia dent.

În primul rând trebuie să setați culoarea textului să fie mai întunecat decât fundalul principal. Apoi se aplică text-umbră. Definim de culoare albă, cu transparență minimă.

text-shadow: 2px 2px 3px RGBA (255,255,255,0.1);

După cum puteți vedea, am cerut principal culoarea de fundal la # 222, iar textul - negru, cu o transparență de 60%. Și umbra noastră alb a fost situat puțin mai jos și la dreapta textul principal.

umbra dură.

Amintiți-vă că nu este necesar să se spele umbra. Simțiți-vă liber pentru a experimenta, de exemplu, cu texte retro dure.

text-shadow: 6px 6px 0px RGBA (0,0,0,0.2);

Dublă umbră.

O adevărată plăcere de a fi câștigat de la știind că nu sunteți limitat la o umbră. Cu text-shadow pot fi separate prin virgule pentru a seta o nouă nuanță.

Uită-te la sintaxa de bază și să rețineți că umbrele sunt separate prin virgulă, iar la sfârșitul virgulă obișnuit.

text-shadow: shadow1, shadow2, shadow3;

De exemplu, este posibil să se facă acest lucru, așa cum se arată în figură, având textul Vintage pentru ziar.

Scoateți partea de jos și de a crește distanța.

Odată ce începe experimentarea cu text-umbră, rezultatele de fiecare dată din ce în ce mai mult și mai impresionant. Puteți încerca chiar și pentru a crea texte 3D.

Text-umbra: 0px 3px 0px # b2a98f,

Subliniind importanța.

Și un alt exemplu de mai multe umbre într-o singură proprietate. Dar, de data aceasta, ele sunt mai mici și sunt mai aproape de textul principal. Toate acestea creează efectul unui test de semnificație.

text-shadow: 0px 4px 3px RGBA (0,0,0,0.4),

Privind prin ceea ce este oferit de alți designeri de a utiliza umbrele, două metode au fost găsite, care sunt ideale pentru secțiunea de mici „Asistent“.

Aici, pentru a obține rezultatul dorit, folosind 12 umbre separate.

text-shadow: 0 0 1px #ccc,