Crearea unei umbre pentru text folosind CSS. Contur text folosind CSS. Conturarea textului cu CSS înseamnă: două moduri de a implementa exemplul. Contur subțire, clar

Pentru a controla chenarul unui element, utilizați proprietatea generică border. Această proprietate vă permite să setați grosimea, stilul și culoarea chenarului unui element într-o singură declarație.

Aceste trei proprietăți (grosimea chenarului, stilul chenarului și culoarea) pot fi setate într-o singură declarație. Iată un exemplu:

Puteți specifica un stil de chenar doar pe o parte a unui element. Pentru a face acest lucru, utilizați proprietățile border-top (bord superior), border-right (chenar dreapta), border-bottom ( linia de jos), margine-stânga (chenar stânga).

În acest exemplu, fiecare parte a blocului are o grosime, un stil și o culoare diferite a marginii.

Gândiți-vă cum ați putea crea o formă ca aceasta folosind CSS:

Valorile marginilor - grosimea, stilul și culoarea - pot fi setate separat folosind proprietăți speciale.

• border-style - stil de chenar.
• border-width - lățimea chenarului.
• border-color - culoarea chenarului.

Să luăm în considerare fiecare dintre valori separat.

proprietate tip graniță Stil de chenar.

Proprietatea border-style stabilește stilul chenarului. În CSS, în Diferențele HTML, marginea unui element poate fi nu numai solidă. Următoarele valori sunt acceptate pentru stilul de chenar:

1. none - fără chenar (implicit).
2. solid - chenar solid.
3. dublu - chenar dublu.
4. punctat - chenar punctat.
5. punctat - un chenar format dintr-o serie de puncte.
6. creasta - chenar „creastă”.
7. groove - margine „groove”.
8. inset - margine deprimată.
9. start - chenar extrudat.

Exemple de cum arată.

fără frontieră (niciuna)

margine solidă

chenar dublu

marginea unei serii de puncte (punctate)

margine întreruptă

marginea canelurii

marginea crestei

chenar indentat (inserat)

margine extrudată (început)

Apropo, dacă setați culoarea marginii la negru pentru cadrul de creastă, veți obține acest rezultat.

Un bloc div cu margine neagră și stil de creastă.

Cadrul pare solid, dar asta se datorează faptului că stilul de creastă este creat prin adăugarea unui efect de umbră neagră, iar efectul negru nu este vizibil pe un cadru negru.

Cu ajutor proprietăți tip chenar Stilul de chenar poate fi setat nu numai pentru toate laturile blocului. Este posibil să setați mai multe valori pentru o proprietate de tip chenar; în funcție de numărul de valori, stilul de chenar va fi atribuit număr diferit laturile blocului. Puteți seta una, două, trei sau patru valori. Să ne uităm la exemple pentru fiecare caz.

O singură valoare (solid) - stilul de chenar este setat pentru toate laturile blocului.

Două valori (dublu solid) - prima valoare setează stilul pentru părțile de sus și de jos, a doua pentru partea laterală.

Trei valori (solid dublu punctat) - prima valoare pentru partea de sus, a doua pentru laturi, a treia pentru partea de jos.

Patru valori (liniate dublu punctată) - fiecare valoare pentru o parte în sensul acelor de ceasornic începând de sus.

Proprietatea border-width. Grosimea chenarului.

Pentru a seta lățimea chenarului unui element, utilizați proprietatea border-width. Grosimea marginii poate fi specificată în orice unitate de măsură absolută, de exemplu în pixeli.

Asemenea proprietății în stil de chenar, proprietatea poate fi setată la una până la patru valori. Să ne uităm la exemple pentru fiecare caz.

Exemplu de cod:

De asemenea, pentru proprietatea border-width există valori în formular Cuvinte cheie. Sunt trei în total:

• subțire - margine subțire;
• medie - grosime medie;
• gros - chenar gros;

Grosimea chenarului: subțire.

Grosimea chenarului: medie.

Grosimea chenarului: gros.

Proprietatea chenar-culoare. Culoarea chenarului.

Pentru a controla culoarea chenarului, utilizați instrumentul pentru culoarea chenarului. Culorile pentru această proprietate pot fi setate folosind orice metodă descrisă în articolul „Culori în CSS”, și anume:

• Notația hexazecimală (#ff00aa) a culorii.
• Formatul RGB este rgb(255,12,110). format RGBA pentru CSS3.
• Formatele HSL și HSLA pentru CSS3.
• Numele culorii, de exemplu negru. Lista plina Numele de culori sunt date în tabelul de nume de culori CSS.

Proprietatea culoare-chenar poate avea, de asemenea, una până la patru valori și le tratează în mod similar cu proprietățile anterioare.

O valoare (roșu).

Două valori (roșu negru).

Trei valori (roșu negru galben).

Patru valori (roșu negru galben albastru).

Acum să revenim la problema de mai sus și să desenăm o figură:

Iată codul care desenează o astfel de cifră, doar mai mare ca dimensiune:

Setarea valorilor pentru laturi separat

S-a menționat mai sus că puteți specifica valorile proprietăților de frontieră pentru o singură parte a unui bloc. Există proprietăți în aceste scopuri:

• border-top (chenar de sus)
• granita-dreapta
• chenar-de jos
• border-left (chenar din stânga)

Permiteți-mi să vă reamintesc că pentru toate proprietățile sunt specificate trei valori (grosime, stil și culoare) în orice ordine. Dar există proprietăți care vă permit să setați separat grosimea, culoarea și stilul pentru fiecare parte. Scrierea acestor proprietăți este derivată din cele de mai sus.

Opțiuni de margine de sus (border-top).

• border-top-color - setează culoarea chenarului superior al elementului.
• border-top-width - setează grosimea marginii superioare a elementului.
• border-top-style - setează stilul chenarului superior al elementului.

Opțiuni pentru marginea dreaptă (chenar-dreapta).

• border-right-color - setează culoarea chenarului drept al elementului.
• border-right-width - setează grosimea marginii drepte a elementului.
• border-right-style - setează stilul chenarului drept al elementului.

Opțiuni de margine de jos (border-bottom).

• border-bottom-color - setează culoarea marginii de jos a elementului.
• border-bottom-width - setează grosimea marginii de jos a elementului.
• border-bottom-style - setează stilul marginii de jos a elementului.

Opțiuni pentru marginea stângă (border-left).

• border-left-color - setează culoarea marginii din stânga a elementului.
• border-left-width - setează grosimea marginii din stânga a elementului.
• border-left-style - setează stilul marginii din stânga a elementului.

Un exemplu de utilizare a acestor proprietăți:

Proprietatea frontier-raza. Colțurile de margine rotunjite.

Proprietatea border-radius are scopul de a rotunji colțurile marginilor unui element. Această proprietate a apărut în CSS3 și funcționează corect în toate browsere moderne, cu exceptia Internet Explorer 8 (și versiuni mai vechi).

Valorile pot fi orice numere utilizate în CSS.

Proprietatea chenar-rază: 15px.

Dacă cadrul blocului nu este specificat, atunci fileul are loc cu fundalul. Iată un exemplu de bloc rotunjit fără chenar, dar cu o culoare de fundal:

Proprietatea chenar-rază: 15px.

Există proprietăți pentru rotunjirea fiecărui colț individual al unui element. Acest exemplu le folosește pe toate:

Chenar-sus-stânga-rază: 15px; raza-chenar-sus-dreapta: 0; raza-chenar-jos-dreapta: 15px; raza-chenar-jos-stânga: 0;

Proprietatea chenar-rază: 15px.

Deși acest cod poate fi scris într-o singură declarație: border-radius : 15px 0 15px 0 . Faptul este că proprietatea border-radius poate fi setată de la una la patru valori. Tabelul de mai jos prezintă regulile care guvernează astfel de anunțuri.

După ce ați studiat cu atenție acest tabel, puteți înțelege că cel mai mult nota scurta stilul dorit va fi astfel: border-radius : 15px 0 . Există doar două sensuri.

Puțină practică

Desenați o lămâie folosind CSS.

Iată codul pentru un astfel de bloc:

Marja: 0 auto; /* Centrați blocul */ lățime: 200px; înălțime: 200px; fundal: #F5F240; chenar: 1px solid #F0D900; chenar-rază: 10px 150px 30px 150px;

Am desenat deja figura:

Acum să lăsăm un triunghi din el:

Codul triunghiului este:

Marja: 0 auto; /* Centrați blocul */ padding: 0px; lățime: 0px; inaltime: 0; chenar: 30px alb solid; culoarea chenarului-de jos: roșu;

chenar CSS elementul este una sau mai multe linii care înconjoară conținutul elementului și a acestuia umplutura. Chenarul este specificat utilizând proprietatea shorthand border. 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 utilizând proprietatea stil bordur sau pentru fiecare parte separat folosind proprietățile de calificare pentru stilul chenar, 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ă elementul nu are text, culoarea chenarului va fi aceeași cu culoarea textului elementului 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 cazurile în care trebuie să specificați un stil de chenar diferit pentru un element, puteți utiliza notația scurtă pentru chenarul corespunzător.
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 marginii superioare este setat folosind proprietatea border-top, jos - chenar-jos , stânga - chenar-stânga și dreapta - chenar-dreapta .

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

Proprietate chenar CSS Funcționează pentru a crea marginea unui obiect, și anume grosimea cadrului, culoarea și stilul acestuia. Această proprietate este utilizată pe scară largă în HTML. Puteți crea diverse efecte pentru a percepe mai bine conținutul paginii. De exemplu, proiectați o bară laterală, un antet de site, un meniu etc.

1. Sintaxă de margine CSS

granita: lățimea graniței chenar-stil chenar-culoare| moşteni;

• border-width - grosimea chenarului. Îl puteți seta în pixeli (px) sau utilizați valorile standard subțire, mediu, gros (difer doar în lățime în pixeli)
• border-style - stilul chenarului afișat. Poate lua următoarele valori
  • niciunul sau ascuns - anulează granița
  • punctat - cadru punctat
  • liniuță - cadru format din liniuțe
  • solid - linie simplă (folosită cel mai des)
  • dublu - cadru dublu
  • groove - chenar 3D canelat
  • creastă, inserție, început - diverse efecte de cadru 3D
  • moștenire - se aplică valoarea elementului părinte
• border-color - culoarea chenarului. Poate fi setat folosind nume specific culori sau în format RGB (vezi numele culorilor html pentru site)

Notă

Valorile din proprietatea border CSS pot fi setate în orice ordine. Secvența cea mai des folosită este „culoarea stilului de grosime”.

2. Exemple cu diferite margini CSS

2.1. Exemplu. Diferite stiluri de design de chenar-stil de chenar

stil de chenar: punctat

stil de chenar: punctat

stil de chenar: solid

chenar-stil: dublu

chenar-stil: canelura

border-style: creasta

chenar-stil: insert

border-style:început

Patru cadre diferite

stil de chenar: punctat

stil de chenar: punctat

stil de chenar: solid

chenar-stil: dublu

chenar-stil: canelura

border-style: creasta

chenar-stil: insert

border-style:început

Patru rame diferite

2.2. Exemplu. Schimbați culoarea cadrului la trecerea mouse-ului

Acest exemplu este foarte simplu, dar interesant. Acesta arată cum puteți utiliza pseudoclasa :hover și cadru CSS chenar pentru a crea efecte simple(de exemplu, pentru un meniu).

Când treceți mouse-ul peste un bloc, culoarea cadrului se va schimba

Cam asa arata pe pagina:

2.3. Exemplu. Cum să faci o chenară transparentă

Rama poate fi făcută transparentă. Acest efect este rar, dar uneori poate fi foarte util pentru web designeri. Pentru a seta transparența, trebuie să utilizați setul de culori în forma RGBA (R, G, B, P), unde ultimul parametru setează transparența ( numar real de la 0,0 la 1,0)

Cam asa arata pe pagina:

3. Grosimea chenarului: proprietatea lățimii chenarului

Setează grosimea liniei. Anterior am cerut-o descriere unificată frontieră.

Sintaxă CSS de lățime a marginii

lățimea graniței: subțire | mediu | gros | sens;

• subțire - grosimea liniei subțiri
• medie - grosime medie a liniei
• gros - grosimea liniei groase

Mai jos sunt câteva exemple. Cel mai neobișnuit lucru va fi grosimea diferită a chenarului pe fiecare parte.

lățime margine: subțire

lățime margine: medie

lățime margine: gros

Grosimi diferite la margini

Cam asa arata pe pagina:

lățime margine: subțire

lățime margine: medie

lățime margine: gros

Grosimi diferite la margini

4. Cum să faci un cadru de chenar pe o singură margine (chenar)

Proprietatea border CSS are proprietăți derivate pentru setarea chenarelor unilaterale pe un element:

• border-top - pentru a seta chenarul de sus (chenarul de sus)
• border-bottom - pentru a seta un chenar în partea de jos (chenar de jos)
• border-right - pentru a seta chenarul din dreapta (chenarul din dreapta)
• border-left - pentru a seta chenarul din stânga (chenarul din stânga)

Aceste limite pot fi combinate, de ex. Scrieți propriul cadru pentru fiecare direcție. Sintaxa este exact aceeași cu border.

Există și proprietăți

• border-top-color - setarea culorii marginii de sus
• border-top-style - setarea stilului chenarului superior
• border-top-width - setarea grosimii marginii superioare
• etc. pentru fiecare direcție

În opinia mea, este mai ușor să scrieți totul într-o linie decât să creați text suplimentar în stiluri. De exemplu, următoarele proprietăți vor fi aceleași

/* Descrierea a două stiluri identice: */

4.1. Exemplu. Cadru frumos pentru evidențierea citatelor

Exemplu de cadru citat

Cam asa arata pe pagina:

Exemplu de cadru citat

Notă
Puteți seta un chenar separat pentru fiecare parte.

5. Cum să adăugați mai multe chenare la un element html

Uneori trebuie să faci mai multe chenare. Să dăm un exemplu

5.1. Prima opțiune cu mai multe margini

Cam asa arata pe pagina:

Există o a doua cale prin umbrire.

5.2. Suprapuneți umbre pentru a crea mai multe chenaruri

Cam asa arata pe pagina:

6. Rotunjirea colțurilor la margini (border-radius)

Pentru a crea rame frumoase utilizați proprietatea CSS border-radius (disponibilă numai în CSS3). Poate fi folosit pentru a crea colțuri rotunjite, care creează un aspect complet diferit. De exemplu

7. Linie indentată CSS

Liniile apăsate pot arăta impresionant fundal întunecat, care nu este potrivit pentru fiecare site.

---

Cam asa arata pe pagina:

Pentru a accesa bordura din JavaScript, trebuie să scrieți următoarea construcție:

document.getElementById("elementID").style.border="VALOARE"

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;
greutatea fontului: 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

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

Salutări, dragi cititori. Astăzi vă voi spune și vă voi arăta cum puteți face asta cursa css text. 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ă întrebăm imediat marime mare font 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.