Crearea unei umbre pentru text folosind CSS. Contur text folosind CSS. Cum se conturează textul în CSS. Sintaxa marginii CSS

Salutări, dragi cititori. Astăzi vă voi spune și vă voi arăta cum puteți crea un contur text în CSS. Vom efectua toate manipulările exclusiv cu proprietatea text-shadow.

Contur subțire, clar

Ca text pe care ne vom testa toate ideile, îmi propun să folosim acesta:

Aici puteți vedea că blocul cu text are clasa text-dec. Prin aceasta vom accesa elementul nostru în css, aplicând la acesta proprietățile necesare. Deci, cum să faci o lovitură subțire:

Text-dec( dimensiunea fontului: 50px; culoare: galben; text-shadow: 1px 1px 0 negru, -1px -1px 0 negru)

Să setăm imediat o dimensiune mare a fontului, astfel încât totul să fie vizibil foarte clar, iar culoarea textului să fie galbenă, de exemplu. A treia linie în cazul nostru implementează chiar acea lovitură.

Proprietatea text-shadow vă permite să adăugați o umbră textului; puteți adăuga oricâte umbre doriți, separate prin virgule. Sintaxa proprietății este:

Text-umbră: offset orizontal | verticală | estompare | culoare

În cazul nostru, mai întâi setăm un mic decalaj în jos și la stânga, apoi în sus și la dreapta. Drept urmare, textul a fost conturat de-a lungul întregului său contur. Dacă adăugați o estompare de 10 pixeli la fiecare umbră, va arăta astfel:

Accident vascular cerebral neclar

O altă abordare este să nu specificați deloc un offset, ci să definiți o neclaritate - atunci textul va fi și el conturat, dar nu clar. Să adăugăm același text exact la html, dar să setăm o clasă de stil diferită - text-dec2:

Text-dec2( dimensiunea fontului: 50px; culoare: albastru; text-shadow: 0 0 7px roșu; )

Arata cam asa:

Lovitură îndrăzneață

Acest lucru este mai dificil de implementat, deoarece mișcarea prea mult a umbrelor poate face textul imposibil de citit. Și totuși se poate obține un anumit efect, deși pentru aceasta va trebui să adăugați mult mai multe umbre decât în ​​cazurile anterioare. În consecință, adăugați la html nou fragmente de text cu clasele text-dec3 și text-dec4 . Și iată stilurile pentru ei:

Text-dec3( dimensiunea fontului: 50px; culoare: galben; text-shadow: 1px 1px 0 negru, -1px -1px 0 negru, 2px 2px 0 negru, -2px -2px 0 negru, 3px 3px 0 negru, -3px - 3px 0 negru, 4px 4px 0 negru, -4px -4px 0 negru ) .text-dec4( dimensiunea fontului: 50px; culoare: galben; text-shadow: -1px 1px 0 negru, 1px -1px 0 negru, -2px 2px 0 negru, 2px -2px 0 negru, -3px 3px 0 negru, 3px -3px 0 negru, -4px 4px 0 negru, 4px -4px 0 negru )

După cum puteți vedea, textul a păstrat lizibilitatea și, în același timp, a primit un contur negru decent. Esența acestei abordări este că adăugăm treptat noi umbre, mărind decalajul cu 1 pixel de fiecare dată.

Contur și mai gros pe toate părțile

Mai departe - mai dificil. Eu personal nu știam cum să implementez corect un accident vascular cerebral pe toate părțile, dar apoi am dat peste un generator de umbre de text pe Internet, care vă permite să personalizați umbra în modul vizual și apoi trebuie doar să copiați codul acestuia. . Iată un link către generator.
Cu ajutorul lui am reușit să fac o umbră ca aceasta:

Nu voi da codul, ocupă până la 50 de linii. Cu toate acestea, căutați-vă singur în generator.

CSS nu este încă omnipotent

Pe aceasta caracteristici css se termină. Dacă doriți o lovitură frumoasă și îndrăzneață ca aceasta:
Apoi faceți-l în Photoshop și textul în sine va trebui inserat pe pagina web ca imagine

Până acum știu opțiuni precum cum să creez un contur text în CSS. Poate cunosti ceva, scrie in comentarii. Data viitoare vă voi arăta câteva efecte pe care le puteți face cu text folosind proprietatea text-shadow.

