Fiecare web designer dorește să creeze numai site-uri web care merită să fie apreciate de toți utilizatorii de internet.

Desigur, este imposibil să satisfaci toate gusturile. De asemenea, în calitate de web designer, ar trebui să încercați să faceți tot posibilul pentru a crea un site pe care vizitatorii îl vor adora! Din fericire, cele mai puternice instrumente și resurse pentru a crea site-uri web uimitoare sunt deja disponibile și am adunat câteva fragmente CSS utile care vă vor ajuta să adăugați câteva funcții interesante proiectelor dvs.!

Acest 15 efecte de text uimitoare folosind CSS3– toate alese cu atenție și credem că vor contribui la adăugarea unui sclipire de originalitate proiectelor dumneavoastră. Unele sunt utile pentru anumite scopuri, în timp ce altele sunt potrivite pentru utilizare repetată.

Dacă îți plac florile și vrei un efect de text minunat și plin de culoare, atunci aceasta este propunerea solutie perfecta Pentru dumneavoastră! Acesta este foarte potrivit pentru afișarea numelui agenţie de creaţie sau pentru un portofoliu de proiecte. Desigur, poate fi folosit pentru orice alt tip de proiect – dacă vrei să ieși în evidență, atunci acest efect de text este o alegere grozavă!

Efectul de ondulare este cu adevărat uimitor! Acest lucru poate fi folosit pentru a adăuga un mic mister. Ar fi interesant să-l folosești pentru a evidenția o reducere sau oferta speciala, care funcționează doar pentru o perioadă foarte scurtă de timp.

Acesta este un efect de text foarte interesant; Cred că este pentru că schema de culori folosit poate fi aplicat pentru a evidenția un design vintage. Aceasta este o utilizare inteligentă a umbrelor de text și are potențialul de a atrage atenția utilizatorilor. Nu uita că Vintage nu va muri niciodată!

Următorul efect de text funcționează ca un magnet pentru spectatori. Puteți folosi acest lucru pentru a vă îmbunătăți forma, pentru a evidenția produs nou oferit spre vânzare sau pur și simplu pentru a atrage privirile spectatorilor. Este tentant și un web designer înțelept îl va folosi în avantajul său!

Cred că tendința în rândul designerilor web este de a crea prezențe online mai dinamice. Efectele de glisare interesante și tranzițiile de pagină sunt cele mai frecvent utilizate oportunități pentru a adăuga mai mult dinamism unui site. Totuși, dacă doriți și mai mult dinamism, acest efect de text CSS3 minunat poate fi opțiune bună. Cred că aceasta este o soluție simplă, dar eficientă!

Cei mai pretențioși clienți sunt copiii, dar acest lucru nu ar trebui să vă împiedice să creați site-uri web pentru ei. Dacă lucrați la un proiect legat de copii sau unul amuzant, atunci puteți folosi acest efect pentru text! Fontul Jokerman are propria sa frumusețe deosebită, nu-i așa?

Modelarea CSS3 și 3D au mai multe în comun decât doar numărul „3”! Utilizarea CSS3 vă permite să creați efecte 3D frumoase, cum ar fi cel din acest fragment. Acest efect este potrivit pentru un număr mare de proiecte și cred că ar trebui să îl încercați!

Uneori, jocul cu focul poate fi distractiv! Nu-ți face griji, nu sunt un piroman, sunt doar uimit de acest efect de text misto! Nu-mi amintesc să fi văzut acest efect de text în aspectul altor site-uri, așa că iată un alt motiv pentru a-l folosi și a crea un site original!

Într-o situație în care prețuiești mai mult un efect de text discret, acest „efect de ceață” este recomandarea mea. Este adevărat că poate avea un impact negativ asupra utilizării site-ului tău. Pe de altă parte, dacă nu îți asumi riscuri, nu vei câștiga! Desigur, poate fi personalizat pentru a se potrivi cerințelor dumneavoastră!

