Curs Web Development
Curs HTML
Curs CSS
Curs Javascript
Curs PHP
Curs Phyton
Curs SQL
Curs SEO

Stilizarea cutiilor cu CSS

Toate elementele HTML sunt „captive” într-o cutie, creată cu ajutorul CSS. Înțelegerea acestor cutii reprezintă cheia către realizarea de machete eficiente și flexibile în CSS.

În această secțiune, vom explora în profunzime modelul cutiei, ceea ce ne va permite să construim machete din ce în ce mai complexe și să înțelegem modul de funcționare și terminologia utilizată.

Cutii block și inline-block

În CSS există două tipuri principale de cutii: cutii de tip bloc și cutii în linie (inline), fiecare cu comportamente și caracteristici diferite, atât individual, cât și în relație cu alte elemente din pagină.

O cutie de tip bloc se comportă astfel:

Elemente precum titlurile H1 sau paragrafele p sunt, în mod implicit, de tip bloc. Acest comportament poate fi modificat prin utilizarea proprietății display cu valoarea inline.

O cutie de tip inline se comportă astfel:

Tipul de cutie aplicat unui element este definit prin valorile proprietății display: block, inline și inline-block.

Tipuri de afișaj interior și exterior

Acum este un moment potrivit pentru a explica și diferenția tipurile de afișare interioară și exterioară.

Așa cum am precizat anterior, cutiile au un tip de afișare exterioară, care indică dacă elementul este de tip block sau inline.

De asemenea, cutiile au un tip de afișare interioară, care dictează modul în care sunt dispuse elementele din interiorul acelui container.

În mod implicit, elementele din interiorul unei cutii sunt dispuse în flux normal (normal flow), ceea ce înseamnă că se vor comporta ca orice alt element de tip block sau inline.

Totuși, putem modifica tipul de afișare interioară folosind valori precum flex. Dacă aplicăm display: flex; unui element, tipul de afișare exterioară rămâne block, iar afișarea interioară devine flex. Toți copiii direcți ai acelui container vor deveni elemente flex și se vor comporta conform regulilor din specificația Flexbox, despre care vom discuta mai detaliat în secțiunile următoare.

Cel mai important aspect de reținut este că, în absența altor reguli CSS, afișarea de tip block și inline reprezintă comportamentele implicite pe web — adică acel flux normal menționat mai sus.

Mai jos avem trei elemente HTML diferite, toate având ca mod de afișare exterior tipul block:

Primul este un paragraf cu un chenar definit în CSS. Browserul îl afișează într-o cutie de tip block, ceea ce înseamnă că începe pe o linie nouă și se extinde pe toată lățimea disponibilă.

Al doilea element este o listă cu afișare flex, ceea ce stabilește un layout flexibil pentru elementele din interiorul containerului. Lista în sine rămâne de tip block, deci se extinde pe toată lățimea și este afișată pe propria linie.

Ultimul paragraf este tot de tip block, iar în interiorul lui se află două elemente span. Acestea au, implicit, afișare inline, dar unul dintre ele are atribuită o clasă care schimbă afișarea în block.

🔧 Exemplificarea tipurilor de afișare - 1

În exemplul de mai jos putem observa comportamentul elementelor de tip inline.

Elementul span din primul paragraf este, în mod implicit, de tip inline, așa că nu forțează o rupere de linie.

Avem, de asemenea, un element ul cu setarea display: inline-flex;, care creează o cutie flexibilă în jurul elementelor din interior.

În final, sunt două paragrafe cu setarea display: inline;. Containerul inline-flex și cele două paragrafe sunt afișate pe aceeași linie, în loc să creeze o rupere de linie, așa cum s-ar întâmpla dacă ar avea display: block;.

Puteți modifica diferitele tipuri de afișare pentru a observa comportamentul în diverse situații.

🔧 Exemplificarea tipurilor de afișare - 2

Ceea ce trebuie reținut din exemplele de mai sus este faptul că modificarea valorii proprietății display poate schimba modul de afișare exterioară în block sau inline, influențând astfel relațiile cu elementele din jur.

În continuare, ne vom concentra pe tipul de afișaj exterior.

Ce este modelul cutiei CSS?

Modelul complet al cutiei CSS se aplică elementelor de tip block, în timp ce elementele inline folosesc doar o parte din acest model.

Practic, acest model definește modul în care diferitele componente ale unei cutii CSS — margin, border, padding și content — interacționează pentru a forma o cutie vizibilă în pagină.

Există două variante ale modelului: modelul standard și modelul alternativ.

În mod normal, o cutie CSS este alcătuită din:

Imaginea de mai jos este edificatoare:

modelul cutiei CSS
Imagine preluată de pe developer.mozilla.org.

Modelul standard al cutiei CSS