Vlad Merjevici

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

Folosind text-shadow

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

Orez. 1. Parametri 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ă translucidă format rgba. Valorile de offset pozitive aruncă umbra spre dreapta și în jos, în timp ce valorile negative ale offsetului aruncă umbra spre stânga și, respectiv, în sus. Pentru a avea o umbră în jurul textului, trebuie doar să setați valorile de offset la zero. Raza de estompare stabilește cât de clară va fi umbra. Cum raza mai mare estompare, 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ă vă permite practic să creați diferite efecte.

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

Textul contur se caracterizează prin faptul că fiecare literă este înconjurată de o linie, a cărei culoare diferă de culoarea textului (Fig. 2). Acest efect arată cel mai bine cu fontul sans serif. marime mare, de exemplu, titluri. Pentru textul corpului, folosirea unui contur afectează doar lizibilitatea.

Orez. 2. Contur textul

Un contur poate fi creat folosind două metode. În prima metodă, setăm un offset de umbră 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 se dovedește a fi 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 clare de aceeași culoare, acestea fiind deplasate în unghiuri diferite cu un pixel (exemplul 2).

Exemplul 2. Patru umbre pentru contur

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

Contur textul

Aspectul 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, mai degrabă decât pentru corpul unei pagini web.

Numărul de umbre depinde de cât de mult doriți să „trageți” textul înainte. Cantitate mare crește „adâncimea” literelor, mai puțin, dimpotrivă, reduce tridimensionalitatea. Exemplul 3 folosește cinci umbre de aceeași culoare.

Exemplul 3: Umbrire pentru a adăuga tridimensionalitate

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

Frigider cu zece camere

Pentru toate umbrele setăm raza de estompare la zero și aceeași culoare. Umbrele diferă doar prin valorile de 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 pare să fie 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 - mutăm umbra albă în sus la stânga cu un pixel, iar pe cea 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 fundal gri, deci efectul nu este potrivit pentru toată lumea schema de culori site-ul. Apropo, este ușor să fii apăsat mai degrabă decât textul extrudat; doar schimbă culorile umbrelor.

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, trebuie doar 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 ar trebui să fie setată la zero. În fig. Figura 6 prezintă un exemplu de strălucire în diferite 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ăsăm doar umbra și ascundem textul în sine, vom obține litere neclare (Fig. 7), iar gradul de estompare poate fi ajustat cu ușurință folosind parametrul text-shadow.

Orez. 7. Text cu estompare

A se ascunde text original este suficient să setați culoarea ca transparentă (exemplul 6). Culoarea umbrei acționează apoi ca culoarea textului, iar raza de estompare stabilește gradul de estompare al literelor.

Exemplul 6: estomparea textului

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

Text neclar

Umbra și pseudo-clase

Umbra nu trebuie adăugată direct textului; proprietatea text-shadow se joacă frumos cu pseudo-clasele :hover și :first-litera. Datorită acestui lucru obținem efecte interesante cu text precum conturul primei litere a unui paragraf sau strălucirea unui link atunci când treceți 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 canalul 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, desigur, respinge în mod spontan PR-ul convergent, câștigând un segment de piață. Investiția sincronizează rolul statut social, crescând concurența. Marcă determină în mod natural planul de plasare, folosind experiența campaniilor anterioare.

chenar CSS elementul este una sau mai multe linii care înconjoară conținutul elementului și a acestuia căptușeală. Cadrul este setat folosind proprietate scurtă hotar . Stilul cadrului este setat folosind trei proprietăți: stil, culoareȘi lăţime.

Decorarea cadrelor și chenarelor elementelor HTML folosind proprietăți CSS

1. Stil de chenar

În mod implicit, marginile sunt întotdeauna desenate deasupra fundalului elementului, cu fundalul extinzându-se până la marginea exterioară a elementului. Stilul cadrului determină afișarea acestuia; fără această proprietate, cadrele nu vor fi vizibile deloc. Pentru un element, puteți seta un chenar pentru toate părțile simultan folosind proprietatea stil bordur sau pentru fiecare parte separat folosind proprietățile de calificare stil bordur, etc. Nu moștenit.