Deși acest efect de text este destul de complex, este implementat folosind CSS, nu există JavaScript. Personal, cred că poate fi folosit pentru site-uri de muzică sau pentru a evidenția un anumit element dintr-un site web.

Este un efect foarte discret, dar cred că poate adăuga un factor „wow” la machete. Cele metalice arată minunat lucrate și accentuează momentele care apar/dispar.

S-ar putea să fiu subiectiv pentru că sunt un mare fan al filmului Star Wars, dar acest efect de text este foarte tare. Acest lucru face proiectele tale mai interesante și, fără îndoială, fanii acestui film s-au îndrăgostit de site-ul tău din cauza acestui efect.

Acest efect de text contribuie în mare măsură la îmbunătățirea interacțiunii utilizator-site. Demonstrează încă o dată că CSS3 are mult potențial și un designer web talentat poate crea animații frumoase cu doar câteva linii de cod.

Acesta este ultimul element din această listă, dar nu trebuie să îl ignorați. Mai mult, cireașa de pe tort este că există peste 10 efecte de text CSS3 uimitoare. Cred că ar trebui să le verificați pe toate cu atenție și să studiați cum au fost implementate aceste efecte de atracție.

Cei care încă cred că atributele CSS nu sunt suficiente pentru a crea efecte de text interesante ar trebui să asculte acest lucru! Combină mai multe efecte - animație, perspectivă 3D, umbre și setări de text. Cred că combinația de umbră și contur este de modă veche, dar acest proiect este conceput pentru a arăta ce se poate realiza cu „CSS pur”.

Ați avut vreodată un sentiment neplăcut când legendele dvs. nu se potriveau cu culorile butoanelor, panourilor sau pur și simplu textul contrasta slab cu fundalul paginii? Prin utilizarea Umbre CSS Această problemă poate fi rezolvată cu ușurință prin utilizarea proprietății text-shadow pentru a îmbunătăți lizibilitatea și contrastul textului.

În exemplele date, folosim umbre de text în situatii diferite, care vă va oferi baza necesară pentru a putea studia în continuare această problemă pe cont propriu.

1. Configurare de bază

Creați unul nou fișier HTMLși adăugați următorul cod la acesta HTMLŞi CSS:

În secțiunea HTML, adăugați o etichetă

cu clasa de text:

Web Code Geeks

Pentru acest element vom adăuga o umbră de text CSS. Am setat proprietățile inițiale pentru acest element, astfel încât să arate bine pe ecran:

Acum să setăm atributul text-shadow textului. Dar mai întâi, să ne dăm seama ce valori ia acest atribut:

Text-umbră: 4px 4px 4px #ccc;

1. 4px - X offset ( orizontală);
2. 3px - offset axa Y ( vertical);
3. 2px - valoare de estompare;
4. #ccc - culoare.

Aceasta este stabilită după cum urmează:

Text-shadow: orizontal-offset vertical-offset blur culoare;

de culoare poate fi reprezentată prin codul hexazecimal #ccc sau RGBA (0,0,0,0.3); . În CSS, putem aplica o umbră interioară CSS textului nostru astfel:

.text(
dimensiunea fontului: 5em; /* face textul mai mare */
text-shadow: 4px 3px 2px #ccc;
}

Reprezentarea în browser a acestui text umbrit ar arăta astfel:

EXEMPLU site-ul web

În continuare, vom schimba culoarea de fundal a elementului corp în diferite moduri. Facem acest lucru deoarece unele umbre CSS necesită un fundal specific, altfel nu vor fi vizibile. Pentru a face textul să arate mai frumos, îl vom pune cu litere mari.

2. Efect de amprentă

Setați culoarea textului la o nuanță puțin mai închisă decât fundalul. Apoi aplicați o umbră mică de text alb cu opacitatea redusă:

