KWALIFIKACJA INF3 - CZERWIEC 2022

PYTANIE NR 34.
Ilustracja przedstawia gradient liniowy, który jest płynnym przejściem kolorów od żółtego przez fioletowy, niebieski,
A.
B.
C.
D.
Wyjaśnienie poprawnej odpowiedzi:
Gradient liniowy oznacza płynne przejście między kolorami wzdłuż linii (w jednym kierunku).
Kanał alfa dotyczy przezroczystości, a nie przejścia barw.
Gradient kołowy (promienisty) rozchodzi się od środka na zewnątrz.
Zmiana nasycenia modyfikuje intensywność koloru, ale nie tworzy gradientu.

Pełne wyjaśnienie:

Gradient liniowy to efekt polegający na płynnym przechodzeniu jednego koloru w drugi (lub kilka kolorów) wzdłuż określonego kierunku – np. z lewej do prawej, z góry na dół albo pod zadanym kątem. Kluczową cechą jest to, że przejście ma charakter "wzdłuż linii", a nie od punktu centralnego.

Kanał alfa nie opisuje przejścia między kolorami, tylko przezroczystość (opacity). Dzięki niemu dany piksel/obszar może być bardziej lub mniej transparentny. To zupełnie inny wymiar niż gradient barw: można mieć gradient kolorów bez zmiany przezroczystości i odwrotnie.

Gradient kołowy (często nazywany też promienistym/radialnym) tworzy przejście kolorów wychodzące z jednego punktu (środka) i rozchodzące się na zewnątrz w kształcie okręgu/elipsy. Jest poprawnym rodzajem gradientu, ale innym niż liniowy, bo nie ma jednego, stałego kierunku przejścia na całej powierzchni – przejście zależy od odległości od środka.

Zmiana nasycenia polega na zwiększaniu lub zmniejszaniu intensywności barwy (jak "żywe" są kolory). To modyfikacja parametru koloru, ale nie tworzy automatycznie płynnego przejścia między różnymi kolorami na obszarze. Można co prawda zbudować kompozycję, w której nasycenie zmienia się w przestrzeni, ale samo pojęcie "zmiana nasycenia" nie jest synonimem gradientu liniowego.

  • Jeśli widzisz przejście w jednym kierunku – myśl: gradient liniowy.
  • Jeśli efekt wynika z przezroczystości – myśl: kanał alfa.
  • Jeśli przejście "wychodzi" ze środka – myśl: gradient kołowy/promienisty.
  • Jeśli obraz staje się bardziej "szary" lub bardziej "żywy" – myśl: nasycenie.

Dodatkowe pytania

Dodatkowe pytania (FAQ):
Gradient liniowy to płynne przejście między kolorami w jednym kierunku (np. góra–dół lub pod kątem). Używa się go m.in. do teł sekcji, przycisków i banerów, aby uzyskać łagodny efekt bez ostrych granic między barwami.
W gradiencie liniowym zmiana koloru zachodzi wzdłuż linii w ustalonym kierunku. W gradiencie kołowym (promienistym) przejście zależy od odległości od środka i rozchodzi się na zewnątrz jak fale, zwykle w okręgu lub elipsie.
Kanał alfa opisuje przezroczystość (czyli to, jak bardzo widać tło spod spodu), a gradient opisuje przejście pomiędzy kolorami. Możesz mieć gradient bez zmiany przezroczystości i możesz mieć przezroczystość bez żadnego przejścia kolorów.
Nasycenie to "intensywność" barwy: mniejsze nasycenie daje bardziej stonowany, szarawy wygląd, większe – bardziej żywe kolory. Zmienia się je przy korekcji zdjęć, dopasowaniu kolorystyki UI i poprawie czytelności elementów, ale to nie jest tworzenie gradientu.
Gradienty stosuje się m.in. w tłach nagłówków, kart, przycisków CTA, pasków postępu i banerów. Dobrze dobrany gradient może dodać głębi i hierarchii wizualnej, ale zbyt kontrastowy może pogorszyć czytelność tekstu.
Tak. Jeśli gradient ma duże różnice jasności, tekst może być czytelny tylko na części tła. W praktyce dobiera się kolory o podobnej jasności, dodaje półprzezroczystą nakładkę (alpha) albo stosuje cień tekstu, by utrzymać kontrast.
Częsty błąd to mylenie gradientu z przezroczystością (kanałem alfa) lub z korekcją koloru (nasyceniem). Pomaga zapamiętać: gradient mówi o przejściu między kolorami na obszarze, alfa o przezroczystości, a nasycenie o "żywości" barw.
Spójrz na kierunek zmian: jeśli kolor zmienia się równolegle w całym obszarze (np. wszędzie "poziomo"), to jest liniowy. Jeśli zmiana wygląda jak okręgi/elipsy od środka lub od punktu, to najpewniej gradient promienisty (kołowy).
Przezroczystość (alfa) stosuje się, gdy chcesz, by tło było widoczne spod elementu, np. w nakładkach, modalach, paskach na zdjęciu lub efektach "glass". Gradient wybierasz, gdy potrzebujesz przejścia barw w tle lub na obiekcie.
Ćwicz rozpoznawanie efektów na przykładach: gradient liniowy, promienisty, przezroczystość i nasycenie. Zrób krótkie notatki: co opisuje kolor, co przezroczystość, a co typ przejścia. Na egzaminie szukaj w pytaniu słów o "kierunku" i "przejściu".
info

Około 57% zdających odpowiada poprawnie na to pytanie. średnie

W praktyce zawodowej kluczowe jest to, że gradient liniowy oznacza płynne przejście między kolorami wzdłuż linii (w jednym kierunku).

Źródła:

  • MDN Web Docs: "linear-gradient()" (CSS), https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient - accessed 2026-03-02
  • MDN Web Docs: "radial-gradient()" (CSS), https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/radial-gradient - accessed 2026-03-02
  • MDN Web Docs: "filter: saturate()" (CSS), https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/saturate - accessed 2026-03-02

Materiały:

  • Dokumentacja właściwości tła i gradientów w technologiach webowych (materiały referencyjne)
  • Krótkie ćwiczenia: stworzenie kilku teł z różnymi gradientami i porównanie efektów
  • Notatki z teorii koloru: nasycenie, jasność, przezroczystość

Aktualizacja pytania: 31.03.2026



Aktualizacja pytania: 31.03.2026
📡 Brak połączenia internetowego