Vlad Merjevici

La un moment dat, a existat o anumită modă pentru textul cu umbră și un efect similar putea fi găsit pe aproape orice site. În editorul grafic, umbra este adăugată simplu, arată grozav, aici este textul cu umbra și împins în paginile web, indiferent de stilul site-ului și de simțul proporției designerului. Când majoritatea browserelor au început să accepte proprietatea stilului text-shadow, moda a trecut deja, iar acum textul cu o umbră este destul de rar. Cu toate acestea, text-shadow are o serie de alte utilizări implicite despre care puțini oameni le cunosc. Cu această proprietate, puteți crea text de contur, îl puteți „strânge”, crea o strălucire, estompare și multe altele.

Folosind text-shadow

Patru parametri sunt scriși ca valori: culoarea umbrei, offset orizontal și vertical și raza de estompare a umbrei (Fig. 1).

Orez. 1. Opțiuni text-umbră

Culoarea poate fi scrisă la începutul sau la sfârșitul tuturor parametrilor în orice format CSS adecvat. Deci puteți face o umbră semi-transparentă prin formatul rgba. Valorile de offset pozitive „aruncă” umbra la dreapta și în jos, iar valorile negative, respectiv, la stânga și în sus. Pentru ca umbra să fie în jurul textului, este suficient să setați valorile offset la zero. Raza de estompare stabilește cât de clară va fi umbra. Cu cât raza de estompare este mai mare, cu atât umbra arată mai moale.

Un mare avantaj al text-shadow este capacitatea de a adăuga mai multe umbre diferite simultan, listând parametrii acestora separați prin virgule. Această caracteristică, practic, vă permite să faceți diferite efecte.

Din păcate, IE înainte de versiunea 10.0 nu acceptă text-shadow , așa că nu vom vedea nimic frumos în acest browser.

Textul contur se caracterizează prin faptul că fiecare literă este înconjurată de o linie a cărei culoare este diferită de culoarea textului (Fig. 2). Acest efect arată cel mai bine cu fonturi mari sans-serif, cum ar fi titlurile. Pentru corpul textului, utilizarea unui contur nu face decât să înrăutățească lizibilitatea.

Orez. 2. Contur textul

Un contur poate fi creat în două moduri. În prima metodă, setăm offset-ul umbrei la zero și o rază mică de estompare, literalmente 1-2 pixeli (exemplul 1). Mărirea valorii de estompare transformă conturul într-o strălucire în jurul textului, care este un efect diferit.

Exemplul 1: Contur text

Contur textul

Conturul realizat prin această metodă este prezentat în Fig. 1. Conturul este ușor neclar, așa că pentru cei care doresc să obțină o linie clară este destinată a doua metodă. Constă în folosirea a patru umbre ascuțite de aceeași culoare, acestea fiind deplasate în unghiuri diferite cu un pixel (exemplul 2).

Exemplul 2: Patru umbre pentru un contur

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

Contur textul

Vederea unui astfel de contur este prezentată în Fig. 3. Se observă că conturul este mai expresiv.

Orez. 3. Contur cu patru umbre

Pentru a adăuga efectul de text 3D prezentat în fig. 4, sunt aplicate simultan mai multe umbre, care sunt deplasate una față de alta cu un pixel pe orizontală și pe verticală.

Orez. 4. Text 3D

Personal, acest tip de text îmi amintește de literele în stil retro și, din nou, este cel mai potrivit pentru titluri, și nu pentru corpul textului unei pagini web.

Numărul de umbre depinde de cât de mult doriți să „împingeți” textul înainte. Un număr mai mare mărește „adâncimea” literelor, unul mai mic, dimpotrivă, scade tridimensionalitatea. Exemplul 3 folosește cinci umbre de aceeași culoare.

Exemplul 3: Shadow pentru a adăuga 3D

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

Frigider cu zece camere

Pentru toate umbrele, setați raza de estompare la zero și aceeași culoare. Umbrele diferă doar în valorile offset.

Gravarea textului

Pentru a crea efectul de reliefare a textului sau, cu alte cuvinte, de relief, culoarea textului trebuie să se potrivească cu culoarea de fundal. O parte a literelor „proeminente” deasupra suprafeței este ca și cum ar fi iluminată, în timp ce cealaltă parte este în umbră (Fig. 5).

Orez. 5. Text în relief

Pentru a adăuga un efect similar, avem nevoie de două umbre - deplasăm umbra albă în sus la stânga cu un pixel, iar umbra gri închis la dreapta (exemplul 4).