În modelul standard, dacă setăm o lățime și o înălțime pentru o cutie, acestea definesc dimensiunile content box. Umplutura (padding) și chenarul (border) se adaugă peste aceste dimensiuni pentru a calcula dimensiunea totală a cutiei.

Presupunem că avem următoarea cutie CSS:


.box {
  width: 350px;
  height: 150px;
  margin: 25px;
  padding: 25px;
  border: 5px solid black;
}

Lățimea totală a acestei cutii este de 410px (350 + 25 + 25 + 5 + 5), iar înălțimea este de 210px (150 + 25 + 25 + 5 + 5), rezultând din adăugarea padding-ului și border-ului la dimensiunile inițiale.

modelul standard al cutiei CSS
Imagine preluată de pe developer.mozilla.org.

☞ Marginea (margin) nu este inclusă în calculul dimensiunii totale a cutiei. Ea influențează spațiul ocupat în pagină, dar este considerată exteriorul cutiei. Cutia se oprește la chenar.

Modelul alternativ al cutiei CSS

Este destul de incomod să adăugăm mereu padding și border pentru a calcula dimensiunea totală a cutiei.

Din acest motiv a fost introdus modelul alternativ al cutiei CSS.

În acest model, dimensiunea setată reprezintă dimensiunea totală a cutiei vizibile. Padding-ul și border-ul sunt scăzute din dimensiunea conținutului.

Aceeași cutie CSS de mai sus va avea, în acest caz, lățimea de 350px și înălțimea de 150px.

modelul alternativ al cutiei CSS
Imagine preluată de pe developer.mozilla.org.

În mod implicit, browserele folosesc modelul standard. Pentru a activa modelul alternativ, se utilizează proprietatea box-sizing: border-box;, care spune browserului să includă padding-ul și border-ul în dimensiunea totală.


.box {
  box-sizing: border-box;
}

Dacă doriți ca toate cutiile din pagină să folosească modelul alternativ, aplicați această regulă pe elementul html și faceți ca toate celelalte elemente să o moștenească:


html {
  box-sizing: border-box;
}
*, *::before, *::after {
  box-sizing: inherit;
}

Exersați modelele de cutii

În exemplul următor sunt două cutii CSS. Ambele au clasa .box, prin care li se aplică aceleași dimensiuni.

Singura diferență este că pentru a doua cutie a fost setat modelul alternativ al cutiei CSS.

Provocarea este să modificați dimensiunile celei de-a doua cutii, prin adăugarea de cod CSS în clasa .alternate, astfel încât să ajungă la aceeași lățime și înălțime ca prima cutie.

🔧 Exersați modelele de cutii

Utilizați DevTools pentru a vizualiza modelul cutiei CSS

Instrumentele pentru dezvoltatori din browser vă pot ajuta să înțelegeți mai bine și mai rapid modelul cutiei.

Dacă inspectați un element în Firefox DevTools, puteți vedea dimensiunea elementului, plus umplutura, chenarul și marginea.

Inspectarea unui element în acest mod este o metodă eficientă de a verifica dacă dimensiunile cutiei corespund cu ceea ce credeți că ați definit în CSS.

modelul alternativ al cutiei CSS
Imagine preluată de pe developer.mozilla.org.

Marginea-umplutura-chenarul

Probabil cunoașteți deja aceste proprietăți, dar acum le vom analiza în detaliu.

Marginea (margin)

Marginea este un spațiu invizibil din jurul cutiei, care poate împinge alte elemente din pagină.

Poate avea valori pozitive, dar și negative. Setarea unei valori negative pentru o latură poate duce la suprapunerea peste alte elemente.

Indiferent de modelul de afișare utilizat (standard sau alternativ), marginea se aplică întotdeauna după ce dimensiunea cutiei vizibile a fost calculată.

Putem controla toate marginile simultan cu proprietatea margin, sau individual, folosind forma extinsă:

În exemplul următor, încercați să modificați valorile marginilor pentru a observa efectele în pagină.

🔧 Exemplu margine cutie

Prăbușirea marginilor (Margin collapsing)

Un concept important de înțeles este cel legat de prăbușirea marginilor.

Atunci când două elemente au marginile care se ating, acestea se combină într-o singură margine, cu dimensiunea celei mai mari dintre cele două.

În exemplul următor avem două paragrafe. Paragraful superior are o margine inferioară de 50px (margin-bottom: 50px;), iar al doilea paragraf are o margine superioară de 30px (margin-top: 30px;).

Deoarece cele două elemente se ating, marginile se prăbușesc, astfel că spațiul real dintre paragrafe este de 50px, nu suma celor două margini.

Puteți testa acest comportament setând margin-top la 0 pentru al doilea paragraf — veți observa că spațiul dintre cele două paragrafe rămâne tot de 50px, cât are paragraful unu.

🔧 Prăbușirea marginilor

