Ćwiczenie: Wymiary i Kolory w CSS

🎯 Cel ćwiczenia

Naucz się precyzyjnie kontrolować wygląd elementów! Wymiary i kolory to fundamenty stylowania w CSS. Poznaj wszystkie dostępne opcje i najlepsze praktyki.

Czego się nauczysz:

Jednostki wymiarów: px, %, em, rem, vw, vh i inne
Sposoby opisywania kolorów: nazwy, HEX, RGB, HSL
Funkcje CSS: calc(), min(), max(), clamp()
Właściwości: width, height, min/max-width/height
Przezroczystość i gradienty
Responsive design z jednostkami względnymi

Wymagania wstępne: Podstawowa znajomość HTML i CSS. Umiejętność tworzenia prostych selektorów.

📏 Część 1: Jednostki Wymiarów

CSS oferuje wiele jednostek do definiowania rozmiarów elementów. Wybór odpowiedniej jednostki zależy od kontekstu.

Jednostki absolutne

                    /* Jednostki absolutne - stałe wartości */
                    .element {
                        width: 300px;        /* piksele */
                        height: 2cm;         /* centymetry */
                        padding: 10mm;        /* milimetry */
                        margin: 0.5in;        /* cale */
                        font-size: 12pt;      /* punkty */
                    }
                

Demonstracja jednostek absolutnych

150px × 80px

Jednostki względne

                    /* Jednostki względne - zależą od kontekstu */
                    .container {
                        width: 80%;           /* procent rodzica */
                        height: 50vh;         /* 50% wysokości viewport */
                        padding: 2em;         /* 2 × rozmiar czcionki elementu */
                        margin: 1.5rem;       /* 1.5 × rozmiar czcionki root */
                        font-size: 16px;
                    }
                    
                    /* vw - viewport width, vh - viewport height */
                    .full-screen {
                        width: 100vw;
                        height: 100vh;
                    }
                

Demonstracja jednostek względnych

50% × 50%

40vw × 15vh

8em × 4em

8rem × 4rem

Funkcje matematyczne w CSS

                    /* calc() - obliczenia matematyczne */
                    .responsive {
                        width: calc(100% - 40px);
                        height: calc(50vh + 2rem);
                    }
                    
                    /* min(), max() - wartości minimalne/maksymalne */
                    .fluid {
                        width: min(100%, 1200px);
                        height: max(50vh, 400px);
                    }
                    
                    /* clamp() - wartość między min a max */
                    .clamped {
                        font-size: clamp(1rem, 2.5vw, 2rem);
                    }
                

🎨 Część 2: Sposoby Opisywania Kolorów

CSS oferuje wiele sposobów definiowania kolorów - od prostych nazw po zaawansowane funkcje.

Podstawowe metody definiowania kolorów

                    /* Różne sposoby definiowania tego samego koloru niebieskiego */
                    .element {
                        color: blue;               /* nazwa koloru */
                        color: #0000ff;            /* HEX - 6 znaków */
                        color: #00f;               /* HEX - 3 znaki */
                        color: rgb(0, 0, 255);      /* RGB - 0-255 */
                        color: rgb(0 0 255);        /* Nowa składnia RGB */
                        color: rgba(0, 0, 255, 0.5); /* RGB z przezroczystością */
                        color: hsl(240, 100%, 50%);    /* HSL - Hue, Saturation, Lightness */
                        color: hsla(240, 100%, 50%, 0.5); /* HSL z przezroczystością */
                    }
                

Demonstracja różnych formatów kolorów

red

#ff0000

#f00

rgb(255,0,0)

rgba(255,0,0,0.7)

hsl(0,100%,50%)

hsla(0,100%,50%,0.7)

Przezroczystość i gradienty

                    /* Właściwość opacity */
                    .transparent {
                        opacity: 0.5;  /* 50% przezroczystości */
                    }
                    
                    /* Gradienty liniowe */
                    .gradient-linear {
                        background: linear-gradient(45deg, #667eea, #764ba2);
                    }
                    
                    /* Gradienty radialne */
                    .gradient-radial {
                        background: radial-gradient(circle, #667eea, #764ba2);
                    }
                

Demonstracja gradientów

Linear Gradient

Radial Gradient

✏️ ZADANIA PRAKTYCZNE

Zadanie 1: Jednostki wymiarów

ŁATWY

Stwórz stronę używając różnych jednostek:

Kontener główny o szerokości 90% i maksymalnej szerokości 1200px
Nagłówek o wysokości 15vh z gradientem tła
Elementy nawigacji o wysokości 3rem
Treść z paddingiem 2em i marginesem 1rem

Zadanie 2: Kolory i gradienty

ŁATWY

Zdefiniuj kolory używając różnych metod:

Tło strony w kolorze jasnoszarym używając HEX
Nagłówek z gradientem od niebieskiego do fioletowego
Tekst w kolorze ciemnoszarym używając RGB
Przyciski w kolorze zielonym z 80% przezroczystością

🎮 Interaktywna Demonstracja

Eksperymentuj z różnymi ustawieniami wymiarów i kolorów:

Szerokość: 150px

Wysokość: 150px

Kolor:

Jednostka:

Podgląd

📊 Tabela Jednostek CSS

Jednostka	Opis	Przykład	Zastosowanie
px	Piksele - absolutna jednostka	width: 200px;	Stałe rozmiary, obrazy
%	Procenty - względem rodzica	width: 50%;	Layouty, responsywność
em	Względem rozmiaru czcionki elementu	padding: 2em;	Typografia, skalowanie
rem	Względem rozmiaru czcionki root	font-size: 1.5rem;	Konsystentna typografia
vw/vh	Procent szerokości/wysokości viewport	width: 50vw;	Full-screen elementy

💡 Najlepsze Praktyki

Używaj rem dla font-size - zapewnia konsystentność
% i viewport units dla layoutu - lepsza responsywność
HEX dla stałych kolorów - wydajność i czytelność
HSL dla dynamicznych kolorów - łatwe modyfikacje

📚 DODATKOWE ZASOBY

🎉 GRATULACJE!

Opanowałeś wymiary i kolory w CSS! Teraz możesz tworzyć piękne, responsywne strony.

Teraz czas na praktykę! Stwórz coś pięknego! 🎨🚀