Corp (
fundal: #222;
}
.text(
dimensiunea fontului: 5em;
culoare: rgba(0,0,0,0.6); /* culoarea textului */
text-shadow: 2px 2px 3px rgba(255,255,255,0.1); /* adăugarea unei umbre */
}

Folosind codul RGBA puteți seta opacitatea culorii. Observați că culoarea textului are o opacitate de 60% (0,6), iar umbrele div CSS au o opacitate de 10% (0,1).

EXEMPLU site-ul web

3. Efect de umbră retro

Umbrele retro nu trebuie întotdeauna să fie estompate. Luați această umbră retro de exemplu:

Corp (
}
.text(
dimensiunea fontului: 5em;
culoare: alb; /* schimbă culoarea textului în alb */
text-shadow: 6px 6px 0px rgba(0,0,0,0.2); /* adăugând umbră retro */
}

EXEMPLU site-ul web

4. Efect de umbră dublu

Interesant este că puteți adăuga mai mult de o umbră de font CSS. Acest lucru se poate face astfel: text-shadow: shadow1, shadow2, shadow3; Să adăugăm două umbre, una cu culoarea de fundal și a doua puțin mai închisă:

Text (
dimensiunea fontului: 5em;
text-shadow: 4px 3px 0px #fff, 9px 8px 0px rgba(0,0,0,0.15); /* dă două umbre */
}

Fundalul nostru este alb, așa că nu avem nevoie de altă culoare pentru el. În browser efectul va arăta astfel:

EXEMPLU site-ul web

5. Efect de umbră la distanță

Acest efect se bazează pe funcția de a defini mai multe umbre CSS frumoase. Mai jos puteți vedea efectul cu patru umbre aruncate în jos la diferite grade de intensitate:

Corp (
fundal: #fff3cd; /* schimba culoarea de fundal */
}
.text(
dimensiunea fontului: 5em;
culoare: alb;
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,0.1);
}

EXEMPLU site-ul web

6. Efect 3D de Mark Dotto

Corp (
fundal: #3495c0; /* schimba culoarea de fundal */
}
.text(
dimensiunea fontului: 5em;
culoare: alb;
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);
}

Acum vedeți cum arată aceste umbre de text interioare CSS în browser:

EXEMPLU site-ul web

7. Efect de text realist Gordon Hall Cut

Gordon folosește o magie CSS avansată pentru a oferi nu numai o umbră exterioară, ci și o umbră interioară realistă:

Corp (
fundal: #cbcbcb; /* schimba culoarea de fundal */
}
.text(
dimensiunea fontului: 5em;
culoare: transparent;
culoare de fundal: #666666;
-webkit-background-clip: text;
-moz-background-clip: text;
clip de fundal: text;
text-shadow: rgba(255,255,255,0.5) 0px 3px 3px;
}

Și acest lucru creează efectul de text tăiat.

EXEMPLU site-ul web

8. Efect de strălucire text

corp (
fundal: #992d23; /* schimba culoarea de fundal */
}
.text(
dimensiunea fontului: 5em;
culoare: alb;
text-shadow: 0px 0px 6px rgba(255,255,255,0.7);
}

Această umbră creează un efect strălucitor pentru text:

EXEMPLU site-ul web

9. Efect de text în relief

corp (
fundal: #629552; /* schimba culoarea de fundal */
}
.text(
dimensiunea fontului: 5em;
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);
}

EXEMPLU site-ul web

10. Efect de umbră lungă

Acest efect poate fi realizat folosind

