Gradient linear-gradient
Gradient linear-gradient jest jedną z wartości właściwości background. Do działania potrzebuje dwóch wartości: koloru początkowego i koloru finalnego. Przykładowo, właściwość background: linear-gradient(red, green). Bardziej rozbudowana właściwość dzięki której utworzymy trójkolorowy gradient: background: linear-gradient(blue, red, green). Domyślnie przemieszczanie się gradientu jest z góry na dół. Możemy jednak zmieniać ten kierunek, np. background: linear-gradient(left, blue, red) – gradient od lewej do prawej. A jak gradient wyglądałby od prawego dolnego rogu do lewego górnego rogu? A tak: background: linear-gradient(bottom right, red, green). Kolejną dodatkową opcją tworzenia gradientu są stopnie, np. background: linear-gradient(260deg, green, red) - gradient z góry na dół. background: linear-gradient(190deg, green, blue) - gradient od prawej do lewej.
Spójrz na poniższy przykład z zastosowaniem gradientu linear-gradient:
Gradient radial-gradient
Gradient radial-gradient() to wartość z którą utworzymy gradient radialny – inaczej promieniowy.
Do prawidłowego działania potrzebujemy dwóch wartości: koloru początkowego i finalnego. Oczywiście można rozbudować właściwość, przykładowo: background: radial-gradient(red, blue, green, yellow)
Warto wiedzieć, że kształt naszego gradientu to elipsa. Możemy jednak zmienić tę domyślną wartość na okrąg:background: radial-gradient(circle, red, blue).
Kolejną opcją jest zmiana pozycji punktu, z którego “wydobywa się” gradient: background: radial-gradient(at x% y%, red, green)
Wartości x% i y% odpowiadają przesunięciu w osi X oraz osi Y. at to słowo kluczowe, oznaczające że kolejne wartości oznaczają miejsce od którego “rozchodzi” się gradient. Jeśli nasza właściwości będzie wyglądała następująco: background: radial-gradient(at 100% 100%, red, green) to środek gradientu znajdzie się w prawym dolnym rogu.
Spójrz na poniższy przykład jak to wygląda w praktyce:
Gradient repeating-linear-gradient
Gradient repeating-linear-gradient umożliwia nam tworzenie powtarzalnego wzoru przy użyciu gradientu. Ta opcja to po prostu ulepszona wersja właściwości linear-gradient.
Taka wersja daje nam sporo możliwości, np.: background: repeating-linear-gradient(-45deg, green 0, green 5%, yellow 0, yellow 10%) stworzy powtarzający się zielono-zółto-niebieski wzór z ostrymi krawędziami i widocznymi granicami między kolorami.
Zobacz jak działa ta konkretna właściwość:-45deg deklaruje kierunek w jakim przemieszcza się gradient,green 0 ustala rozpoczęcie się zielonego koloru,green 5% trwającego do 5% szerokości elementu,yellow 0 zeruje pozycję żółtego paska,yellow 10% sprawia, że zółta barwa zajmuje miejsce do 10% szerokości elementu
Kolejno sekwencja powtarza się aż do zapełnienia całego dostępnego miejsca, a my otrzymujemy powtarzalny gradient
Spójrz na poniższy przykład. Zobaczysz jak to wygląda w praktyce:
Gradient repeating-radial-gradient
Gradient repeating-radial-gradient to rozszerzenie właściwości radial-gradient o możliwości wielokrotnego wykonania gradientu.
Przy tworzeniu właściwości możemy wykorzystać poprzednie wartości stosowane do tworzenia gradientu radialnego. Dodatkowo deklarujemy rozprzestrzenianie się kolorów.
Spójrz na szybki przykład właściwości gradientu: background: repeating-radial-gradient(circle, green 10px, yellow 25px, blue 35px).
Spójrz teraz na przykład w praktyce:
Myślę, że o podstawowych gradientach przedstawiłem wszystko co umiem. Oczywiście można je łączyć i tworzyć kombinacje, ale to już jest zabawa.
Z góry dzięki!
Zapraszam do subskrypcji i polubienia mojego blogowo/usługowego fb oraz kanału na YouTube.
Jeżeli chciałbyś/chciałabyś wesprzeć mój blog to zapraszam -> WSPARCIE DLA BLOGA