Conturarea textului cu CSS înseamnă: două moduri de a implementa exemplul. Crearea unei umbre pentru text folosind CSS. Contur text folosind CSS. Proprietatea frontier-raza. Colțurile de margine rotunjite

Pentru a controla marginea unui element, utilizați proprietatea generică de margine. 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), chenar-stânga (chenar din 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 - grosime, stil și culoare - 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ă margine (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ă.

fara frontiera (niciuna)

margine solidă

chenar dublu

marginea unei serii de puncte (punctate)

margine întreruptă

marginea canelurii

marginea crestei

chenar indentat (inserat)

chenar extrudat (la î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
• marginea-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-marginea-jos: roșu;

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 umbra ș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 un 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 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;

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

Proiectul de nișă încetinește canal tradițional indiferent de costuri. Structura pieței, eliminând detaliile, stabilizează departamentul de marketing și vânzări, folosind experiența campaniilor anterioare. Construirea mărcii, 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.

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; text-umbră: negru 0.1em 0.1em 0.2em)
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 celelalte 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.

Proprietatea border CSS este folosită pentru a crea chenarul unui obiect, și anume grosimea chenarului, 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. Sintaxa chenarului 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 (se deosebesc doar prin 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ă(utilizat cel mai des)
  • dublu - cadru dublu
  • groove - margine 3D canelată
  • creasta, 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 frecvent utilizată 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

border-style: 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

border-style: 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 designerii. 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 chenar: gros

Grosimi diferite la margini

Cam asa arata pe pagina:

lățime margine: subțire

lățime margine: medie

lățime chenar: 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 - setați culoarea chenarului superior
• 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 (chenar-rază)

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"