Culoare de fundal: rgb(147, 201, 67);
text-shadow: 1px 1px rgb(131, 179, 60), 2px 2px rgb(131, 179, 60), 3px 3px rgb(131, 179, 60), 4px 4px rgb(131, 179, 60), 4px 4px rgb(131, 179, 60), rgb(131, 179, 60), 6px 6px rgb(131, 179, 60), 7px 7px rgb(131, 179, 60), 8px 8px rgb(131, 179, 60), 9px 179, 91 px 60), 10px 10px rgb(131, 179, 60), 11px 11px rgb(131, 179, 60), 12px 12px rgb(131, 179, 60), 13px 13px rgb(179, 60), 12px 12px rgb(131, 179, 60), 13px 13px rgb(179, 60), 13px 13px rgb(179, 60) (131, 179, 60), 15px 15px rgb(131, 179, 60), 16px 16px rgb(131, 179, 60), 17px 17px rgb(131, 179, 60), 181, 18 px, 60 px ), 19px 19px rgb(131, 179, 60), 20px 20px rgb(131, 179, 60), 21px 21px rgb(131, 179, 60), 22px 22px rgb(131, 179, 60), 21px 21px rgb(131, 179, 60), 22px 22px rgb(131, 179, 60 px), 131, 179, 60), 24px 24px rgb(131, 179, 60), 25px 25px rgb(131, 179, 60), 26px 26px rgb(131, 179, 60), 273, rgb2 (131, 179, 60), 271, rgb2) ;
culoare: #eaeaea;

EXEMPLU site-ul web

Concluzie

După cum puteți vedea, proprietatea text-shadow este foarte ușor de utilizat și o puteți folosi pentru a vă crea propriile umbre CSS creative.

Tipografia este jucăria preferată a designerilor web. CSS are un instrument foarte interesant - text-umbră(text shadow), care la prima vedere pare destul de simplu, dar cu ajutorul lui poți crea efecte memorabile dacă folosești ingeniozitate și imaginație.

Bazele umbrelor

Proprietate text-umbră 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 și în IE9). Puteți folosi instrumente precum Modernizr pentru a elimina efectele CSS3 chiar și pe versiunile mai vechi de IE.

Sintaxă

Pentru a crea o umbră de text, utilizați sintaxa proprietății text-umbră care este dat mai jos. Există patru parametri de definit: primii doi setează 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 compensată cu doi pixeli în jos și patru pixeli la dreapta, estompată cu trei pixeli și setată la negru la 30% opacitate.

Text-shadow: 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 specifica culoarea umbrei atunci când definiți o proprietate. Cu toate acestea, rgba adaugă o altă dimensiune atunci când definește o umbră - nivelul de transparență.

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

Folosind proprietatea text-umbră Puteți crea diverse efecte pentru text, fără a se limita la simple umbre. De exemplu, aici este codul pentru a crea iluzia unui text deprimat.

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 text-umbră cu culoare albă și transparență sporită.

Culoarea de fundal este #222, iar culoarea textului este setată la 60% opacitate. Umbra albă este poziționată ușor în jos și la dreapta, cu un nivel de 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 nevoie să estompeze deloc umbra. O umbră clară poate merge bine cu un design de site web.

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 aveți nevoie!

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

Iată un exemplu de utilizare a două umbre. Primul are aceeași culoare ca fundalul.

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

Schimbare în jos pe distanțe lungi

Odată ce vă pricepeți la utilizarea mai multor umbre, rezultatele vor deveni din ce în ce mai dramatice. 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 o distanță mică și estompați puternic

Iată o altă încarnare a aceleiași idei. Cele trei umbre sunt deplasate la o distanță mai mică și sunt 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 utilizat pe site-ul web 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 indentat 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;

clip de fundal: text;

culoare: transparent;

text-shadow: rgba(255,255,255,0.5) 0px 3px 3px;

Strălucire

Concluzie

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

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

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.

Este greu de imaginat toate posibilitățile pe care le oferă proprietatea tradițională de umbră a textului. În CSS3, proprietatea text shadow aplică o umbră textului. Puteți seta dimensiunea umbrei orizontale, dimensiunea umbrei verticale, distanța de estompare și culoarea umbrei:

Text-shadow : h-shadow v-shadow blur culoare ; /* exemplu: */ text-shadow : 2px 2px 5px #FF7777 ;

Pentru a adăuga mai multă profunzime textului, trebuie doar să adăugați câteva umbre, cum ar fi:

#eff1 (culoare: #00b506; text-shadow: 0px 0px 0 rgb (-28 ,153 ,-22 ) , 1px 1px 0 rgb (-55 ,126 ,-49 ) , 2px 2px 0 rgb (-83, 98 , rgb ) -77 ), 3px 3px 0 rgb (-111 ,70 ,-105 ) , 4px 4px 0 rgb (-139 ,42 ,-133 ) , 5px 5px 0 rgb (-166 ,15 ,,-160 px px) (-194 ,-13 ,-188 ) , 7px 7px 0 rgb (-222 ,-41 ,-216 ) , 8px 8px 7px rgba(0 ,0 ,0 ,0 . 75 ), 8px 8px 1px rgba(0 ,0 ,0 ,0 . 5 ), 0px 0px 7px rgba(0 ,0 ,0 ,. 2 ) ; }

Efectul #2 - gradient de text CSS3 folosind -webkit-mask-image pentru motorul Webkit

Acest efect folosește măști CSS3, proprietatea -webkit-mask-image. Această proprietate nu este acceptată în prezent de alte browsere, dar sperăm că va fi acceptată în viitor:

#eff2 (culoare: #00b506; umbră text: 1px 1px 1px # 000000 ; -webkit-mask-image: -webkit-gradient(liniar, stânga sus, stânga jos, din(rgba(0,0,0,1)), color-stop( 50 % , rgba(0 ,0 ,0 ,. 3 ) ) , to(rgba(0 ,0 ,0 ,1 ) ) ); )

Efectul #3 - Fundalul textului curcubeu CSS3 folosind -webkit-text-fill-color pentru motorul Webkit

Pentru a obține acest efect, folosim proprietatea background-clip cu o valoare de text non-standard, care este acceptată numai de browserele bazate pe motorul Webkit:

#eff3 ( imagine de fundal : -webkit-linear-gradient (stânga , #ff0000 , #ff7f00 , #ffff00 , #00ff00 , #00ffff , #0000ff , #8b00ff ) ; imagine de fundal : -moz-linear-gradient (stânga , #ff0000 , #ff7f00 , #ffff00 , #00ff00 , #00ffff , #0000ff , #8b00ff ) ; imagine de fundal : -ms-linear-gradient (stânga , #ff0000 , #ff7f00 , #ff0ff0 , #ff0ff0 ; , #0000ff , #8b00ff ) ; imagine de fundal : -o-linear-gradient (stânga , #ff0000 , #ff7f00 , #ffff00 , #00ff00 , #00ffff , #0000ff , #8b00ff , #0, 0 ; #ff7f00 , #ffff00 , #00ffff , #0000ff , #8b00ff ) -webkit-text-fill-color : transparent -webkit-background-clip : text ;

Efectul #4 - Text strălucitor folosind tranziții CSS3 și -webkit-background-clip pentru motorul Webkit

Într-un browser alimentat cu Webkit, o dâră de lumină trece uneori pe text. Pentru a obține acest efect, folosim aceeași proprietate background-clip cu o valoare de text non-standard:

#eff4 ( fundal: #00b506 -webkit-gradient(liniar, stânga sus, dreapta sus, de la(#00b506) , la(#00b506 ) , color-stop(0 . 5 , #ffffff ) ) 0 0 fără repetare ; culoare: rgba(255 , 255 , 255 , 0 . 1 ); dimensiunea fontului: 120px; greutatea fontului: bold; poziție: relativă; -webkit-animation: shine 2s infinite; -webkit-background-clip : text ; -webkit-background-size : 300px ; ) @-webkit-keyframes strălucește ( 0 % (poziția de fundal: stânga sus;) 100 % (poziția de fundal: dreapta sus;))

Efectul #5 - textul mângâiat CSS3 folosind proprietatea text-stroke pentru motorul Webkit

Puteți adăuga cu ușurință un text plat interesant folosind proprietatea -webkit-text-stroke:

