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. raza Setează raza estomparii 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 varia 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 filtru: 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);

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 un 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 pare 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). Creșterea 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, trebuie doar să 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, 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-Clasuri

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.

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 folosind 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 proprietatea. 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 decalarea 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):

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:

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:

Chiar și cel mai ecologic designer știe să facă umbre în Photoshop. Umbrele dau volum designului si acum este foarte popular. Umbrele pentru texte, elemente de meniu și titluri nu fac excepție. Este suficient să amintim designul interfețelor de la Apple

Va fi util să aveți abilități de umbră de text în arsenalul dvs. de trucuri.

O sarcină

Faceți o umbră pentru text folosind CSS, fără a utiliza imagini. Ce vom realiza cu asta?

• flexibilitate - fără a folosi imagini, textul este ușor de schimbat
• viteza - mai puține imagini - mai puțină greutate a paginii, mai puține apeluri pe server
• SEO - Textul se optimizează mai bine decât imaginile și este mai fiabil decât utilizarea tehnicilor de înlocuire text cu imagine

Umbre de text pentru browserele normale

Toate browserele moderne care sunt mai mult sau mai puțin în pas cu recomandările W3C au intrat în browserele normale. În acest caz, aceste browsere înțeleg proprietatea text-shadow CSS3, care a fost recomandată încă din 2003.

Deci, lista de browsere care acceptă proprietatea text-shadow:

• Safari 3.1 (Mac/Win) - Acceptă, nu acceptă mai multe umbre
• Safari 4 (Mac/Win) - Complet acceptat
• Opera 9.5+ (Mac/Win/Lin) - acceptă complet
• Firefox 3.1/3.5 (Mac/Win/Lin) - Complet acceptat
• Google Chrome 2 (Win) - Complet acceptat
• Shiira (Mac) - Suportă, nu acceptă mai multe umbre
• Konqueror (Lin/Mac/Win) - acceptă pe deplin
• iCab (Mac) - acceptă, nu acceptă mai multe umbre
• Safari pe iPhone - acceptă, nu acceptă mai multe umbre
• Nokia Symbian-Smartphones (Seria 60) - suportă
• Opera Mini 4.1 - Suportă, nu acceptă estomparea umbrelor

Pentru aceste browsere, este nevoie doar de o linie de CSS pentru a face umbra textului:

