Tot ce a schimbat
CSS3 în web.
CSS3 nu este o simplă versiune — este o colecție modulară de specificații independente dezvoltate de W3C. Aici găsești documentație tehnică riguroasă în limba română, unelte vizuale interactive și exemple de cod testate pentru proiecte moderne.
Învață să stăpânești arhitectura front-end: de la alinierea dimensională cu Flexbox și CSS Grid, la efecte volumetrice cu umbre și gradiente, până la animații accelerate hardware la 60 FPS. Fiecare ghid este conceput ca o planșă tehnică, combinând teoria clară cu demonstrația vizuală imediată.
Șase module, o singură temă
Fiecare tutorial acoperă o familie de proprietăți înrudite din CSS3, cu explicație teoretică, cod sursă gata de copiat și demo vizual alăturat.
Selectori & Pseudo-clase
Ghid complet pentru selectori CSS, [attr], :is(),
:where(), :has(), :not(), :nth-child(),
:checked, :focus-within,
::before, ::after și tehnici moderne de selectare fără clase redundante.
Box Model & Structură
Stăpânește box-sizing, border-radius, box-shadow,
outline-offset, overflow, clip-path,
object-fit, aspect-ratio și dimensionarea fluidă cu clamp().
Fundaluri & Culori
Gradienți linear, radial și conic, fundaluri multiple,
background-blend-mode, backdrop-filter, efect de sticlă mată (glassmorphism),
funcția color-mix() și palete pentru Dark Mode.
Text & Tipografie Web
Tipografie avansată cu text-shadow, încărcarea fonturilor @font-face,
font-feature-settings, echilibrarea titlurilor cu text-wrap: balance,
spațierea literelor și reguli de contrast accesibil.
Layout: Flexbox & Grid
Arhitecturi moderne cu display: flex și display: grid,
rețele bidimensionale cu grid-template-areas, gap,
subgrid, poziționare sticky și Container Queries.
Transformări & Animații
Compunere hardware pe GPU cu translate3d(), scale(), rotate(),
tranziții fine, secvențe complexe @keyframes, funcții de accelerare
cubic-bezier() și optimizarea will-change.
Instrumente & Generatoare Interactive
Unelte practice concepute pentru dezvoltatori și designeri. Ajustează parametrii prin controale vizuale în timp real și copiază codul CSS optimizat direct în proiectul tău.
Generator Box-Shadow
Construiește vizual umbre elegante, reglează axe X/Y, estomparea (blur), extinderea (spread), transparența culorilor și modul inset. Include presetări populare.
deschide generatorul → TOOL 02Generator Gradiente
Creează degradeuri vectoriale liniare, radiale și conice. Ajustează unghiurile de orientare, poziția culorilor și previzualizează rezultatul instant.
deschide generatorul → TOOL 03Generator Border-Radius
Ajustează rotunjirea colțurilor pe fiecare axă sau generează forme organice fluide (blobs) utilizând sintaxa extinsă pe 8 valori eliptice.
deschide generatorul → TOOL 04Flexbox Playground
Laborator vizual pentru proprietățile containerului flex: testează direcția axei principale, alinierea conținutului, wrap și spațierea cu gap.
deschide laboratorul → RESOURCECheatsheet CSS3
Foaie de referință rapidă cu motor de căutare instant. Identifică rapid sintaxa pentru layout, box model, transformări și selectori moderni.
accesează cheatsheet-ul → TESTQuiz Interactiv CSS3
Evaluează-ți abilitățile front-end prin 10 întrebări tehnice cu explicații didactice pas cu pas și feedback în timp real pentru fiecare răspuns.
începe testul →Ghiduri Practice & Studii de Caz Aprofundate
Articole inginerești detaliate care analizează deciziile reale de arhitectură întâlnite în producție: performanță la 60 FPS, accesibilitate WCAG, Dark Mode și cele mai noi specificații W3C.
Centrarea în CSS: 7 Metode Moderne
Ghidul definitiv pentru centrare pe orizontală și verticală: Flexbox, CSS Grid (place-items), Inset cu margin: auto și transformări hardware.
CSS Variabile & Dark Mode Pur CSS
Sisteme dinamice de culori cu CSS Custom Properties, prefers-color-scheme, prevenirea FOIT la încărcare și funcția modernă color-mix().
CSS Subgrid: Aliniere Imbricată
Cum rezolvăm alinierea perfectă a elementelor din carduri vecine independente (titluri, descrieri, butoane) pe aceeași grilă părinte folosind Subgrid.
citește ghidul → GHID 04Selectorii :has(), :is() și :where()
Revoluția selectorului părinte :has() în CSS4, diferența de specificitate de la 0 la infinit între :where() și :is() și exemple practice.
clamp(), min(), max() și calc()
Design responsiv fluid bazat pe formule matematice: tipografie fluidă scalabilă, respectarea zoom-ului WCAG și layout-uri fără zeci de breakpoint-uri.
citește ghidul → GHID 06Stacking Context & z-index
De ce eșuează z-index: 99999? Mecanismul profund al ordinii de randare, proprietăți care creează contexte de stivă și salvarea prin isolation: isolate.
Meniu Hamburger Accesibil Pur CSS
Navigație mobilă responsivă completă cu zero linii de JavaScript: transformare fluidă a iconiței în cruce (X) la 60 FPS și accesibilitate completă la tastatură.
citește ghidul → GHID 08Flexbox vs CSS Grid
Când folosim Flexbox și când este recomandat CSS Grid? O analiză comparativă detaliată între abordarea unidimensională (1D) și cea bidimensională (2D).
citește ghidul → GHID 09Design Web Mobile-First
De la interogările media tradiționale (Media Queries) la noua eră a Container Queries și a arhitecturilor moderne reziliente pe ecrane de telefon mobil.
citește ghidul → GHID 10Performanță în Animații (60 FPS)
Cum randează browserele cadrele vizuale: înțelege ciclurile de Layout, Repaint și Compunere pe GPU pentru a elimina orice sacadare (jank) pe telefoane.
citește ghidul → GHID 11 • NOUCSS Container Queries (@container)
Revoluția componentelor autonome: cum stilizăm cardurile și elementele în funcție de mărimea părintelui lor, depășind limitările Media Queries.
citește ghidul → GHID 12 • NOUAnimații Scroll-Driven fără JavaScript
Bare de progres și efecte de reveal la derulare rulate direct pe GPU cu animation-timeline: scroll() și view() la 60–120 FPS.
Culorile OKLCH & Gamut Display P3
Spațiul modern de culoare cu luminozitate perceptivă uniformă: acces la spectrul vibrant P3, amestecarea cu color-mix() și palete accesibile.
De ce css3.ro? Precizie, Standarde și Independență
Web designul front-end modern s-a complicat excesiv prin adăugarea de nenumărate pachete și framework-uri masive pentru sarcini pe care CSS nativ le poate rezolva astăzi în doar câteva linii de cod elegant.
Standarde W3C Directe
Toate explicațiile se bazează pe specificațiile oficiale publicate de World Wide Web Consortium, fără interpretări greșite sau trucuri perimate.
Zero Dependințe Externe
Demonstrăm cum poți crea layout-uri fluide, efecte vizuale de excepție și animații netede fără biblioteci JavaScript greoaie.
Licență Liberă MIT
Toate fragmentele de cod prezentate sau generate pe site sunt 100% gratuite și libere de utilizat în proiectele tale personale sau comerciale.