#eff5 (culoare: #00b506; -webkit-text-stroke: 1px # 000 ; }

Efectul #6 - Rotirea textului 3D folosind proprietatea de transformare CSS3 Y-rotation

Puteți roti textul utilizând tranziții și transformarea de rotație în Y:

#eff6 (culoare: #00b506; ) #eff6 p (culoare: #8A2BE2; cursor: indicator; afișare: bloc inline; -webkit-tranziție: .5s ; -moz-tranziție: .5s ; -o-tranziție: . 5s ; tranziție: .5s ; (-180deg) ; filtru: progid:DXImageTransform .Microsoft .BasicImage (rotation=2 ) )

Concluzie

În acest tutorial, am analizat modalități de a crea diferite efecte de text folosind proprietățile CSS3. Sperăm că v-a plăcut această lecție și că o găsiți utilă. Nu toate proprietățile care au fost folosite pentru acest tutorial funcționează în toate browserele, dar toate sunt folosite doar pentru a crea efecte frumoase care nu afectează funcționalitatea, astfel încât acestea pot fi aplicate, de exemplu, folosind regula @ suportă, numai pentru browserele care acceptă aceste proprietăți.

Traducere – Cameră de serviciu

Modulul conține caracteristici CSS legate de stilul textului, cum ar fi sublinierea, umbrele textului și accente de text din Asia de Est.

Proprietăți de stil de text

1. Design de linie: subliniat, contur și barat

Sublinierea, liniile și liniile de tăiere sunt afișate numai pentru blocurile la nivel de linie neînlocuite (afișare: inline) și sunt afișate în tot textul, inclusiv spațiile dintre caractere și cuvinte, cu excepția indentațiilor la începutul și la sfârșitul unui rând.

Browserele pot rupe sublinierea și conturarea acolo unde linia intersectează gliful, apărând la o anumită distanță de fiecare parte a conturului glifului. Când browserul rupe sublinierea sau conturul la granițele glifului, forma liniei de pe acea limită trebuie să se potrivească cu forma glifului. Cu toate acestea, specificația nu prescrie o metodă specifică pentru „urmărirea formei” unui glif, lăsând aceasta la latitudinea browserului.

Orez. 1. Ruperea sublinierii

1.1. Tip de linie de decorare: proprietate text-decor-line

Suport pentru browser

IE: —
Margine: —
Firefox: 36, 35 -moz-
Chrome: 57
Safari: 12.1, 7.1 -webkit-
Operă: 44
iOS Safari: 8 -webkit-
Browser UC pentru Android: 11.8
Chrome pentru Android: 73
Samsung Internet: 7.2

Proprietatea text-decoration-line determină ce tip de linie, dacă există, este adăugată elementului.

Proprietatea nu este moștenită.

Sintaxă

Text-decor-line: niciuna; text-decor-line: subliniere; text-decor-line: overline; text-decor-line: line-through; text-decor-line: clipi; text-decoration-line: subliniere supralinie; text-decoration-line: overline subliniat line-through; text-decor-line: mostenire; text-decor-line: initiala;

1.2. Stilul liniei de decorare: proprietate text-decor-stil

Suport pentru browser

IE: —
Margine: —
Firefox: 36, 35 -moz-
Chrome: 57
Safari: 12.1, 7.1 -webkit-
Operă: 44
iOS Safari: 8 -webkit-
Browser UC pentru Android: 11.8
Chrome pentru Android: 73
Samsung Internet: 7.2

Proprietatea text-decoration-style specifică stilul liniilor trasate pentru a decora textul specificat în element. Valorile au aceeași semnificație ca și pentru proprietatea tip chenar.

Proprietatea nu este moștenită.

Sintaxă

Text-decor-stil: solid; text-decor-stil: dublu; text-decor-stil: punctat; text-decor-stil: punctat; text-decor-stil: ondulat; text-decor-style: mostenesc; text-decor-stil: initiala;