Există o serie de reguli care determină când marginile se prăbușesc și când nu. Este important să rețineți acest comportament, mai ales atunci când creați spațiu cu ajutorul marginilor și nu obțineți rezultatul dorit — cauza poate fi prăbușirea marginilor.

Situații complexe ale proprietății margin

Așa cum ați observat, marginile superioare și inferioare ale cutiilor CSS se pot combina într-o singură margine, aplicându-se cea mai mare dintre ele.

☞ Rețineți că marginile elementelor flotante (float) sau poziționate absolut (position: absolute) nu se prăbușesc niciodată.

Prăbușirea marginilor apare în trei situații principale:

☞ Alte situații complexe pot apărea din combinarea celor de mai sus.

Aceste reguli se aplică chiar și când marginile au valoarea 0. Astfel, marginea unui element descendent poate ieși în afara părintelui, chiar dacă marginea părintelui este zero.

În cazul marginilor negative, dimensiunea marginii prăbușite este suma dintre cea mai mare margine pozitivă și cea mai mică margine negativă.

Dacă toate marginile sunt negative, se aplică cea mai mică dintre ele. Acest comportament este valabil atât pentru elemente adiacente, cât și pentru cele imbricate.

🔧 Exemplu live

Chenarul (Border)

Chenarul — sau granița — este poziționat între margine și umplutură. Dacă se utilizează modelul standard al cutiei, chenarul este adăugat la înălțimea și lățimea cutiei. În cazul modelului alternativ, dimensiunea chenarului reduce dimensiunea content-box, deoarece ocupă o parte din spațiul total definit de lățime și înălțime.

Pentru stilizarea chenarului există numeroase proprietăți, deoarece fiecare dintre cele patru laturi poate avea un stil, o lățime și o culoare diferită.

Putem seta stilul, dimensiunea și culoarea simultan, folosind forma scurtă a proprietății border.

Pentru a seta individual stilul, lățimea și culoarea fiecărei laturi, folosim:

Pentru a controla toate laturile simultan, putem folosi:

Iar pentru a stiliza o singură latură în detaliu:

În exemplul următor am folosit atât forma scurtă, cât și forma extinsă pentru a crea chenare variate. Poți modifica valorile pentru a înțelege mai bine cum funcționează fiecare proprietate.

🔧 Exemplu chenare

Umplutura (padding)

Umplutura este spațiul dintre conținutul unui element și chenarul acestuia. Ea contribuie la lizibilitate și la estetica generală a layout-ului.

Spre deosebire de margine, umplutura nu poate avea valori negative — poate fi 0 sau orice valoare pozitivă.

Orice culoare de fundal aplicată unui element va fi vizibilă și în zona de umplutură, ceea ce o face ideală pentru a crea spațiu vizual între conținut și chenar.

Putem controla umplutura individual pe fiecare latură, folosind:

Alternativ, putem folosi forma scurtă:

padding: 10px;

În exemplul următor, puteți modifica valorile pentru clasa .box și observați cum se modifică spațiul dintre text și chenar. De asemenea, puteți ajusta umplutura pentru .container pentru a vedea cum influențează spațiul dintre container și elementul din interior.

🔧 Exemplu padding

Modelul cutiei vs. cutiile inline

Toate regulile discutate anterior se aplică complet pentru cutiile de tip block. Unele proprietăți, precum padding, margin și border, se aplică și elementelor inline, cum ar fi span, dar cu limitări.

În exemplul următor, avem un element span în interiorul unui paragraf. I-am setat lățimea, înălțimea, umplutura, chenarul și marginea. Veți observa că:

💡 Recomandare: Dacă vrei ca un element inline să respecte dimensiuni și să se comporte ca un bloc, folosește display: inline-block;.

🔧 Exemplu cutii block vs inline

Utilizarea valorii inline-block

Există o valoare specială a proprietății display, care combină comportamentele celor două tipuri principale: block și inline. Aceasta este extrem de utilă atunci când nu dorim ca un element să creeze o rupere de linie, dar vrem ca el să respecte dimensiunile setate și să evite suprapunerile, așa cum am văzut în exemplul anterior.

O cutie de tip inline-block se comportă astfel:

În exemplul următor, am aplicat display: inline-block; unui element span. Poți schimba valoarea cu block sau o poți elimina complet pentru a observa diferențele.

🔧 Exemplu cutii inline-block

Acest comportament este extrem de util, de exemplu, atunci când dorim ca un link să aibă o zonă clicabilă mai mare, prin adăugarea de padding.

Elementul <a> este, în mod implicit, de tip inline, la fel ca <span>. Prin aplicarea display: inline-block;, putem extinde zona activă a linkului, oferind o experiență mai bună utilizatorului.

Veți întâlni această tehnică frecvent în barele de navigare.

