Tot ce a schimbat
CSS3 în web.
CSS3 nu e o versiune — e o colecție de specificații independente. Aici explicăm în română tutoriale CSS3 practice pentru începători și dezvoltatori: selectori CSS, pseudo-clase CSS, box model, gradients, background-uri, tipografie, Flexbox, CSS Grid, layout responsive, transform CSS, animații CSS, hover effects și design web modern.
În acest ghid CSS3 în română vei învăța cum să fii mai rapid în dezvoltarea front-end, cum să organizezi layout-ul cu Flexbox și Grid, cum să creezi efecte vizuale elegante cu gradients și box shadow, cum să optimizezi textul și tipografia și cum să construiești animații CSS performante pentru site-uri mobile, desktop și SEO-friendly. Fiecare modul este organizat logic și explicat cu exemple practice, cod curat și aplicații directe în web design modern.
Șase module, o singură temă
Fiecare tutorial acoperă un grup de proprietăți înrudite din CSS3, cu explicație, cod și un demo alături.
Selectori
Ghid complet pentru selectori CSS, [attr], :is(),
:where(), :has(), :not(), :nth-child(),
:checked, :disabled, :focus-within,
::before, ::after, pseudo-clase CSS, validare formulare, selector de atribut,
pseudo-elemente și stilizare avansată pentru navigație, formulare și layout responsive.
Box model
Tutorial CSS3 despre border-radius, box-shadow, box-sizing,
outline-offset, overflow, border-image,
clip-path, object-fit, padding-block, aspect-ratio,
clamp(), min(), max(), contain, scroll-margin și modelul cutiei pentru
carduri moderne, layout mobile și design web profesional.
Fundaluri & culori
Gradienți CSS, linear-gradient(), radial-gradient(),
conic-gradient(), repeating-linear-gradient(), fundaluri multiple,
background-size, background-position, background-blend-mode,
mix-blend-mode, backdrop-filter, filter: blur(),
color-mix(), rgba(), hsla(), transparent, dark mode,
culori web moderne și design elegant pentru site-uri SEO-friendly.
Text
Tipografie CSS3, text-shadow, @font-face, font-feature-settings,
font-variant-numeric, line-height, letter-spacing,
text-transform, hyphens, word-break, text-wrap: balance,
text-overflow, writing-mode, user-select, fonturi web,
tipografie responsive și stiluri de text optimizate pentru SEO și UX.
Layout
Layout CSS responsive cu display: flex, display: grid, grid-template-areas,
gap, subgrid, place-items, align-self,
justify-self, order, position: sticky,
@container, aspect-ratio, minmax(), repeat(),
safe-area-inset, coloane multiple, Flexbox și Grid pentru website-uri mobile, desktop și design web profesionist.
Transformări & animații
Transform CSS, translate(), scale(), rotate(),
skew(), transform-origin, perspective,
transition, @keyframes, animation-delay,
animation-fill-mode, animation-direction, cubic-bezier(),
will-change, prefers-reduced-motion, backdrop-filter,
filter: drop-shadow(), motion path, animații CSS și micro-interacțiuni moderne pentru UX web performantă.
Tutoriale adăugate recent
Fiecare card de mai jos reprezintă un tutorial nou dintr-una dintre cele 6 secțiuni principale ale site-ului.
Selectori
Selectori avansați, :focus-visible, :lang(), :required și stilizare accesibilă pentru formulare și UI.
Box model
Border logice, scrollbar styling, outline offset și dimensiuni controlate pentru layout-uri robuste și mobile-first.
vezi tutorialul 03Fundaluri & culori
Gradiente repetitive, fundaluri fixe, image-set și overlay-uri moderne pentru ecrane Retina și design premium.
vezi tutorialul 04Text
Tracking-ul literelor, text-transform, font variant și reguli de lizibilitate pentru tipografie web modernă.
vezi tutorialul 05Layout
Grid auto-fit, place-self, dimensiuni minmax și compuneri responsiv pentru mobile, tablete și desktop.
vezi tutorialul 06Transformări & animații
Rotiri continue, glow animat, shimmer glass și micro-interacțiuni CSS fără JavaScript pentru UX fluidă.
vezi tutorialul