Exemplul 4 Text în relief

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

Text în relief

Relieful arată cel mai bine pe un fundal gri, așa că efectul nu este potrivit pentru fiecare schemă de culori a site-ului. Apropo, este ușor să obțineți textul indentat și nu extrudat, doar schimbați culorile umbrei.

Text-umbră: #333 -1px -1px 0, #fff 1px 1px 0;

strălucire

Strălucirea din jurul textului este aceeași umbră, doar că este strălucitoare și contrastantă. Astfel, pentru a crea un efect de strălucire, este suficient să schimbați culoarea umbrei și să setați raza de estompare dorită. Deoarece strălucirea din jurul textului ar trebui să fie uniformă, compensarea umbrei trebuie setată la zero. Pe fig. 6 prezintă un exemplu de strălucire a diferitelor culori.

Orez. 6. Text strălucitor

Exemplul 5 Strălucire

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

Partea luminoasă

Partea întunecată

Estompa

Umbra în sine este neclară, așa că dacă lăsați doar umbra și ascundeți textul în sine, atunci vom obține litere neclare (Fig. 7), iar gradul de estompare poate fi ajustat cu ușurință prin intermediul parametrului text-shadow.

Orez. 7. Text cu estompare

Pentru a ascunde textul original, trebuie doar să setați culoarea la transparent (exemplul 6). Culoarea umbrei devine apoi culoarea textului, iar raza de estompare stabilește gradul de neclaritate al literelor.

Exemplul 6 Încețoșarea textului

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

Text neclar

Umbră și Pseudo-clase

Umbra nu trebuie adăugată direct textului, proprietatea text-shadow se potrivește frumos cu pseudo-clasele :hover și :first-letter. Datorită acestui fapt, cu text se obțin efecte interesante, cum ar fi conturul primei litere a unui paragraf sau strălucirea unui link atunci când treci cu cursorul mouse-ului peste acesta. Exemplul 7 prezintă astfel de tehnici.

Exemplul 7: Utilizarea pseudo-claselor

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

Un proiect de nișă încetinește un canal tradițional, indiferent de costuri. Structura pieței, eliminând detaliile, stabilizează departamentul de marketing și vânzări, folosind experiența campaniilor anterioare. Construirea mărcii îndepărtează în mod spontan PR-ul convergent, recuperând un segment de piață. Investiția sincronizează rolul statutului social, crescând concurența. Brandul dictează în mod natural planul de plasare folosind experiența din campaniile anterioare.

Tipografia este jucăria preferată a designerilor web. CSS are un instrument foarte interesant în compoziția sa - umbra textului(umbră text), care la prima vedere pare destul de simplu, dar poate fi folosit pentru a crea efecte memorabile dacă folosiți ingeniozitatea și imaginația.

Elementele de bază ale umbrelor

Proprietate umbra textului foarte usor de folosit. Este acceptat de toate browserele moderne și chiar și fără utilizarea de prefixe. Dar nu există suport în IE (chiar IE9). Puteți folosi instrumente precum Modernizr pentru a ajuta la scoaterea efectelor CSS3 chiar și în versiunile mai vechi de IE.

Sintaxă

Sintaxa proprietăților este utilizată pentru a crea o umbră de text umbra textului, care este prezentat mai jos. Trebuie definiți patru parametri: primii doi stabilesc poziția umbrei, al treilea setează nivelul de estompare, iar al patrulea determină culoarea umbrei.

Text-shadow: horizontal_offset vertical_offset blur color;

Mai jos este un exemplu de umbră de text care este deplasată cu doi pixeli în jos și patru pixeli la dreapta, estompată cu trei pixeli și neagră la o opacitate de 30%.

Text-umbră: 2px 4px 3px rgba(0,0,0,0.3);

Rezultatul utilizării acestei proprietăți va arăta astfel:

De ce se folosește rgba?

Nu trebuie să utilizați rgba pentru a seta culoarea umbrei atunci când definiți proprietatea. Cu toate acestea, rgba adaugă o altă dimensiune definiției umbrei - nivelul de transparență.

Această metodă este mult mai simplă decât alte metode de determinare a culorii. Nu trebuie să vă concentrați pe definirea nuanței culorii umbrei, care poate fi doar puțin mai închisă sau mai deschisă decât culoarea de fundal. Cu rgba puteți utiliza pur și simplu culorile albe sau negre și să le creșteți opacitatea pentru a obține nuanța de fundal dorită atunci când amestecați culorile.

