Stylowanie obrazów i efekty wizualne (cień, zaokrąglenia)

Po co się tego uczymy?

Nieostylowane zdjęcie wstawione wprost do HTML rzadko pasuje idealnie do reszty projektu — może być za duże, mieć złe proporcje względem miejsca, w którym ma się znaleźć, albo po prostu wyglądać "surowo" bez zaokrągleń i cienia, które dziś są standardem w każdym nowoczesnym interfejsie.

Teoria

Obrazy (plakaty filmów, zdjęcia produktów, awatary użytkowników) prawie zawsze wymagają dodatkowego stylowania — same w sobie mają dowolny rozmiar i kształt narzucony przez plik źródłowy.

Rozmiar obrazu:
width: 100%; — obrazek dopasowuje szerokość do rodzica (podstawa RESPONSYWNOŚCI — obrazek nigdy nie "wystaje" poza kontener).
max-width: 100%; — jak wyżej, ale obrazek nie powiększy się ponad swój oryginalny rozmiar, jeśli rodzic jest szerszy — bezpieczniejszy, częściej zalecany wybór.
height: auto; — zachowuje oryginalne proporcje obrazka przy zmianie szerokości (bez tego obrazek mógłby się "rozciągnąć").

Przycinanie i dopasowanie — object-fit: gdy ustawisz JEDNOCZEŚNIE stałą width i height różną od proporcji oryginalnego zdjęcia, obrazek domyślnie się zniekształci. object-fit: cover; każe mu wypełnić cały obszar, przycinając nadmiar (najczęściej używane dla kart produktów/plakatów), object-fit: contain; mieści cały obrazek bez przycinania (może zostawić puste pasy).

Zaokrąglone rogi — border-radius:
border-radius: 8px; — lekko zaokrąglone rogi (typowe dla kart).
border-radius: 50%; — zamienia KWADRATOWY element w idealne KOŁO — klasyczny sposób na okrągły awatar użytkownika.

Cień — box-shadow:
box-shadow: 0 4px 12px rgba(0,0,0,0.2); — cztery wartości: przesunięcie w poziomie, przesunięcie w pionie, rozmycie, kolor (zwykle półprzezroczysty czarny). Ujemne przesunięcie w pionie daje cień "do góry", dodatnie — "w dół".

Filtry graficzne — filter: krótkie wprowadzenie — filter: grayscale(100%); (odbarwienie do czerni-bieli, np. dla niedostępnego produktu), filter: brightness(0.8); (przyciemnienie).

Przykład z życia

Okrągłe zdjęcia profilowe, które widzisz w każdym serwisie społecznościowym czy komunikatorze, to zawsze zwykłe kwadratowe (albo prostokątne, przycięte przez object-fit: cover) zdjęcia z dodanym border-radius: 50%.

Kod (CSS)

.plakat-filmu {
    width: 100%;
    height: 280px;
    object-fit: cover;      /* wypełnia obszar, przycina nadmiar */
    border-radius: 12px;    /* zaokrąglone rogi plakatu */
    box-shadow:  4px 12px rgba(, , , 0.25);
}

.avatar-uzytkownika {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 50%;     /* zamienia kwadrat w koło */
    border: 2px solid white;
}

.karta-filmu {
    box-shadow:  2px 6px rgba(, , , 0.15);
    border-radius: 10px;
    overflow: hidden; /* przycina zawartość (np. obrazek) do zaokrąglonych rogów karty */
}

.film-niedostepny .plakat-filmu {
    filter: grayscale(100%); /* odbarwiony plakat dla niedostępnego filmu */
}

Komentarz i wyjaśnienie kodu

overflow: hidden; na .karta-filmu jest kluczowe — bez tego zaokrąglone rogi KARTY nie "przycięłyby" kwadratowych rogów obrazka znajdującego się w środku, więc obrazek wystawałby poza zaokrąglenie karty. object-fit: cover działa tylko wtedy, gdy element ma jednocześnie ustawione width i height — bez tego przeglądarka nie wie, do jakiego kształtu "dopasować" obrazek.

Ćwiczenie samodzielne

Dodaj do dowolnego obrazka zaokrąglone rogi (border-radius) i delikatny cień (box-shadow).

Zadania do pracy własnej

Zbuduj okrągły awatar użytkownika z dowolnego kwadratowego zdjęcia (border-radius: 50%).
Ostyluj kartę produktu tak, żeby zdjęcie wewnątrz zawsze wypełniało tę samą przestrzeń niezależnie od oryginalnych proporcji pliku (object-fit: cover), z zaokrągleniem górnych rogów karty.
Zbuduj kompletną kartę filmu: plakat z object-fit: cover i zaokrągleniem TYLKO górnych rogów (border-top-left-radius i border-top-right-radius), reszta karty (tytuł, cena) w białym tle pod spodem z zaokrągleniem dolnych rogów — całość z jednym spójnym cieniem na całej karcie.

Typowe błędy

Częsty błąd to ustawienie object-fit: cover bez jednoczesnego podania width i height — właściwość wtedy nic nie zmienia, bo nie ma do czego "dopasować" obrazka. Drugi błąd: zapomnienie overflow: hidden na kontenerze z zaokrąglonymi rogami, przez co zawartość (np. obrazek) "wystaje" poza zaokrąglenie. Trzeci: nadużywanie mocnych cieni (box-shadow z dużym rozmyciem i mocną nieprzezroczystością) na każdym elemencie strony naraz — efekt wygląda wtedy przeciążony, zamiast subtelnie podnosić hierarchię wizualną.

Nawiązanie do egzaminu zawodowego

Podobnie jak inne właściwości CSS, stylowanie obrazów nie ma osobnego efektu w INF.03.5, ale jest oczekiwanym elementem jakości wykonania w praktycznych zadaniach webowych — estetyka i spójność wizualna są realnie oceniane przy zadaniach z budową interfejsu.