H1 ( text-shadow: 0px 1px 3px #000; )

Primim acest titlu la modă:

Cu text-shadow, puteți obține diferite efecte interesante.

Text neclar

H1 (culoare: #fff; fundal: #666; umbră text: 0px 0px 3px #fff; )

Text duplicat

H1 ( text-shadow: 0px 20px #000; )

Umbrele multiple vă permit să obțineți mai multe efecte:

Text încorporat

H1 ( fundal: #ccc; culoare: #ccc; text-shadow: -1px -1px #666, 1px 1px #FFF; font-family: serif; )

Text în relief

H1 ( fundal: #999; culoare: #999; umbră text: 1px 1px 3px #666, -1px -1px 3px #FFF, 1px 1px #666, -1px -1px #FFF; familia de fonturi: serif; )

(IE nu vă va permite să vă bucurați de frumusețea de aici, deoarece nu acceptă text-shadow). Puteți veni cu o mulțime de efecte diferite folosind text-shadow, singura limitare practică este imaginația ta.

Acum, pentru partea tristă - ce să faci cu „iubitul” IE al tuturor?

Umbrele textului în IE

În timp ce IE până la versiunea 8 nu înțelege text-shadow, are propriile sale clopote și fluiere. În special, există un filtru dropShadow () pentru crearea de umbre. Pentru ca umbrele să apară, elementul trebuie să aibă un set de aspect. Puteți instala în mai multe moduri:

• prin setarea elementului de proprietate: bloc + înălțime() sau lățime())
• dând elementul : absolut
• prin setarea : stânga/dreapta
• setarea zoom-ului: 1

H1 ( filter:progid:DXImageTransform.Microsoft.DropShadow(color="#666666",offX=2,offY=2,positive="true"); zoom: 1; )

Se părea că poți striga „Hura!!!” și bucurați-vă de viață, dar uitați cum funcționează de fapt acest filtru:

Acesta este modul în care va fi afișat textul dacă i se aplică filtrul dropShadow

Pentru cei care nu înțeleg, deficiențele acestui filtru sunt:

• umbra arată groaznic: unghiulară, fără tranziție lină la fundal cu transluciditate
• stilul fontului este distorsionat
• umbra este practic incontrolabilă (puteți controla doar poziția umbrei) - aceasta poate fi ocolită parțial prin aplicarea filtrului de umbră în loc de dropShadow, dar primele două dezavantaje critice rămân
• prezența obligatorie a aspectului limitează oarecum dezvoltatorul

Acest rezultat nu este acceptabil în proiecte reale. Nu este clar cine și cum a acceptat astfel de lucrări de la dezvoltatori.

Kilian Valkhof a sugerat utilizarea emulării umbrelor:

1. nu aplica filtrul direct textului
2. utilizați o combinație de filtre de strălucire și de estompare în loc de dropShadow și umbră

Acest lucru va evita distorsiunea textului și va face umbra mai flexibilă.

Antet de testareТестовый заголовок

h1 ( text-shadow: 3px 3px 3px #cccccc; poziție: relativ; zoom: 1; culoare: #000; ) h1 span ( poziție: absolut; stânga: -3px; sus: -3px; z-index: -1; filtru: progid:DXImageTransform.Microsoft.Glow(Color=#cccccc,Strength=1) progid:DXImageTransform.Microsoft.blur(pixelradius=3, enabled="true") ; zoom: 1; )

Dar chiar și cu această abordare, există încă o serie de dezavantaje:

• codul non-semantic este un element în plus, și chiar și cu duplicarea textului, nu va avea cel mai bun efect asupra structurii logice a conținutului, optimizarea SEO. Această problemă poate fi rezolvată cu javascript care va insera un element suplimentar pentru IE la încărcarea paginii
• nu se potrivește cu afișarea în alte browsere (care înțeleg text-shadow) - filtrele vă permit să emulați o umbră, cu setări minime. Asemănarea umbrei cu alte browsere nu este întotdeauna posibilă
• mai puțină flexibilitate - filtrele nu vor oferi toate posibilitățile de text-shadow, de exemplu, nu va fi posibilă implementarea mai multor umbre

Pentru a crea umbre pentru IE, puteți folosi javascript (nu este prima dată când javascript se salvează)

Umbre text cu javascript

Dintre scripturile pe care le-am testat, m-am stabilit pe pluginul „Drop Shadow” pentru jquery. Avantajele sale:

• emulează umbre prin inserarea mai multor containere, de ex. fără a folosi filtre pentru IE. Acest lucru face posibilă ca umbrele din IE să fie cât mai asemănătoare cu alte browsere + nu trebuie să vă faceți griji cu privire la aspectul pentru IE
• creează umbre nu numai pentru IE, ceea ce uneori poate fi util
• greutate mică de script - 4Kb (dacă eliminați comentariile din cod), iar dacă aplicați compresie, aceasta va fi și mai mică. Există cerințe în scrierea scriptului - prezența scriptului jquery.dimensions.js, dar încă nu înțeleg de ce este. Umbrele sunt create, eliminate, definite prin id și fără el.
• simplu și clar de utilizat
• poate emula mai multe umbre cu oarecare succes

Defecte:

• Nu se poate inițializa scriptul după id-ul elementului
• dacă elementul are un fundal, umbra va fi creată nu pentru text, ci pentru elementul în ansamblu
• conectarea obligatorie a bibliotecii jquery (și aceasta este mai mult de 50Kb). Dar popularitatea jQuery aproape elimină acest neajuns.
• Conform descrierii scriptului, este necesar și jquery.dimensions.js (alți 2Kb). Dar nu am înțeles de ce această bibliotecă, se pare că totul funcționează bine fără ea

Aplicarea pluginului Drop Shadow

Sintaxă:

jQuery(selector).dropShadow(opțiuni); // creează o umbră pe elementul jQuery(selector).redrawShadow(); // redesenează umbra jQuery(selector).removeShadow(); // elimina shadow jQuery(selector).shadowId(); // returnează id-ul umbrei elementului

Stânga: [întreg] (implicit = 4) sus: [întreg] (implicit = 4) estompare: [întreg] (implicit = 2) opacitate: [float] (implicit = 0,5) culoare: [șir] (implicit = „negru ") swap: [boolean] (implicit = fals)

Parametrii din stânga și de sus sunt coordonatele începutului umbrei în raport cu colțul din stânga sus al inscripției (sau obiectului). Valorile pozitive mută umbra la dreapta și în jos, valorile negative o mută la stânga și în sus.

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-shadow: 2px 4px 3px rgba(0,0,0,0.3);

A mutat umbra, a estompat-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

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ă

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ă

Ș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 este nevoie. Prima umbră i se poate atribui o culoare ca fundalul, apoi va exista un efect, ca în imagine.

Jos și departe

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 folosite mai multe umbre, cu atât efectul este mai realist, luați în considerare acest lucru în proiectele dvs.

Text mic 3D

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

Text 3D de Mark Dotto

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

Text în relief de Gordon Hall

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

Text strălucitor

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

Stilul retro

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ă

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

Text în relief

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ă, o zi bună