În exemplul următor, bara de navigare este afișată în linie (row) cu ajutorul Flexbox. Am adăugat padding și o culoare de fundal pentru linkuri, care se modifică la :hover.

Inițial, padding-ul pare să se suprapună peste chenarul <ul>, deoarece <a> este de tip inline. Adăugând display: inline-block; în regula .lista-link a, problema se rezolvă și spațiul este respectat corect.

🔧 Exemplu live

Fundaluri și chenare

În această secțiune vom explora ce se poate realiza cu fundalurile (background) și chenarele (border) din perspectiva creativității și a designului modern.

Stilizarea fundalurilor cu ajutorul CSS

Proprietatea background este o formă prescurtată care combină mai multe proprietăți individuale, precum background-color, background-image, background-position, background-size, background-repeat și background-attachment.

Exemplul de mai jos este complex, deoarece combină mai multe fundaluri într-o singură declarație:


.box { 
  background: linear-gradient(105deg, rgba(255,255,255,.2) 39%, rgba(51,56,57,1) 96%) center center / 400px 200px no-repeat,
              url(big-star.png) center no-repeat,
              red;
}

💡 Recomandare: Pentru fundaluri responsive, folosește background-size: cover; sau contain și evită dimensiuni fixe dacă designul trebuie să se adapteze la ecrane diferite.

Culori de fundal

Proprietatea background-color definește culoarea de fundal a unui element. Aceasta acceptă orice valoare validă de culoare și se aplică sub conținutul și umplutura elementului.

Sintaxa:

În exemplul următor, am utilizat diferite valori pentru a adăuga culoare de fundal pentru cutie, titlu și un element span.

🔧 Exemplu adăugare culori fundal

Imagini de fundal

Proprietatea background-image permite adăugarea uneia sau mai multor imagini în fundalul unui element HTML.

Imaginile sunt stivuite una peste alta: prima imagine declarată este afișată în prim-plan, iar celelalte se plasează în spatele acesteia, în ordinea în care apar în cod.

🔧 Exemplu imagini fundal stivuite
🔧 Exemplu imagini fundal multiple

În exemplul următor avem două imagini: una mai mare decât cutia și alta mai mică.

Exemplul demonstrează două lucruri:

Dacă se specifică atât o culoare de fundal cât și o imagine, imaginea va fi afișată deasupra culorii.

Este recomandat să specifici o culoare de fundal ca backup, pentru situațiile în care imaginea nu se încarcă.

🔧 Exemplu imagini fundal

Sintaxă


background-image:
  linear-gradient(to bottom, rgba(255, 255, 0, 0.5), rgba(0, 0, 255, 0.5)),
  url("../imagini/imagine.jpg");

-----------------------------

background-image: none;

💡 Recomandare: Pentru performanță optimă, folosește imagini SVG sau WebP acolo unde este posibil și evită fundaluri grele pe elemente interactive. De asemenea, folosește background-size: cover; pentru a asigura o acoperire completă și estetică pe ecrane variate.

Controlul repetării fundalului

Proprietatea background-repeat este utilizată pentru a controla comportamentul de repetare al imaginilor de fundal.

Valorile disponibile sunt:

Încercați aceste valori în exemplul de mai jos pentru a vedea efectul obținut.

🔧 Controlul repetarii imaginilor

Dimensionarea imaginilor de fundal

În exemplul de mai sus, am observat cum o imagine este decupată atunci când containerul în care se află este mai mic decât imaginea în sine.

În această situație, putem folosi proprietatea background-size, care acceptă valori de lungime sau procentaj, pentru a potrivi imaginea în fundal.

Se pot folosi și valorile:

În exemplul de mai jos, am folosit o imagine mai mare și am aplicat unități de lungime pentru a o potrivi în interiorul cutiei. Veți observa că imaginea este distorsionată.

Încercați următoarele lucruri:

🔧 Exemplu live

Poziționarea imaginii de fundal

Proprietatea background-position ne permite să alegem poziția în care apare imaginea în interiorul cutiei.

Este utilizat un sistem de coordonate în care colțul din stânga sus al cutiei este punctul (0,0), iar poziționarea se face de-a lungul axelor orizontale (X) și verticale (Y).

☞ Valoarea implicită (default) pentru proprietatea background-position este 0 0.

Cel mai frecvent, poziționarea se face cu două valori: una pentru direcția orizontală și una pentru direcția verticală.

Se pot folosi cuvinte cheie precum top, left, bottom, right:


.box {
  background-image: url("star.svg");
  background-repeat: no-repeat;
  background-position: top center;
}

Se pot folosi și valori de lungime și procente:


.box {
  background-image: url("star.svg");
  background-repeat: no-repeat;
  background-position: 20px 10%;
}

Este permis și un mix între cuvinte cheie și valori numerice:


.box {
  background-image: url("star.svg");
  background-repeat: no-repeat;
  background-position: top 20px;
}

