Efekty CSS #4 - Gradienty

(c) oreuis

Hejo! Dziś poruszymy bardzo ładny (może on być też brzydki) temat gradientów. Cóż mogę o nich napisać, z ładnie dobranymi barwami każdy gradient będzie dobrze wyglądał, ah no i jeszcze trzeba wiedzieć kiedy go użyć.

Osobiście nie wykorzystuję gradientów tak często jak można byłoby się spodziewać. Ale od czasu do czasu wrzucę gdzieś jakiś malutki, ładny gradiencik, bo czemu by nie, prawda? Więc przejdźmy do omawiania ich.

Gradienty liniowy


Powyżej przedstawiłam wam tylko 6 wariacji gradientów. Są one tymi podstawowymi wersjami. Jak możecie zobaczyć są wersje pt. "to right", "to left" itp., co oznacza, że za pomocą słówka to oraz kierunku np. left tworzymy komendę, w którą stronę ma "padać" gradient, czyli

np.  .selektor { background-image: linear-gradient(to right, #kolor_lewy, #kolor_prawy); }

Gradienty promieniowy (potocznie mówiąc, okrągły)

Powyżej ponownie pokazałam tylko 6 wariacji gradientów promieniowych. Są one tymi podstawowymi wersjami, z małymi wariacjami. Jak możecie zobaczyć są wersje pt. "circle at...", co oznacza, że za pomocą frazy circle at oraz położenia np. top right tworzymy komendę, z którego miejsca ma "padać" gradient, czyli

np.  .selektor { background-image: radial-gradient(cricle at top right, #kolor_lewy, #kolor_prawy); }

Gradienty stożkowe
Gradienty te mimo wszystko są bardzo proste, jedyne co możemy dodać to from ...deg, a efekt widać na drugiej wersji na podglądzie. Zmienia nam to kąt 'padania' gradientu. Można jeszcze dodawać tak zwane stopy, żeby np. robić okrągłe diagramy. Kod wygląda wtedy następująco:

.selektor { conic-gradient(red 0 30%, green 0 70%, blue 0 100%);}

Gradienty powtarzające się
W przypadku tych należy dodać prze linear/radial-gradient wyraz repeating. Sam kod polega na stworzeniu pasków, za pomocą kolorów i stopów. Kod wygląda tak:

.selektor { background-image: repeating-linear-gradient(45deg, black, black 10px, red 10px, red 20px); }

Jeśli macie jakieś pytania możecie zadawać je tutaj lub w zakładce "Pytania"