Folosind proprietatea umbra textului puteți crea diverse efecte pentru text, fără a se limita la simple umbre. De exemplu, aici este codul pentru a crea iluzia de text indentat.

Mai întâi trebuie să setați culoarea textului puțin mai închisă decât culoarea de fundal. Și apoi trebuie să folosiți proprietatea umbra textului cu culoare albă și transparență sporită.

Culoarea de fundal este #222, iar culoarea textului are o opacitate de 60%. Umbra albă este poziționată ușor în jos și la dreapta cu o opacitate de 10%.

Corp ( fundal: #222; ) #text h1 ( culoare: rgba(0,0,0,0.6); text-shadow: 2px 2px 3px rgba(255,255,255,0.1); )

Nu este deloc necesar să estompați umbra. O umbră clară poate merge bine cu designul site-ului.

Text-shadow: 6px 6px 0px rgba(0,0,0,0.2);

Adevărata distracție începe atunci când renunți la limita de a avea o singură umbră. Folosind o virgulă pentru a separa definițiile, puteți folosi câte umbre doriți!

Text-umbră: umbră1, umbră2, umbră3;

Iată un exemplu folosind două umbre. Primul are aceeași culoare ca fundalul.

Text-shadow: 4px 3px 0px #fff, 9px 8px 0px rgba(0,0,0,0.15);

Deplasarea în jos pe o distanță lungă

Odată ce stăpâniți utilizarea mai multor umbre, rezultatul va deveni din ce în ce mai expresiv. Este foarte ușor să creezi un efect 3D pentru text.

Exemplul folosește patru umbre, toate deplasate în jos la distanțe diferite și neclare.

Umbră text: 0px 3px 0px #b2a98f, 0px 14px 10px rgba(0,0,0,0.15), 0px 24px 2px rgba(0,0,0,0.1), 0px 34px 30px rgba(0,0,0,01. );

Schimbați în jos la o distanță mică și neclaritate puternică

Iată o altă implementare a aceleiași idei. Cele trei umbre sunt deplasate la o distanță mai mică și mai neclare.

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);

Text 3D de Mark Dotto

Efectul este folosit pe MarkDotto.com. Folosește 12 umbre diferite pentru a crea un efect 3D grozav.

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);

Text în relief de Gordon Hall

Observați că în exemplul de mai sus am numit tehnica mea efectul de tipar „rapid și murdar”. Asta pentru că există o modalitate mult mai implicată de a crea un text serios, care este mult mai credibil.

Gordon folosește ceva voodoo CSS serios pentru a scoate nu numai o umbră exterioară, ci și o umbră interioară autentică. Consultați postarea lui pe blog pentru o explicație completă a tehnicii.

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

strălucire

Text-shadow: 0px 0px 6px rgba(255,255,255,0.7);

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

Surse multiple de lumină

Text-umbră: 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);

Culoare: 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);

Concluzie

La fel ca majoritatea efectelor CSS, umbrele sunt foarte ușor de implementat. Dar o combinație de acțiuni simple poate duce la efecte uimitoare.

Descriere

Adaugă o umbră textului și setează, de asemenea, parametrii acestuia: culoarea umbrei, offset față de text și raza de estompare. Proprietatea text-shadow poate funcționa împreună cu pseudo-elementele :first-letter și :first-line.

Sintaxă

text-shadow: niciunul | umbra [,umbra]*
unde este umbra
<сдвиг по x> <сдвиг по y> <радиус размытия> <цвет>

Valori

Niciunul Anulează adăugarea unei umbre. culoare Culoarea umbrei în orice format CSS disponibil. În mod implicit, culoarea umbrei este aceeași cu culoarea textului. Parametru opțional. x offset Offset orizontal al umbrei în raport cu textul. O valoare pozitivă a acestui parametru setează deplasarea umbrei la dreapta, o valoare negativă - la stânga. Parametru necesar. offset y Deplasarea verticală a umbrei în raport cu textul. De asemenea, este acceptabil să folosiți o valoare negativă care ridică umbra deasupra textului. Parametru necesar. rază Setează raza estompării umbrei. Cu cât această valoare este mai mare, cu atât umbra este mai netezită, devenind mai largă și mai deschisă. Dacă acest parametru nu este setat, acesta este implicit la 0. Vă rugăm să rețineți că algoritmul de anti-aliasing din browsere este de obicei diferit, astfel încât aspectul umbrei poate diferi ușor în funcție de opțiunile de anti-aliasing setate.