În unele cazuri, se pot folosi patru valori pentru a indica distanța față de margini:


.box {
  background-image: url("star.svg");
  background-repeat: no-repeat;
  background-position: top 20px right 10px;
}

În exemplul următor, puteți testa aceste variante pentru a poziționa imaginea în interiorul cutiei:

🔧 Pozitionarea imaginilor

Utilizarea gradientului de culoare pentru fundal

Când se utilizează un gradient pentru culoarea de fundal, acesta se comportă ca o imagine și poate fi setat prin utilizarea proprietății background-image.

Există pe Internet generatoare de gradienți, pe care le puteți utiliza pentru a genera codul sursă, pe care apoi îl puteți copia și aplica în documentul CSS.

În exemplul de mai jos puteți vedea un gradient liniar și unul radial care se repetă.

🔧 Exemplu gradienți de culoare

Atașarea de fundal - Background attachment

O altă opțiune disponibilă pentru fundaluri este modul în care acestea se comportă atunci când se face scroll.

Acest comportament este controlat prin intermediul proprietății background-attachment, care poate avea următoarele valori:

Proprietatea background-attachment are efect doar atunci când există suficient conținut care poate fi derulat. De aceea, exemplul următor este conceput astfel încât să puteți observa diferențele dintre cele trei valori:

🔧 Atașamentul de fundal - Background-Attachment

Background - utilizarea formei scurte

Utilizarea formei scurte permite setarea tuturor proprietăților diferite, simultan.

Când se utilizează fundaluri multiple, trebuie specificate toate proprietățile pentru primul fundal, apoi, după virgulă, se adaugă următorul fundal și așa mai departe.

În exemplul următor veți vedea un gradient cu mărimea și poziția setate, apoi o imagine de fundal care nu se repetă și, în cele din urmă, o culoare de fundal.

Când se utilizează forma scurtă a proprietății background, trebuie respectate câteva reguli: 


  background: no-repeat center/80% url("../imagini/imagine.png");
🔧 Exemplu background formă scurtă

☞ Atunci când poziționați text deasupra unei imagini sau a unui fundal colorat, trebuie să aveți grijă să existe suficient contrast, astfel încât textul să fie ușor de citit de către utilizatori.

Dacă utilizați o imagine de fundal peste care plasați text, este recomandat să setați și o culoare de fundal, pentru ca textul să rămână vizibil în cazul în care imaginea nu se încarcă.

Cititoarele de ecran nu pot analiza imaginile, motiv pentru care acestea ar trebui utilizate doar în scop decorativ. Orice conținut important trebuie să fie introdus în documentul HTML și nu în fundal.

Chenare - Borders

Când am studiat modelul cutiei, am putut observa cum influențează chenarele dimensiunea acesteia. Acum vom explora cum putem folosi chenarele într-un mod creativ.

De regulă, vom utiliza forma scurtă border, în care setăm dimensiunea, tipul și culoarea chenarului într-o singură linie, aplicabilă tuturor celor patru laturi ale cutiei:


.cutie {
  border: 1px solid black;
}

Dar putem viza și o singură latură, de exemplu:


.cutie {
  border-top: 1px solid black;
}

Putem folosi și proprietăți individuale:


.cutie {
  border-width: 1px;
  border-style: solid;
  border-color: black;
}

Sau:


.cutie {
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: black;
}

Există o varietate de stiluri care pot fi utilizate pentru personalizarea chenarelor. În exemplul următor, am folosit stiluri diferite pentru fiecare latură a cutiei.

🔧 Exemplu chenare

Colțuri rotunjite

Colțurile unei cutii pot fi rotunjite prin intermediul proprietății border-radius, aceasta fiind forma scurtă. Alternativ, putem folosi forma lungă pentru a stiliza fiecare colț în parte.

Pot fi utilizate două valori (lungimi sau procente): prima pentru rotunjirea orizontală, iar a doua pentru rotunjirea verticală. Totuși, în majoritatea cazurilor se folosește o singură valoare.

De exemplu, pentru a rotunji toate cele patru colțuri, vom folosi:


.cutie {
  border-radius: 10px;
}

Pentru o singură latură, putem scrie:


.cutie {
  border-top-right-radius: 1em 10%;
}

În exemplul următor, am setat toate cele patru colțuri cu o valoare generală, apoi am modificat doar colțul din dreapta sus:

🔧 Exemplu chenare rotunjite

Forme creative cu border-radius

Proprietatea border-radius poate fi folosită nu doar pentru rotunjirea colțurilor, ci și pentru a crea forme spectaculoase, precum cercuri, capsule sau chiar forme organice. Iată câteva exemple:

🎨 Forme creative cu border-radius

Controlul revărsării cu overflow

CSS ne oferă o proprietate specială - overflow - care ne permite să controlăm comportamentul conținutului atunci când acesta depășește dimensiunile unei cutii.