1.3. Culoare linie de decorare: proprietate text-decorare-culoare

Suport pentru browser

IE: —
Margine: —
Firefox: 36, 35 -moz-
Chrome: 57
Safari: 12.1, 7.1 -webkit-
Operă: 44
iOS Safari: 8 -webkit-
Browser UC pentru Android: 11.8
Chrome pentru Android: 73
Samsung Internet: 7.2

Proprietatea text-decoration-color specifică setul de culori a liniei de decorare a textului pentru un element cu text-decoration-line .

Proprietatea nu este moștenită.

Sintaxă

Text-decor-culoare: currentColor; text-decor-culoare: somon; text-decorare-culoare: #00ff00; text-decor-culoare: rgba(255, 128, 128, 0,5); text-decor-culoare: transparent; text-decor-culoare: mostenesc; text-decor-culoare: initiala;

1.4. Un rezumat rapid al proprietăților unei linii de decorare: proprietatea text-decor

Suport pentru browser

IE: —
Margine: —
Firefox: 36, 35 -moz-
Chrome: 57
Safari: 12.1, 7.1 -webkit-
Operă: 44
iOS Safari: 8 -webkit-
Browser UC pentru Android: 11.8
Chrome pentru Android: 73
Samsung Internet: 7.2

Proprietatea text-decor este formă scurtăînregistrările de proprietate text-decorare-line text-decorare-stil text-decorare-culoare într-o singură declarație. Valorile lipsă sunt setate la valorile lor inițiale. Valoare implicită text-decor: niciunul solid currentColor; . Proprietatea nu este moștenită. Cu toate acestea, stilul tuturor liniilor de text trebuie să fie același pentru un element.

1.5. Poziția liniei de proiectare: proprietate text-underline-position

Suport pentru browser

IE: —
Margine: 12
Firefox: —
Chrome: 71
Safari: —
Operă: —
iOS Safari: —
Browser UC pentru Android: ?
Chrome pentru Android: 71
Samsung Internet: —

Proprietatea text-underline-position stabilește poziția sublinierii specificată în element.

Proprietatea este moștenită.

Valori:
auto	Browserul poate folosi orice algoritm pentru a determina poziția sublinierii, cu toate acestea, linia trebuie plasată pe sau sub linia de bază a textului. Valoare implicită.
sub	Sublinierea se află sub conținutul textului elementului. În acest caz, sublinierea de obicei nu intersectează descendentul. Această valoare poate fi combinată cu stânga sau dreapta dacă o anumită parte este preferată în modurile tipografice verticale.
stânga	În modurile de tipografie verticală, sublinierea este aliniată la marginea din stânga a textului. Cu toate acestea, această valoare este interpretată ca sub .
corect	În modurile de tipografie verticală, sublinierea este aliniată la marginea dreaptă a textului. Cu toate acestea, această valoare este interpretată ca sub .
moşteni
iniţială

Sintaxă

Text-subliniere-poziție: auto; text-subliniere-poziție: sub; text-subliniere-poziție: stânga; text-subliniere-poziție: dreapta; text-subline-poziție: sub stânga; text-subliniere-poziție: sub dreapta; text-subliniere-poziție: moștenire; text-subliniere-poziție: inițială; Orez. 2. Subliniați textul pe ambele părți în moduri de tipografie verticală utilizând valorile stânga și dreapta

2. Text shadow: proprietate text-shadow

Suport pentru browser

IE: 10
Margine: 12
Firefox: 3.5
Chrome: 4
Safari: 4
Operă: 10
iOS Safari: 3.2
Browser UC pentru Android: 11.8
Chrome pentru Android: 73
Samsung Internet: 4

