Gradienty CSS
Gradienty CSS umożliwiają wyświetlanie płynnych przejść między dwoma lub więcej określonymi kolorami.
CSS definiuje trzy rodzaje gradientów:
- Gradienty liniowe (w dół/w górę/w lewo/w prawo/ukośnie)
- Gradienty radialne (zdefiniowane przez ich środek)
- Gradienty stożkowe (obrócone wokół punktu środkowego)
Gradienty liniowe CSS
Aby utworzyć gradient liniowy, musisz zdefiniować co najmniej dwa stopnie koloru. Ograniczenia kolorów to kolory, między którymi chcesz renderować płynne przejścia. Możesz także ustawić punkt początkowy i kierunek (lub kąt) wraz z efektem gradientu.
Składnia
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
Kierunek — od góry do dołu (jest to ustawienie domyślne)
Poniższy przykład pokazuje gradient liniowy, który zaczyna się od góry. Zaczyna się na czerwono, przechodząc w żółty:
Przykład
#grad {
background-image: linear-gradient(red, yellow);
}
Kierunek — od lewej do prawej
Poniższy przykład pokazuje gradient liniowy, który zaczyna się od lewej. Zaczyna się na czerwono, przechodząc w żółty:
Przykład
#grad {
background-image: linear-gradient(to right, red , yellow);
}
Kierunek — przekątna
Możesz utworzyć gradient po przekątnej, określając zarówno poziomą, jak i pionową pozycję początkową.
Poniższy przykład pokazuje gradient liniowy, który zaczyna się w lewym górnym rogu (i przechodzi w dolny prawy). Zaczyna się na czerwono, przechodząc w żółty:
Przykład
#grad {
background-image: linear-gradient(to bottom right, red, yellow);
}
Korzystanie z kątów
Jeśli chcesz mieć większą kontrolę nad kierunkiem gradientu, możesz zdefiniować kąt zamiast wstępnie zdefiniowanych kierunków (do dołu, do góry, do prawej, do lewej, do prawej dolnej itd.). Wartość 0deg jest równoważna „do góry”. Wartość 90deg jest równoważna „do prawej”. Wartość 180 stopni jest równoważna „do dołu”.
Składnia
background-image: linear-gradient(angle, color-stop1, color-stop2);
Poniższy przykład pokazuje, jak używać kątów na gradientach liniowych:
Przykład
#grad {
background-image: linear-gradient(180deg, red, yellow);
}
Korzystanie z wielu przystanków kolorów
Poniższy przykład pokazuje gradient liniowy (od góry do dołu) z wieloma punktami zatrzymania koloru:
Przykład
#grad {
background-image: linear-gradient(red, yellow, green);
}
Poniższy przykład pokazuje, jak utworzyć gradient liniowy (od lewej do prawej) z kolorem tęczy i tekstem:
Przykład
#grad {
background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
}
Korzystanie z przezroczystości
Gradienty CSS obsługują również przezroczystość, której można używać do tworzenia efektów zanikania.
Aby dodać przezroczystość, używamy funkcji rgba() do zdefiniowania ograniczników koloru. Ostatni parametr w funkcji rgba() może mieć wartość od 0 do 1 i określa przezroczystość koloru: 0 oznacza pełną przezroczystość, 1 oznacza pełny kolor (brak przezroczystości).
Poniższy przykład pokazuje gradient liniowy, który zaczyna się od lewej. Zaczyna się w pełni przezroczysta, przechodząc do pełnego koloru czerwonego:
Przykład
#grad {
background-image: linear-gradient(to right, rgba(255,0,0,0),
rgba(255,0,0,1));
}
Powtarzanie liniowego gradientu
Funkcja repeating-linear-gradient() służy do powtarzania gradientów liniowych:
Przykład
Powtarzający się gradient liniowy:
#grad {
background-image:
repeating-linear-gradient(red, yellow 10%, green 20%);
}