Valori posibile pentru overflow:

Iată un exemplu în care folosim overflow: auto pentru a permite derularea verticală:

🔧 Exemplu overflow auto

În exemplul de mai sus, conținutul care depășește înălțimea cutiei poate fi accesat prin derulare, fără a afecta restul layout-ului.

Este recomandat să testați comportamentul overflow în diferite scenarii, mai ales când lucrați cu componente responsive sau când anticipați conținut dinamic.

Recomandări pentru o experiență accesibilă

Proprietatea overflow

Proprietatea overflow este cea care ne permite să controlăm revărsarea conținutului dintr-o cutie.

Valoarea implicită este visible, ceea ce înseamnă că vom putea vedea conținutul care depășește dimensiunile cutiei.

Pentru a ascunde conținutul revărsat, putem folosi valoarea hidden. În acest caz, conținutul care nu încape va fi complet ascuns, cu riscul pierderii de informații.

🔧 Exemplu overflow ascuns

Dacă doriți să nu pierdeți conținutul, puteți afișa bare de scroll permanent, chiar și atunci când nu există conținut revărsat, folosind overflow: scroll;.

🔧 Exemplu overflow scroll

În exemplul de mai sus, apar bare de scroll atât pe verticală, cât și pe orizontală. Totuși, dacă dorim doar bara verticală, putem folosi overflow-y: scroll.

Deschideți exemplul și înlocuiți overflow: scroll; cu overflow-y: scroll; pentru a vedea rezultatul.

De asemenea, putem afișa doar bara de scroll orizontală. Deschideți exemplul următor și decomentați linia /*overflow-x: scroll;*/.

🔧 Exemplu overflow orizontal

Totuși, metoda de mai sus nu este recomandată. Pentru a rezolva situațiile în care un cuvânt prea lung nu încape într-o cutie, se recomandă utilizarea proprietăților word-break sau overflow-wrap.

☞ Se pot afișa bare de scroll simultan pe axa X și Y, folosind două valori pentru proprietatea overflow. Prima valoare se aplică pe axa X (orizontală), iar a doua pe axa Y (verticală).

De exemplu, overflow: scroll hidden; va afișa bara de scroll pe orizontală și va ascunde conținutul pe verticală.

Dacă doriți ca barele de scroll să apară automat doar când este necesar, folosiți overflow: auto;. Astfel, browserul va decide când să afișeze barele de defilare.

În exemplul următor, decomentați linia overflow: auto; pentru a vedea comportamentul dinamic.

🔧 Exemplu overflow auto

Text care nu încape - text-overflow

În cazul în care avem un text prea lung pentru spațiul disponibil, putem controla modul în care este afișat folosind proprietatea text-overflow.

Cel mai des folosită este valoarea ellipsis, care va afișa trei puncte (…) la finalul textului tăiat.

Pentru ca text-overflow: ellipsis; să funcționeze corect, trebuie să respectăm următoarele condiții:

Iată un exemplu:

🔧 Exemplu text-overflow ellipsis

Acest tip de afișare este ideal pentru titluri, butoane sau orice element unde spațiul este limitat și nu dorim ca textul să se rupă pe mai multe linii.

☞ Dacă doriți ca textul să se încadreze pe mai multe linii, folosiți overflow-wrap: break-word; sau word-break: break-all; în loc de white-space: nowrap;.

Formatare bloc de context - Block Formatting Context (BFC)

BFC se referă la un concept din CSS, conform căruia, atunci când se utilizează proprietatea overflow: scroll; (de exemplu), se creează un mini-layout, o mini-pagină în document, cu un comportament independent. Elementele din jur nu pot intra în acea cutie și nimic din acea cutie nu poate ieși.

Acest lucru permite o derulare eficientă și consistentă în cutia care are afișate barele de scroll, fără interferențe cu elementele din jur.

Evitarea revărsării conținutului în web design

După cum vom vedea mai târziu, metodele moderne de machetare (layout) gestionează destul de bine revărsarea conținutului, deoarece au fost concepute având în vedere faptul că nu putem prezice cât conținut vom avea într-un document sau într-o cutie dintr-un document.

În trecut se utilizau înălțimi fixe, în încercarea de a alinia cutiile, care de altfel nu aveau legătură între ele, rezultând layout-uri fragile, cu dese suprapuneri de conținut.

Într-o situație ideală, nu vom utiliza înălțimi fixe pentru cutiile dintr-un document HTML.

Atunci când dezvoltați un site, trebuie să acordați o atenție deosebită situațiilor care pot genera revărsare de conținut.

Ar trebui să testați site-ul folosind diferite cantități de conținut, să modificați dimensiunea fontului și să vă asigurați că site-ul se comportă robust, iar codul CSS nu creează probleme.

