Box Model în CSS3: Ghid Tehnic și Stilizare Avansată

Cum rotunjești colțurile casetelor fără imagini

În era Web 2.0, realizarea de colțuri rotunjite necesita tăierea a 4 imagini PNG individuale și poziționarea lor migăloasă în colțurile containerelor. Proprietatea border-radius din CSS3 permite specificarea unei raze de curbură în pixeli, procente sau rem direct în foaia de stiluri.

Poți seta o rază unică pentru toate cele 4 colțuri sau poți defini raze individuale (stânga-sus, dreapta-sus, dreapta-jos, stânga-jos) pentru a crea forme asimetrice elegante (cum ar fi carduri cu filă de dosar sau cercuri perfecte cu border-radius: 50%).

/* Colturi rotunjite simetrice */
.card {
  border-radius: 12px;
}

/* Tab de navigare (rotunjire doar sus) */
.tab {
  border-radius: 10px 10px 0 0;
}

/* Avatar circular perfect */
.avatar {
  border-radius: 50%;
}

Adăugarea umbrelor exterioare și interioare (Drop Shadow)

Proprietatea box-shadow oferă adâncime vizuală (profunzime 3D) elementelor din pagină. Aceasta primește offset orizontal, offset vertical, rază de estompare (blur), rază de extindere (spread) și culoarea umbrei (folosind de regulă valori RGBA cu transparență).

Adăugarea cuvântului cheie inset inversează direcția umbrei, proiectând-o în interiorul casetei — o tehnică foarte utilizată pentru câmpuri de formular apăsate sau efecte de sticlă adâncită.

/* Umbra exterioara difuza pentru carduri elevat */
.card-elevat {
  box-shadow:
    0 10px 20px rgba(0,0,0,.12),
    0 2px 4px rgba(0,0,0,.08);
}

/* Umbra interioara (inset) */
.caseta-adancita {
  box-shadow: inset 0 2px 6px rgba(0,0,0,.25);
}

Dimensiuni previzibile cu box-sizing: border-box

În modelul tradițional de cutie (content-box), dacă setai un container la width: 300px și adăugai padding: 20px și border: 5px solid, lățimea totală randată devenea 350px (stricând grila de layout).

Proprietatea box-sizing: border-box forțează browserul să includă padding-ul și bordura ÎN LĂȚIMEA declarată. Din acest motiv, regula universală * { box-sizing: border-box; } este considerată piatra de temelie a oricărui proiect web modern.

/* Resetare universala recomandata */
*, *::before, *::after {
  box-sizing: border-box;
}

.box {
  width: 200px;
  padding: 20px;
  border: 4px solid #d6472e;
  /* Latimea ramane fix 200px pe ecran! */
}

Distantierea conturului de bordura elementului

Spre deosebire de border care consumă spațiu în layout, outline se desenează deasupra elementului fără să afecteze dimensiunile cutiei. Cu outline-offset, poți îndepărta sau apropie această linie de contur.

.buton:focus-visible {
  outline: 2px solid #6ea8d8;
  outline-offset: 4px; /* Spatiu intre buton si linie */
}

Controlul redimensionării elementelor de către utilizator

Proprietatea resize permite sau blochează posibilitatea ca vizitatorul să tragă de colțul unui element (cum ar fi un câmp de text <textarea>) pentru a-i schimba dimensiunea. Valori disponibile: both, horizontal, vertical, none.

textarea {
  resize: vertical; /* Permite doar redimensionare pe inaltime */
  min-height: 80px;
}

Gestionarea conținutului ce depășește containerul

Când conținutul interior este mai mare decât dimensiunea fizică a casetei, overflow decide comportamentul: hidden (taie excesul), scroll (adaugă bară permanentă) sau auto (afișează bară doar dacă este necesar). CSS3 permite control independent pe axe cu overflow-x și overflow-y.

.container-scroll {
  max-height: 100px;
  overflow-y: auto;
  overflow-x: hidden;
}

Borduri spectaculoase din imagini sau gradiente CSS

