Crearea unei umbre pentru text folosind CSS. Contur text folosind CSS. CSS: chenar. Limitele elementelor

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 ca 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.

Mulțumită această proprietate 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 abonare și nu fi lacom și distribuie link-uri interesante colegilor și prietenilor. Pa! Pa!

Cu stima, Roman Chueshov

(Fără evaluări încă)

Desigur, puteți crea frumusețe în Photoshop, dar ce se întâmplă dacă trebuie să salvați textul și să nu-l lipiți cu o imagine frumoasă?

De exemplu, pentru o indexare mai bună, am vrut să fac textul titlului în etichete

. Dar, în același timp, menține frumusețea. Ca aceasta:

Deci, hai să facem niște text cu o umbră folosind CSS:

Nivelul 3 CSS are proprietatea „text-shadow” pentru a adăuga o umbră la fiecare literă a oricărui text.

1. Cea mai simpla forma: h3 (text-umbră: 0.1em 0.1em #333)
2. Umbre neclare ale textului: h3.b (text-umbră: 0.1em 0.1em 0.2em negru)
3. Lizibil text alb: h3.a (culoare: alb; umbră text: negru 0,1 em 0,1 em 0,2 em)
4. Umbre stratificate: h3 (text-umbră: 0.2em 0.5em 0.1em #600, -0.3em 0.1em 0.1em #060, 0.4em -0.3em 0.1em #006)
5. Desenarea literelor și a contururilor: h3 (umbră text: -1px 0 negru, 0 1px negru, 1px 0 negru, 0 -1px negru)
6. Neon Glow: h3.a (text-shadow: 0 0 0.2em #8F7) h3.b (text-umbră: 0 0 0.2em #F87, 0 0 0.2em #F87) h3.c (text-umbră: 0 0 0.2em #87F, 0 0 0.2em #87F, 0 0 0.2em #87F)

Un alt exemplu interesant:

Conturarea textului cu CSS

Este posibil să conturați text folosind CSS fără a recurge la scripturi. Acest efect poate fi creat folosind proprietatea text-shadow. Deși IE nu acceptă această proprietate în niciuna dintre versiunile sale, în altele browsere populare Rețeta descrisă va funcționa excelent.

Luați în considerare codul de mai jos:

Exemplul nr. 1

H1(text-shadow: roșu 1px 0px, roșu 1px 1px, roșu 0px 1px, roșu -1px 1px, roșu -1px 0px, roșu -1px -1px, roșu 0px -1px, roșu 1px -1px;)

Primul parametru al proprietății text-shadow setează culoarea umbrei, al doilea offset-ul orizontal al umbrei în raport cu textul, al treilea offset-ul vertical. Când specificați o compensare a umbrei în toate direcțiile din jurul textului cu 1 pixel pe rând, obțineți efectul de contur.

Exemplul de accident vascular cerebral nr. 1

Pentru a face cursa mai saturată, puteți utiliza al patrulea parametru text-shadow, care este responsabil pentru raza de estompare a umbrei:

Exemplul nr. 2

H1(text-shadow: roșu 1px 0px, roșu 1px 1px, roșu 0px 1px, roșu -1px 1px, roșu -1px 0px, roșu -1px -1px, roșu 0px -1px, roșu 1px -1px, roșu 0 0 3px, roșu 0 0 3px, roșu 0 0 3px, roșu 0 0 3px, roșu 0 0 3px, roșu 0 0 3px, roșu 0 0 3px, roșu 0 0 3px;)

Exemplul de accident vascular cerebral nr. 2

Dacă observați, proprietatea „roșu 0 0 3px” se repetă de mai multe ori. Aici se află efectul de saturație. Pentru a obține un aspect mai clar al cursei, proprietatea poate fi adăugată cu alți parametri un numar mare de o singura data. Singurul dezavantaj este că poate încetini foarte mult browserul pe computere mai slabe.

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 face text de contur, îl puteți „extruda”, puteți crea o strălucire, neclaritate ș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 valori zero decalaje. 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;

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 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 joacă frumos cu pseudo-clasele :hover și :first-letter. 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.

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 aceasta). Î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.ex. .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(
margine-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;