Afișarea barelor de scroll este, de regulă, rezervată pentru situații cu adevărat speciale, în care chiar dorim să le afișăm.

Metode avansate de stilizare a cutiilor

În această secțiune vă voi arăta câteva tehnici și metode avansate de stilizare a cutiilor.

Umbrele cutiei - Box shadows

Proprietatea box-shadow vă permite să adăugați umbre unei cutii. La fel ca umbrele de text, acestea sunt destul de bine acceptate de către browsere, inclusiv IE9+ și Edge.

Umbră simplă

Pentru început, să ne uităm la un exemplu simplu.

🔧 Exemplu umbră simplă

Așa cum se poate vedea, valoarea proprietății box-shadow conține 4 elemente:


.simple-shadow {
  box-shadow: 10px 10px 10px rgba(0,0,0,0.7);
}
  1. Prima valoare de lungime reprezintă poziționarea (decalarea) orizontală (horizontal offset) - distanța dintre umbră și poziția cutiei, spre dreapta (valoare pozitivă) sau spre stânga (valoare negativă);
  2. A doua valoare de lungime reprezintă decalarea verticală - în jos (valoare pozitivă) sau în sus (valoare negativă);
  3. A treia valoare de lungime reprezintă raza de estompare (blur radius) - cantitatea de blur aplicată umbrei;
  4. Culoarea este dată de culoarea de bază a umbrei.

Umbre multiple

Pot fi atribuite mai multe umbre aceleiași cutii, prin separarea cu virgulă a declarațiilor multiple:


.simple-shadow {
  box-shadow: 1px 1px 1px white,
              2px 2px 1px white,
              3px 3px 1px lime,
              4px 4px 1px lime,
              5px 5px 1px black,
              6px 6px 1px black;
}
🔧 Exemplu umbre multiple

Exemplul de mai sus este unul amuzant, dar se pot crea umbre multiple cu un aspect mai realist, bazat pe mai multe surse de lumină.

Spre deosebire de text-shadow, pentru box-shadow se poate utiliza valoarea inset, ceea ce va duce la mutarea și manipularea poziției umbrei în interiorul cutiei.

În exemplul următor am configurat un buton și câteva stări ale acestuia, respectiv focus / hover / active. Butonul are o umbră implicită de culoare neagră și două umbre interioare, una albă și una neagră, plasate în colțuri opuse, pentru a-i conferi un efect interesant.

Când butonul este apăsat, starea activă face ca prima umbră să fie înlocuită de o umbră interioară, conferind aspectul apăsării butonului.

🔧 Exemplu umbre interioare

☞ Există și un alt element care poate fi adăugat proprietății box-shadow, și anume o valoare suplimentară de lungime, care se introduce chiar înainte de setarea culorii. Aceasta se numește spread radius (raza de răspândire) și face ca umbra să devină mai mare decât cutia.

Filtrele - Filters

Filtrele în CSS permit aplicarea unor efecte vizuale asupra elementelor HTML, cum ar fi estomparea, modificarea culorii, luminozitatea sau contrastul. Acestea sunt utile pentru stilizarea imaginilor, fundalurilor sau chiar a textului, oferind un plus de dinamism și expresivitate în designul web.

Exemplu simplu de filtru

În exemplul următor vom aplica un efect de estompare (blur) și de modificare a culorii (grayscale) asupra unei imagini:

🔧 Exemplu filtre CSS

Lista celor mai utilizate filtre CSS

Combinarea filtrelor

Filtrele pot fi combinate într-o singură linie, separate prin spațiu:


filter: brightness(120%) contrast(90%) sepia(30%);

☞ Filtrele CSS funcționează cel mai bine pe imagini și elemente grafice, dar pot fi aplicate și pe text sau fundaluri. Totuși, este recomandat să testați compatibilitatea în diferite browsere, mai ales dacă folosiți efecte complexe.

Dimensiunea cutiei - Proprietatea box-sizing

În mod implicit, dimensiunile unei cutii în CSS sunt calculate pe baza modelului content-box, ceea ce înseamnă că width și height se referă doar la conținutul interior, fără a include padding și border.

Acest comportament poate duce la rezultate neașteptate, mai ales când lucrăm cu layout-uri precise. Din acest motiv, se recomandă utilizarea valorii border-box, care face ca dimensiunile să includă și padding-ul și chenarul.

Compararea celor două modele

În exemplul următor, avem două cutii cu aceeași lățime, dar comportamente diferite în funcție de valoarea box-sizing:

🔧 Exemplu box-sizing

Rezultatul

☞ Este o bună practică să setați box-sizing: border-box; global, pentru a evita calcule complicate și comportamente imprevizibile.


* {
  box-sizing: border-box;
}

Stabilirea limitelor - Proprietățile min/max-width și min/max-height

