CSS rozszerzony - animacje i nowoczesny CSS
Wyjdź poza egzamin: animacje, zmienne CSS, nowoczesne layouty
Mini-kurs dla chętnych: przejścia i animacje, transformacje 2D, @keyframes, zmienne CSS, funkcje calc/clamp, zaawansowany CSS Grid i efekty wizualne. Materiał wykracza poza zakres egzaminu INF.03 - dla tych, którzy chcą pisać naprawdę nowoczesny CSS.
Moduły kursu
M1 Przejścia i animacje 4 lekcji
-
Przejścia CSS (transition)
Jak tworzyć płynne przejścia między stanami elementu. Właściwości transition-property, duration, timing-function i delay. Efekty hover bez JS.
-
Transformacje 2D (transform)
translate, scale, rotate, skew - przemieszczanie, skalowanie i obrót elementów w płaszczyźnie. transform-origin i łączenie transformacji.
-
@keyframes i właściwość animation
Tworzenie animacji wielokrokowych: definicja @keyframes, właściwości animation-name, duration, iteration-count, direction, fill-mode.
-
Wydajność animacji i prefers-reduced-motion
Dlaczego animować transform i opacity (compositing GPU). prefers-reduced-motion - dostępność. will-change - kiedy stosować ostrożnie.
M2 Nowoczesny CSS 4 lekcji
-
Zmienne CSS (custom properties)
Custom properties: --nazwa: wartość, var() z fallbackiem. Dziedziczenie przez DOM, nadpisywanie w selektorach, motywy dzień/noc. CSS bez preprocesora.
-
Funkcje CSS: calc(), min(), max(), clamp()
Matematyka w CSS bez JavaScript: calc() dla mieszanych jednostek, min/max dla adaptacyjnych wartości, clamp(min, ideal, max) - idealne dla responsywnej typografii.
-
Zaawansowany CSS Grid
grid-template-areas z nazwami, auto-fit i auto-fill, minmax() - responsywne siatki bez media queries. repeat() z auto-fit jako nowoczesna alternatywa dla ręcznych breakpointów.
-
Container Queries - nowy standard
@container i container-type: inline-size. Różnica od media queries: reagowanie na rozmiar kontenera, nie okna. Komponenty naprawdę reużywalne.
M3 Efekty i detale 4 lekcji
-
Gradienty: linear-gradient i radial-gradient
Tworzenie gradientów kolorów: linear-gradient (kierunek, color-stops), radial-gradient, wzmianka o conic-gradient. Zastosowania: hero sekcje, przyciski, obramowania gradientowe.
-
Filtry, backdrop-filter i mix-blend-mode
filter: blur, brightness, contrast, grayscale, sepia - efekty na elementach. backdrop-filter: rozmycie tła za elementem. mix-blend-mode: mieszanie warstw.
-
Zaawansowane pseudoelementy i dekoracje
::before i ::after z content i pozycjonowaniem - ozdoby, cytaty, ikony. ::selection - stylowanie zaznaczonego tekstu. Dekoracje typograficzne.
-
Co dalej? Sass, Tailwind i frameworki CSS
Podsumowanie kursu i ścieżki dalszego rozwoju: SCSS/Sass - preprocesor CSS. Tailwind CSS - utility-first. CSS-in-JS. Gdzie uczyć się dalej.