Este permisă specificarea mai multor parametri de umbră, separându-i cu virgulă. CSS3 ia în considerare următoarea ordine: prima umbră din listă este în partea de sus, ultima din listă este în partea de jos. În CSS2, ordinea este inversată, cu prima umbră plasată în partea de jos și ultima în partea de sus.

HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx

Ar trăi citricele în desișurile din sud? Da, dar o copie falsă!

Rezultatul exemplului este prezentat în Fig. unu.

Orez. 1. Vedere umbră în browserul Safari

Browsere

Opera acceptă maximum 6-9 opțiuni de umbră. Mărirea acestei valori, precum și creșterea razei de estompare peste 100 px, afectează performanța browserului. Versiunile Opera 9.5-10 folosesc redarea umbrelor multiple, similar cu CSS2.

Safari înainte de versiunea 4.0 acceptă doar o opțiune umbră, celelalte sunt ignorate. De la versiunea 4.0, o mulțime de umbre funcționează deja.

Internet Explorer a înțeles proprietatea text-shadow doar începând cu versiunea 10.0. În schimb, se folosește proprietatea filtrului: Shadow(opțiuni) . De exemplu, următorul construct specifică culoarea umbrei (#666666), direcția acesteia (45° față de verticală) și cantitatea de offset (4 pixeli).

filtru: Shadow(Color=#666666, Direction=45, Strength=4);

O altă modalitate de a înfrumuseța o pagină web este să faci text cu o umbră în CSS. Cu aplicarea corectă a acestui stil, puteți evidenția cu succes titlul, paragraful, o parte a textului. Puteți ajusta culoarea umbrei, offset-ul și estomparea acesteia.

Puteți seta o umbră de text în CSS utilizând proprietatea text-shadow, care este acceptată de toate browserele, cu excepția Internet Explorer versiunea 9 și anterioară. Există și probleme cu Opera Mini - acest browser acceptă doar parțial această funcție. Următorul este un exemplu de intrare de stil și valori de proprietate:

H1 ( text-shadow: 3px 5px 6px #6C9; )

După cum puteți vedea, am specificat până la patru valori separate printr-un spațiu. Să mergem în ordine:

• 3px - prima valoare este responsabilă pentru deplasarea umbrei de-a lungul axei X (dreapta, stânga). O valoare pozitivă mută umbra la dreapta, iar o valoare negativă o deplasează la stânga.
• 5px - a doua valoare este responsabilă pentru deplasarea umbrei de-a lungul axei Y (jos, sus). O valoare pozitivă mută umbra în jos, iar o valoare negativă o mută în sus.
• 6px - a treia valoare este responsabilă pentru raza de estompare a umbrei. Acest parametru este opțional. Estomparea implicită este 0 pixeli, ceea ce face umbra clară și nu neclară.
• #6c9 - a patra valoare este responsabilă pentru culoarea umbrei. Acest parametru este opțional. În mod implicit, culoarea umbrei este setată la aceeași culoare ca și textul căruia i se aplică stilul.

Cum arată umbra în browser (captură de ecran):

Captură de ecran: text cu umbră, CSS

Mai multe umbre CSS pentru text

De asemenea, este permisă utilizarea mai multor grupuri de valori pentru proprietatea text-shadow. Aceasta înseamnă că puteți seta mai multe umbre pentru același text. Pentru a face acest lucru, trebuie să scrieți grupuri de valori separate prin virgule.

H1 ( text-shadow: 3px 5px 6px #6C9, -6px -7px 6px #D9FFA7; )

Rezultatul aplicării acestui stil este vizibil în captura de ecran:

Captură de ecran: mai multe umbre de text CSS

Cu proprietatea text-shadow CSS, puteți crea lucruri cu adevărat frumoase. Puteți experimenta: setați un număr mare de umbre diferite, setați culoarea nu numai în formă hexazecimală, ci și în format RGBA, folosind canalul alfa pentru a regla transparența. Iată ce se poate întâmpla dacă acordați suficientă atenție acestei proprietăți:

Captură de ecran: 3D Text Shadow în CSS

Tipografia este jucăria mea preferată când vine vorba de web design. Totuși, cu ajutorul lui poți atrage atenția unei persoane, doar schimbând ușor stilul sau dimensiunea fontului. Foarte simplu și foarte eficient, s-au scris o mulțime de cărți pe această temă și s-au spart multe exemplare în dispute. Astăzi nu voi da sfaturi despre tipografie în general - nu am suficiente calificări, dar modul de stilare a textului site-ului dvs. este întotdeauna binevenit. Așa că astăzi vă voi arăta câteva modalități de a utiliza proprietatea CSS3 umbra textului, foarte simplu, dar în mâini pricepute poate face minuni.

Sintaxa de bază text-umbră

Această proprietate CSS3 funcționează în toate browserele recente, fără prefixe de furnizor precum -moz și -webkit. Chiar și IE poate fi învățat să înțeleagă această proprietate, trebuie să utilizați Modernizr sau analogi.

text-shadow: x-offset y-offset culoare estompare;

Asta e toată sintaxa de bază. Prima valoare este offset-ul orizontal, a doua valoare este offset-ul vertical, estomparea umbrei și culoarea umbrei. Luați în considerare un exemplu:

Text-umbră: 2px 4px 3px rgba(0,0,0,0.3);

A mutat umbra, a încețoșat-o cu 3 px și a setat culoarea la negru cu 30% opacitate. De ce folosesc canalul alfa sau transparența? Acest lucru oferă mai multă libertate în acțiuni, îl puteți face puțin mai deschis sau mai întunecat pur și simplu schimbând valoarea transparenței, fără a suferi de potrivirea culorilor. Iese destul de repede, recomand.

Litere în relief

body ( fundal: #222; ) #text h1 ( culoare: rgba(0,0,0,0.6); text-shadow: 2px 2px 3px rgba(255,255,255,0.1); )

Principiul de funcționare aici este acesta - fundalul este puțin mai deschis decât literele, o umbră ușoară cu o ușoară transparență. Rezultatul este in poza, incearca.

umbră dură

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

Acum stilul retro este la modă și acolo se folosește umbra fără estompare. Ei bine, suntem pregătiți pentru asta

umbră dublă

text-shadow: 4px 3px 0px #fff, 9px 8px 0px rgba(0,0,0,0.15);

Și aici este folosită o altă caracteristică dificilă a proprietății umbra textului, selectoarele pot fi listate separate prin virgule, creând astfel câte umbre sunt necesare. Prima umbră i se poate atribui o culoare ca fundalul, apoi va exista un efect, ca în imagine.

Jos și departe

text-shadow: 0px 3px 0px #b2a98f, 0px 14px 10px rgba(0,0,0,0.15), 0px 24px 2px rgba(0,0,0,0.1), 0px 34px 30px rgba(0,0,0,01. );

Textul este voluminos și atârnă peste fundal, nu-i așa? Aici sunt folosite 4 umbre cu diferite niveluri de estompare și locație. În general, cu cât sunt utilizate mai multe umbre, cu atât efectul este mai realist, luați în considerare acest lucru în proiectele dvs.

Text mic 3D

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);

Similar cu exemplul anterior, trei umbre, dar mai apropiate, de unde efectul de tridimensionalitate și greutate a textului.

Text 3D 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);

Am dat peste munca acestui designer pe net și nu am putut trece. Realism impresionant.

Text în relief de Gordon Hall

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

Un alt exemplu de lucrare imobiliară impresionantă umbra textului. Dar principiul este același pe care l-am spus mai sus. Fundal puțin mai deschis, umbră deschisă sub litere și întuneric deasupra. Făcut simplu, dar foarte cool.

Text strălucitor

text-shadow: 0px 0px 6px rgba(255,255,255,0.7);

Și aici totul este simplu - nu deplasăm umbra, o estompăm mai tare și o facem albă. Asta e toată strălucirea.

Stilul retro

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

Am vorbit mai sus despre stilul retro, acesta este din aceeași operă. Acum este atât de la modă, mai multe umbre clare. Aplicați la discreția dvs

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);

Există efectul mai multor surse de lumină care dau umbre în toate direcțiile.

Text în relief

culoare: 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);

Textul indentat era deja acolo, acum este ridicat. Un efect destul de simplu, dar arată foarte bine în anteturi, de exemplu. Folosește, încearcă

În concluzie, vreau să spun - Proprietatea text-shadow CSS3 foarte simplu, după cum puteți vedea. Dar aplicarea sa competentă, și chiar și cu puțină imaginație, poate face minuni.
Experimentează, să ai o zi bună