stil de bordura (stil de margine de sus, stil de margine din dreapta, stil de margine de jos, stil de margine din stânga)
Valori:
nici unul	Valoarea implicită înseamnă că nu există cadru. De asemenea, elimină cadrul unui element dintr-un grup de elemente cu valoarea acestei proprietăți setată.
ascuns	Echivalent cu niciunul.
punctat	punctat
întreruptă	întreruptă
solid	solid
dubla	dubla
canelură	canelură
creastă	creastă
medalion	medalion
început	început
{1,4}	Afișarea a patru stiluri diferite pentru chenarul unui element simultan, doar pentru proprietatea stil de chenar: (stil chenar: solid punctat niciun punctat;)
iniţială
moşteni

Sintaxă

P (stil chenar: solid;) p (stil chenar: solid;)

2. Culoarea cadrului chenar-culoare

Proprietatea stabilește culoarea cadrelor pe toate părțile în același timp. Folosind proprietățile de clarificare, puteți seta o culoare diferită pentru marginea fiecărei părți a elementului. Dacă nu este specificată nicio culoare pentru cadru, aceasta va fi aceeași cu culoarea textului elementului. Dacă nu există text în element, atunci culoarea chenarului va fi aceeași cu culoarea textului element părinte. Nu moștenit.

chenar-culoare (culoare-chenar-sus-culoare, chenar-culoare-dreapta, chenar-culoare-jos, chenar-culoare-stânga)
Valori:
transparent	Se instalează culoare transparentă pentru cadru. În același timp, lățimea cadrului rămâne. Poate fi folosit pentru a schimba culoarea chenarului atunci când treceți mouse-ul peste un element pentru a evita deplasarea elementului.
culoare	Culoarea cadrelor este setată folosind valorile proprietății. (culoare-chenar: #cacd58;)
{1,4}	Listarea a patru culori diferite pentru marginile unui element simultan, doar pentru proprietatea border-color: (culoare-chenar: #cacd58 #5faf8a #b9cea5 #aab238;)
iniţială	Setează valoarea proprietății la valoarea implicită.
moşteni	Moștenește valoarea proprietății de la elementul părinte.

Sintaxă

P (culoare-chenar: #cacd58;)

3. Lățimea chenarului

Lățimea cadrului este specificată folosind unități de lungime sau Cuvinte cheie. Dacă proprietatea de tip bordur este setată la niciunul și chenarul elementului este setată la o anumită lățime, atunci în acest caz, Lățimea cadrului este setată la zero. Nu moștenit.

Sintaxă

P (lățimea chenarului: 2px;)

4. Setarea unui cadru cu o singură proprietate

Proprietatea border vă permite să combinați următoarele proprietăți: border-width , border-style , border-color , de exemplu:

Div ( lățime: 100px; înălțime: 100px; chenar: 2px gri solid; )

În acest caz, proprietățile specificate vor fi aplicate la toate marginile elementului simultan. Dacă nu este specificată nicio valoare, valoarea implicită îi va lua locul.

5. Setarea unui cadru pentru un chenar al unui element

În cazul în care este necesară setarea stil diferit limitele unui element, puteți utiliza notația scurtă pentru limita corespunzătoare.
Proprietățile enumerate mai jos combină următoarele proprietăți într-o singură declarație: border-width , border-style și border-color . Lista de proprietăți este specificată într-o ordine dată, în timp ce una sau două valori pot fi sărite, caz în care valorile lor vor prelua valorile implicite.

Stilul chenarului de sus este setat folosind proprietatea border-top, bottom-border-bottom, stânga-border-left și dreapta-border-right.

Sintaxă

P (chenar-sus: 2px gri solid;)

6. Contur exterior

Proprietatea specifică o chenar exterioară în jurul elementelor (adică în afara graniței normale). Scopul principal al acestei proprietăți este de a evidenția un element. Spre deosebire de proprietatea border, aplicarea acestei proprietăți nu afectează dimensiunea sau poziția elementului, deoarece conturul este afișat deasupra blocului de elemente, ceea ce, la rândul său, poate duce la suprapunere marginile element și zonele învecinate.

De asemenea, conturul exterior, spre deosebire de cadrul elementului, înconjoară elementul pe toate părțile, încadrându-l în întregime.

Conturul exterior este întotdeauna dreptunghiular și nu urmează marginea blocului pentru care este specificată raza de margine.

Proprietatea outline vă permite să combinați următoarele proprietăți: outline-color , outline-style , outline-width . Dacă nu este specificată nicio valoare, valoarea implicită îi va lua locul.

Div ( lățime: 100px; înălțime: 100px; contur: #cacd58 solid 2px; )

6.1. stil de contur

Aspectul liniei de contur exterioare este setat în mod similar cu stilul cadrului elementului. Nu moștenit.

Sintaxă

P (stil contur: creasta;)

6.2. Culoarea conturului exterior culoarea conturului

Culoarea conturului exterior poate fi specificată numai când valoarea stabilită stil de contur. Nu moștenit.

Sintaxă

P (stil contur: creasta; culoarea contur: argintiu; )

6.3. Grosimea conturului exterior lățimea conturului

Grosimea liniei de contur exterioare este setată în mod similar cu grosimea cadrului elementului. Nu moștenit.

Sintaxă

P (stil contur: punctat; lățime contur: 5px; )

3,5 din 5

Crezi că este posibil cu câteva etichete și CSS pur a face un triunghi scalabil? Dar pentagonul? Dar o astfel de stea? Cred că mulți oameni cred că nu. De fapt este posibil.

Deci, astăzi avem un post-experiment. Ne vom juca cu toți cei cunoscuți proprietate CSS- frontieră (și toate cele legate de ea). În timpul experimentului ne vom uita la cum să facem niște poligoane simple, o stea și vom analiza un caz în care aceste tehnici pot fi utilizate în practică. Merge!

Forme geometrice simple

Deci, să începem cu exemple simple. Știi să desenezi un triunghi? folosind HTMLși CSS? Și așa:

HTML

CSS

.trapez ( vertical-align: text-bottom; )

trapez,
.poligon (afișare: -moz-inline-block; )

Poligon,
.trapez (marja:0; umplutură: 0; fundal: niciunul; )

Poligon ( lățime: 10 em; înălțime: 10 em; chenar: niciunul; afișare: bloc inline; aliniere text: centru; )
.trapez (
display: inline-block; latime: 1px; inaltime: 0; marja: 0 auto;
chenar-stânga: 5em solid transparent; chenar-dreapta: 5em solid transparent;
}

Poligon .aa ( chenar-jos: 10em solid; chenar-sus: niciunul; )

Polygon.r2 (înălțime: 0em; )

Polygon.r3 (înălțime: 8.66em; )
.poligon.r3 .trapez (latimea marginii: 8,66em 5em; )

div.eg ( lățime: 10em; fundal: #FFF; margine: 0 0; umplutură: 1em; )
div.eg .poligon (afișare: bloc; margine: 0 auto; )

R3 (culoare: roșu; dimensiunea fontului: 0.5em; )

Stea

HTML

Stea

CSS

#stea(
latime: 15em;
inaltime: 14,27em;
poziție: relativă;
}

#stele,
#stea(
afisare: bloc;
}

#top(
latime: 0;
inaltime: 0;
margine: auto;
chenar-dreapta: 4.64em solid transparent;
chenar-stânga: 4.64em solid transparent;
chenar-inferioară: 14,27em solid;
}

#centru(
latime: 5.7em;
chenar-dreapta: 4.65em solid transparent;
chenar-stânga: 4.65em solid transparent;
chenar-top: 3,36 em solid;
inaltime: 0;
poziție: absolută;
sus: 5.46em;
stânga: 0;
indicele z: 100;
text-align: centru;
}

#fund(
poziție: absolută;
jos: 0;
stânga: 2.852em;
chenar-dreapta: 4.635em solid transparent;
chenar-stânga: 4.635em solid transparent;
chenar-inferioară: 3,4em solid #fff;
latime: 0;
inaltime: 0;
}