Proprietatea border-image vă permite să folosiți o imagine sau un gradient CSS3 ca bordură pentru un element. Aceasta combină sursa (source), felieria (slice) și modul de repetare (repeat).

.bordura-gradient {
  border: 10px solid transparent;
  border-image: linear-gradient(45deg, #d6472e, #e8b339) 1;
}

Stilizarea elementelor rupte pe mai multe linii

Când un element inline (cum ar fi un text subliniat cu fundal) se frânge pe mai multe rânduri, box-decoration-break: clone aplică padding, border și border-radius pe FIECARE linie separat.

.text-evidentiat {
  background: #d6472e;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

Decuparea elementelor în poligoane și cercuri

clip-path este o unealtă extrem de puternică ce decupează fizic o cutie HTML în forme geometrice personalizate: poligoane (polygon()), cercuri (circle()) sau căi vectoriale SVG.

/* Decupare diamant / romb */
.forma-romb {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

/* Decupare cercul */
.forma-cerc {
  clip-path: circle(50% at 50% 50%);
}

Încadrarea imaginilor responsive fără distorsionare

Imaginile <img> cu dimensiuni fixe se pot deforma dacă raportul lor de aspect variază. Cu object-fit: cover, imaginea umple cadrul menținându-și proporțiile (la fel ca background-size: cover).

img.avatar-profil {
  width: 80px;
  height: 80px;
  object-fit: cover;
  object-position: center;
  border-radius: 50%;
}

Stilizarea modernă bazată pe direcția de citire

Proprietățile logice înlocuiesc direcțiile fizice (left/right/top/bottom) cu concepte adaptabile la modul de scriere. margin-inline: auto este metoda modernă recomandată de a centra elemente pe orizontală.

.card-centrat {
  margin-inline: auto; /* Centrare stanga + dreapta */
  padding-block: 16px; /* Spatiere sus + jos */
  max-width: 300px;
}

Padding vertical și orizontal fără a scrie două reguli

Proprietățile logice padding-block și padding-inline reduc codul repetitiv, pentru că se adaptează automat la direcția de scriere a documentului.

.card {
  padding-block: 18px;
  padding-inline: 20px;
}

Contururi decorative fără a modifica dimensiunea cutiei

outline este ideală pentru focus states, because it does not influence layout. Layouts stay stable even when marking a rejected or selected widget.

.buton:focus-visible {
  outline: 3px solid #6ea8d8;
  outline-offset: 3px;
}

Bordură din gradient sau imagine fără a folosi sprite-uri

În loc să adaugi patru miniaturi, poți folosi border-image-source pentru a crea margini decorative fluide și profesioniste, inclusiv pe carduri și butoane.

.card {
  border: 8px solid transparent;
  border-image-source: linear-gradient(135deg,#d6472e,#e8b339);
  border-image-slice: 1;
}

Masca de margine pentru formă avansată

mask-border permite o bordură complexă, dintr-o imagine sau un gradient, fără a obliga browserul să păstreze o tradiție rigidă de lățime sau stil.

.element {
  border: 12px solid transparent;
  border-image: linear-gradient(135deg,#d6472e,#e8b339) 1;
}

Dimensiuni responsive fără calc manual

Funcția clamp() ajută la definirea dimensiunilor în funcție de intervale, de exemplu o dimensiune de text sau lățime care crește treptat între minim și maxim.

.titlu {
  font-size: clamp(1.2rem, 2vw, 2.5rem);
}

Controlul proporțiilor fără înălțime fixă

aspect-ratio definește proporția dintre lățime și înălțime, fiind ideală pentru carduri de conținut, fotografii și demo-uri interactive.

.poster {
  aspect-ratio: 4 / 3;
  width: 220px;
}

Calcularea automată a dimensiunilor

Funcțiile min() și max() simplifică constrângerile responsive, alegând automat valoarea minimă sau maximă dintre combinații de unități.

.container {
  width: min(90vw, 700px);
  height: max(150px, 20vh);
}

Îmbunătățirea performanței prin izolarea layout-ului

Proprietatea contain spune browserului să izoleze modul în care un element afectează layout-ul, stilizarea și renderizarea restului paginii.

.widget {
  contain: layout paint style;
}

Controlul zonei de decupare a conținutului

Cu overflow-clip-margin poți controla spațiul dintre marginea unui element și zona de decupare a conținutului care este ascuns, util pentru efecte precise în galerii și carusele.

.photo {
  overflow: hidden;
  overflow-clip-margin: 12px;
}

Alinierea automată a secțiunilor la scroll

scroll-margin adaugă un spațiu de compensare în jurul unui element de la care browserul vrea să facă focus la derulare. În practică, este utilă când o secțiune se poziționează automat în vizor și nu trebuie să fie acoperită de un header fix, de un meniu sau de alte elemente de interfață. În acest exemplu, click-ul asupra butonului mută vizualizarea în interiorul containerului, fără a derula întreaga pagină.

.secțiune:target {
  scroll-margin-top: 18px;
}

.container {
  overflow: auto;
  scroll-behavior: smooth;
}

Trunchierea textului după un număr de rânduri

line-clamp este util pentru carduri de articole, previzualizări și liste de conținut, unde un text mai lung trebuie tăiat elegant după un număr fix de rânduri fără a rupe layout-ul. Pe mobil sau în cardurile compacte, această tehnică ajută la păstrarea unui aspect uniform și la evitarea blocurilor prea înalte, fără a pierde informația principală din primii trei rânduri.

.preview {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-height: calc(3 * 1.4em);
}

Poziționarea bazată pe direcția de citire

Proprietățile inset-inline și inset-block permit poziționarea logică a elementelor fără a fi legate de stânga-dreapta fizică.

.badge {
  inset-inline-start: 12px;
  inset-block-start: 8px;
}

Spațiere logică și adaptare la direcția de citire

Proprietățile padding-inline și margin-inline sunt mult mai flexibile decât padding-left sau margin-right, deoarece se adaptează la direcția de citire a limbii.

.cta {
  padding-inline: 1.25rem;
  margin-inline: auto;
}

Borduri logice pentru layout-uri multi-limbă

Cu border-inline și border-block poți controla marginile fără să te bazezi pe stânga-dreapta fizică. Acest lucru ajută mult în designurile i18n și în ghidurile de accesibilitate.

.note {
  border-inline: 2px solid #6ea8d8;
  border-block: 1px solid #d6472e;
}

Controlul dimensiunilor fără calc manual

Proprietățile min-width / max-width și versiunea logică min-inline-size / max-block-size ajută la construcția unor componente scabile și robuste pe mobil.

.card {
  min-inline-size: 180px;
  max-inline-size: 360px;
}

Separarea straturilor pentru efecte vizuale robuste

isolation: isolate creează un nou context de stacking, ceea ce previne suprapunerile nedorite și ajută la efecte de transparență, overlay și blur.

.glass-panel {
  isolation: isolate;
  background: rgba(255,255,255,.12);
}

Contururi vizibile fără a modifica layout-ul

Conturul CSS este util pentru focusare, notificări și elemente interactive. Cu outline-offset poți distanța conturul de element fără a afecta dimensiunea reală a box-modelului.

.focus-ring {
  outline: 2px solid #e8b339;
  outline-offset: 4px;
}

Personalizarea barei de scroll

Proprietatea scrollbar-color permite să stilizezi bara de scroll pentru browser-ele care o acceptă, fără a recurge la soluții JavaScript sau pseudo-elemente complexe.

.panel {
  scrollbar-color: #d6472e #efe7d6;
  scrollbar-width: thin;
}

Colțuri logice adaptate la limbă

Proprietățile logice de colțuri, precum border-start-start-radius, se ajustează în funcție de direcția de citire și fac designul mult mai robust în proiectele internaționale.

.card {
  border-start-start-radius: 12px;
  border-end-end-radius: 18px;
}