Aceste proprietăți permit controlul flexibil al dimensiunilor unei cutii, prevenind situații în care elementele devin prea mici sau prea mari.

În exemplul de mai jos, avem o cutie care se redimensionează în funcție de conținut, dar nu poate fi mai mică de 150px și nici mai lată de 400px:

📐 Exemplu min/max-width

De reținut

☞ Exemplu practic: un buton care nu trebuie să fie mai mic de 100px, dar nici mai mare de 300px, indiferent de textul din interior.

Outline vs border - diferențe și utilizări în accesibilitate

Deși ambele creează un contur în jurul unui element, border și outline au comportamente diferite și scopuri distincte. border face parte din modelul de box și influențează dimensiunea elementului. outline este un contur exterior, folosit frecvent pentru evidențierea focusului, mai ales în contextul accesibilității.

În exemplul de mai jos, avem un buton cu border permanent și outline care apare la focus:

🎯 Exemplu outline vs border

De reținut

☞ Exemplu practic: un formular accesibil trebuie să evidențieze câmpurile active cu outline, nu doar cu schimbări subtile de culoare.

Defilare elegantă - Proprietatea scroll-behavior

Proprietatea scroll-behavior controlează modul în care se face defilarea în pagină. Valoarea smooth creează o tranziție lină, ideală pentru navigații moderne, fără salturi bruște.

În exemplul de mai jos, linkurile duc către secțiuni din pagină, iar defilarea se face lin datorită scroll-behavior: smooth:

Exemplu scroll-behavior: smooth

De reținut

☞ Exemplu practic: un buton „Back to top” care duce utilizatorul înapoi sus, fără șocuri vizuale.

Magie vizuală - Proprietatea backdrop-filter

backdrop-filter aplică efecte grafice (precum blur sau contrast) asupra fundalului unui element semi-transparent. Este ideal pentru interfețe moderne, unde vrei ca fundalul să rămână vizibil, dar estompat.

În exemplul de mai jos, avem o secțiune cu fundal blurat, peste o imagine:

🌫️ Exemplu backdrop-filter

De reținut

☞ Exemplu practic: un meniu fix cu fundal blurat peste conținutul paginii - elegant și ușor de citit.

Proporții precise - Proprietatea aspect-ratio

aspect-ratio permite stabilirea unui raport fix între lățimea și înălțimea unui element. Este extrem de utilă pentru imagini, videoclipuri, carduri sau orice cutie care trebuie să-și păstreze forma indiferent de conținut.

În exemplul de mai jos, avem trei cutii cu proporții diferite, dar toate se redimensionează păstrând raportul:

📐 Exemplu aspect-ratio

De reținut

☞ Exemplu practic: un grid de carduri care păstrează proporția indiferent de conținut - ideal pentru galerii sau portofolii.

Controlul imaginilor - Proprietatea object-fit

Proprietatea object-fit controlează modul în care o imagine sau un videoclip se potrivește într-un container cu dimensiuni fixe. Este extrem de utilă atunci când dorim să păstrăm proporția imaginii fără să o deformăm.

În exemplul de mai jos, avem trei imagini cu dimensiuni fixe, fiecare cu un comportament diferit:

Exemplu object-fit

De reținut

☞ Exemplu practic: imaginea de profil a unui utilizator care trebuie să rămână pătrată și să nu fie tăiată sau deformată.

Poziționarea elementelor - Proprietățile position și z-index

Cu position putem controla exact unde apare un element pe pagină. Iar cu z-index decidem cine stă „deasupra” când elementele se suprapun.

Avem trei cutii colorate care se suprapun. Fiecare are o poziție diferită și un z-index care decide ordinea:

Exemplu position + z-index

De reținut

☞ Exemplu practic: un meniu fixat în colțul paginii care rămâne vizibil la scroll, peste conținut.

Eliminarea containerului vizual - display: contents

Cu display: contents, containerul HTML dispare vizual, dar **copiii săi rămân activi** în layout și stil. Este ca și cum ai „dizolva” cutia, păstrând ce e înăuntru.

Avem două secțiuni identice, dar una folosește display: contents. Vezi diferența în stil și spațiere:

Exemplu display: contents

De reținut

☞ Exemplu practic: un wrapper folosit doar pentru organizare, dar care nu trebuie să afecteze stilul vizual.

Izolarea stilului și layout-ului - Proprietatea contain

contain este o proprietate CSS care izolează un element de restul paginii, pentru a îmbunătăți performanța și a preveni efecte neprevăzute în layout.

Avem două carduri identice. Al doilea are contain: layout style;, ceea ce îl izolează de restul layout-ului:

Exemplu contain

De reținut

☞ Exemplu practic: un widget de chat sau un card de produs care trebuie să rămână stabil indiferent de ce e în jurul lui.

🧠 Quiz - Stilizarea cutiilor cu CSS

Dimensionarea elementelor ➔

Top