#center span(
margin-top: -2em;
culoare: #000;
greutate font: bold;
}

a#star:hover #center span(
culoare: #fff;
culoare de fundal: transparent;
}

o stea(
culoare: #f90;
culoare de fundal: transparent;
}
a#star:hover(
culoare: #fc3;
culoare de fundal: transparent;
}

Mai multe exemple

• Pomul de Crăciun și aspectul neobișnuit de Eric Meyer;
• Dale și meniuri de la tehnologul șef al Tehnocrației;

Salutări tuturor cititorilor publicației actuale! Astăzi vă vom arăta cum să creați un contur text folosind instrumente CSS. O sa iti spun eu ce acest moment Există instrumente pentru a implementa conturarea conținutului text, cum funcționează totul browsere diferiteși bineînțeles că voi aduce exemple concrete. Acum să trecem la treabă!

Să ne întoarcem la instrumentele familiare

De mult timp și până în prezent, dezvoltatorii folosesc proprietatea text-umbră pentru a crea un contur în jurul personajelor. Dar, de fapt, elementul numit a fost conceput inițial pentru a forma umbre în jurul textului.

Datorită mecanismului flexibil de gestionare a straturilor, folosind text-umbră poți crea efecte complet diferite: text apăsat sau voluminos, transparent sau în gradient și așa mai departe. Desigur, această proprietate poate fi folosită și pentru a implementa contururi.