Proprietatea text-shadow este folosită pentru a adăuga o umbră textului. Umbra textului este un instrument interesant care vă permite să creați efecte uimitoare. Umbrele pot fi cu un singur strat sau cu mai multe straturi, neclare, colorate sau translucide. Când specificați o umbră pentru un element, puteți specifica o singură lungime și culoare, creând astfel o copie colorată a unui singur caracter sau cuvânt. De asemenea, utilizarea unei umbre poate face textul mai lizibil dacă contrastul dintre culoarea textului și fundal este scăzut.

Fiecare umbră este aplicată atât textului în sine, cât și elementelor sale de design (proprietatea text-decor). Puteți specifica mai multe umbre în același timp, specificându-le separate prin virgule. Umbrele se suprapun, dar nu se suprapun textului în sine. Prima umbră este întotdeauna situată deasupra celorlalte umbre. Proprietatea este moștenită.

Fiecare umbră este definită de două sau trei lungimi și o culoare opțională. Lungimile permise sunt 0 .

Proprietatea nu este moștenită.

Orez. 3. Sintaxa proprietății text-umbră

text-umbră
Valori:
x-offset	Setează decalajul orizontal al umbrei. O valoare pozitivă desenează o umbră decalată la dreapta textului, o lungime negativă desenează o umbră la stânga.
y-offset	Setează decalajul vertical al umbrei. O valoare pozitivă mută umbra în jos, o valoare negativă mută umbra în sus.
estompa	Setează raza de estompare. Valorile negative nu sunt permise. Dacă valoarea de estompare este zero, atunci marginea umbrei este clară. În caz contrar, cu cât valoarea este mai mare, cu atât marginea umbrei este mai neclară.
culoare	Stabilește umbre. Dacă nu există culoare, culoarea folosită este luată din proprietatea culoare.
nici unul	Valoarea implicită înseamnă că nu există umbră de text. Îndepărtează umbra unui element dintr-un grup de elemente cu proprietatea specificată.
iniţială	Setează valoarea proprietății la valoarea implicită.
moşteni	Moștenește valoarea proprietății de la elementul părinte.

Spre deosebire de box-shadow , umbrele de text nu sunt tăiate și pot apărea dacă textul este parțial transparent. La fel ca box-shadow , umbrele textului nu afectează aspectul și nu determină derularea sau creșterea dimensiunii zonei care poate fi derulată.

Sintaxă

Text-umbră: 2px 2px 4px roz; text-shadow: #fc0 1px 0 10px; text-shadow: 5px 5px #4D4644; text-shadow: albastru 2px 5px; text-umbră: 5px 10px; text-shadow: mostenire; text-umbra: initiala;

2.1. Exemple de umbre de text

Umbra afișului

Umbra textului

Text-shadow-1 ( fundal: #77F7DE; culoare: alb; text-shadow: -2px -2px 0 #4D4644, 2px -2px 0 #4D4644, -2px 2px 0 #4D4644, 2px 2px 0 #4D4644, 4px 4px 0 alb, 5px 5px 0 alb, 6px 6px 0 alb: 0,1 em )

umbra 3D

Umbra textului

Text-shadow-2 ( fundal: liniar-gradient(-45deg, #FEE864, #F5965E); culoare: #f4f4f4; text-shadow: -1px -1px alb, 1px 1px gri, 2px 2px #7a7a7a, 3px 3px #757575 , 4px 4px #707070, 5px 5px #6b6b6b, 6px 6px #666666, 7px 7px #616161, 8px 8px #5c5c5c, 9px 9px #575757, 10px 10px 2,5 px #1, 4 px #1, 4 px 18px 30px rgba(0, 0, 0, .4), 18px 18px 10px rgba(0, 0, 0, .4 )

Text-umbră

Umbra textului

Text-shadow-3 ( fundal: #FFE6DB; culoare: #FFE6DB; spațiere între litere: .1em; text-shadow: 3px 0 rgba(250, 111, 142, .5), 6px 0 rgba(250, 111, 142) , .4), 9px 0 rgba(250, 111, 142, .3), 12px 0 rgba(250, 111, 142, .2), 15px 0 rgba(250, 111, 142, .1);