Avantajul instrumentului actual este că:

• este familiar pentru dezvoltatori să îl folosească;
• afișează corect, fără excepție;
• ușor de folosit;
• vă permite să creați diferite efecte pentru conținut.

Acum să ne uităm la implementare software. În am creat un antet simplu de prim nivel, iar în stilurile din cel principal am specificat parametrii de culoare și umbră a textului.

Mega super duper titlu

Cu toate acestea, în acest caz conturul este practic invizibil. Prin urmare, pregătiți-vă pentru faptul că în acesta va trebui să creați mai multe straturi:

text-shadow: 0 0 2px #010010, 0 0 3px #010010, 1px 1px 2px #010010, 2px 2px 2px #010010, 3px 3px 1px #010010;

În ciuda existenței acestui mecanism, a fost creat altul, axat în mod special pe implementarea conturului în jurul simbolurilor.

Un nou instrument pentru a rezolva problema

Printre proprietățile foilor de stil css3, a apărut una nouă, al cărei nume este -webkit-text-stroke. Proprietatea numită funcționează numai în browserele create pe motor Webkit. Aceasta înseamnă că, din păcate, nu va fi afișat în Firefox și Internet Explorer.

Vreau să vă avertizez imediat că instrumentul actual se află în așa-numita etapă experimentală. Nici măcar nu îl vei găsi în specificațiile W3C. Deși a fost descris anterior sub numele text-outline și apoi eliminat din documentație.

A lucra cu -webkit-text-stroke destul de simplu, deoarece funcționează la fel frontieră. Pentru instalare o anumită culoare-culoarea este adăugată la numele de mai sus și -width este adăugată pentru a determina grosimea. Cu toate acestea, ca și în cazul chenarului, puteți utiliza o descriere a stilului scurt. Acestea. Mai întâi specificați grosimea cursei și apoi culoarea acestuia. Pentru a înțelege mai bine materialul, să ne uităm la un exemplu.

Mega super duper titlu

După cum puteți vedea, în acest caz, cursa arată îngrijită și este mult mai ușor de creat.

Datorită acestei proprietăți, puteți crea nu numai cursul obișnuit, ci și să îl faceți translucid.

Cu toate acestea, nu uitați că atunci când utilizați text-stroke, ar trebui să aveți grijă de afișarea corectă a conținutului text în alte browsere.

Câteva cuvinte despre generatoare

Dacă nu știți ce cod să scrieți pentru a implementa un anumit design, atunci utilizați generatoare online. Ca exemplu, pot da un link http://protocoder.ru/css/strokeTextGen. Făcând clic pe el, puteți genera anumit tip contur pentru text și, de asemenea, în constructorul de mai jos, vedeți codul css rezultat.

În această notă, publicația mea a ajuns la sfârșit. Dacă ți-a plăcut materialul prezentat, te rog să mă rog cu cererile tale de abonament și nu fi lacom și distribuie link-uri interesante colegilor și prietenilor. Pa! Pa!

Cu stima, Roman Chueshov

Citit: de 79 de ori