40. CSS3 - Gradienty liniowe oraz promieniste

W tej części kursu CSS poznamy czym są gradienty, w jaki sposób tworzyło się je do tej pory oraz w jaki sposób można tworzyć je za pomocą nowych funkcji właściwości background-image.

Gradient tworzą przynajmniej dwa różne od siebie kolory, które w określony sposób, na danym obszarze, stopniowo łączą się ze sobą i w ten sposób wypełniają dany obszar. Gradient możemy utworzyć w programie graficznym (np. w GIMP-ie). Przykładowy gradient liniowy, w postaci pliku o formacie PNG, został zaprezentowany poniżej (ma on szerokość równą 1px, jednak dla potrzeb tego przykładu został on powiększony).

Obrazek, który został zaprezentowany powyżej, możemy użyć do wypełnienia tła elementu HTML. Do tego celu możemy wykorzystać właściwość background-image, wystarczy że jako wartość właściwości background-image podamy ścieżkę do naszego przykładowego pliku PNG.

div {
  text-align:center;
  width:70%;
  margin:0 auto;
  padding:50px;
  border:5px solid #000;
  background-image:url('./images/gradient1.png');
}

Rezultat:

Pierwszą rzeczą, która rzuca się nam w oczy jest to, że domyślnie tło obrazkowe, które zostanie dodane do elementu HTML, jest powtarzane zarówno w poziomie jak i w pionie, co nie zawsze może nam dać pożądany efekt. Efekt ten możemy wyeliminować za pomocą właściwości background-repeat oraz wartości repeat-x, dzięki czemu tło obrazkowe będzie powtarzane tylko w poziomie.

div {
  text-align:center;
  width:70%;
  margin:0 auto;
  padding:50px;
  border:5px solid #000;
  background-image:url('./images/gradient1.png');
  background-repeat:repeat-x;
}

Rezultat:

Pojawił się nowy problem, ponieważ dolny obszar elementu HTML nie został wypełniony tłem obrazkowym, które jest gradientem. Wspomniany problem możemy rozwiązać na kilka sposobów. Możemy przygotować nowy obrazek dla danego elementu HTML, który będzie miał większy rozmiar wysokości niż dany element HTML, jednak takie działanie mija się z celem, bo często bywa tak, że nie możemy przewidzieć jaką wartość wysokości będzie miał dany element HTML. Bardziej skuteczniejszym sposobem jest nadanie koloru dla tła danego elementu HTML. Kolor ten powinien mieć taką samą wartość jaką posiada ostatni piksel danego gradientu, którym wypełniamy dany element HTML. W naszym przykładzie jest to wartość #13D213.

div {
  text-align:center;
  width:70%;
  margin:0 auto;
  padding:50px;
  border:5px solid #000;
  background-color:#13D213;
  background-image:url('./images/gradient1.png');
  background-repeat:repeat-x;
}

Rezultat:

Efekt jest już lepszy niż przedtem, lecz nasz element HTML tak naprawdę został wypełniony obrazkiem tylko do połowy jego wysokości. Możemy pozostawić naszą właściwość background-color, dzięki czemu element HTML będzie miał jednolity kolor tła w przypadku gdy użytkownik skorzysta z przeglądarki internetowej, w której została wyłączona opcja wyświetlania obrazków na stronach internetowych. Do naszego przykładu możemy dodać właściwość CSS3 o nazwie background-size, która określa rozmiary tła obrazkowego, które zostało dodana do danego elementu HTML. Gdy wykorzystamy właściwość background-size wraz z wartością contain, to wysokość danego tła obrazkowego zostanie rozciągnięta do wartości wysokości elementu HTML, w którym wspomniane tło się znajduje.

div {
  text-align:center;
  width:70%;
  margin:0 auto;
  padding:50px;
  border:5px solid #000;
  background-color:#13D213;
  background-image:url('./images/gradient1.png');
  background-repeat:repeat-x;
  background-size:contain;
}

Rezultat:

Jeżeli nie chcemy korzystać z dodatkowych plików obrazkowych oraz innych sztuczek, aby w całości lub po części wypełnić obszar danego elementu HTML gradientem liniowym, to możemy wykorzystać do tego celu właściwość background-image oraz funkcję linear-gradient(). Funkcja linear-gradient() służy do wypełnienia tła elementu HTML gradientem liniowym. Dla wspomnianej funkcji linear-gradient() musimy określić pewne parametry, niektóre z nich są wymagane, a niektóre nie są wymagane. Najprostszą formą zapisu funkcji linear-gradient() jest następująca forma:

div {
  text-align:center;
  width:70%;
  margin:0 auto;
  padding:50px;
  border:5px solid #000;
  background-image:linear-gradient(white, green);
}

Rezultat:

Dzięki background-image oraz funkcji linear-gradient(white, green) został utworzony gradient liniowy, który składa się z koloru białego (white) oraz zielonego (green). Domyślnie pozycja każdego koloru, jaki podamy wraz z funkcją linear-gradient() jest określana automatycznie przez przeglądarkę internetową, dlatego wspomniane pozycje kolorów rozkładają się równomiernie, w równych odstępach między sobą (zakres od 0% do 100%). Dla dwóch kolorów będą to wartości 0% oraz 100%. Dla trzech kolorów będą to wartości 0%, 50% oraz 100%. Dla czterech kolorów będą to wartości 0%, ~33%, ~67% oraz 100% itd. Inaczej mówiąc zapis linear-gradient(white, green) jest równoznaczny z zapisem linear-gradient(white 0%, green 100%). Pozycją kolorów możemy manipulować, nie tylko w zakresie 0% - 100%. Przykład:

Pozycje kolorów są liczone względem wysokości lub szerokości lub obu tych granic elementu HTML (w zależności, w którą stronę nasz gradient liniowy jest tworzony).

Gdy dany gradient liniowy nie wypełni w całości obszaru tła elementu HTML, to w takiej sytuacji reszta obszaru tła elementu HTML jest wypełniana jednolitym kolorem (o wartości koloru ostatniego piksela danego gradientu liniowego).

Przykład:

Inaczej mówiąc zapis linear-gradient(white 0%, green 50%) jest równoznaczny z zapisem linear-gradient(white 0%, green 50%, green 100%). Jak już wcześniej wspomniałem, gradient liniowy może składać się z większej liczby kolorów, dzięki czemu możemy uzyskać rozmaite efekty. Przykłady:

Ostatnim parametrem, jaki możemy określić w funkcji linear-gradient(), jest parametr, który określa kierunek wypełnienia tła elementu HTML gradientem liniowym. Domyślnie gradient liniowy jest tworzony od góry do dołu, dlatego domyślną wartością wspomnianego parametru funkcji linear-gradient() jest wartość to bottom. Inaczej mówiąc zapis linear-gradient(white, green, white) jest równoznaczny z zapisem linear-gradient(to bottom, white, green, white) oraz jest równoznaczny z zapisem linear-gradient(to bottom, white 0%, green 50%, white 100%). Kierunkiem gradientu liniowego możemy manipulować za pomocą wartości typu: to bottom, to left, to bottom left, to top right itp., jak również za pomocą wartości wyrażonych w jednostkach deg, które określają stopień obrotu. Przykład:

Wartości kolorów podawane przez nas mogą mieć różną formę, np. rgba, dzięki czemu możemy określić stopień przezroczystości danego koloru. Podobny efekt uzyskamy wykorzystując kombinacje nazw kolorów, gdy nasza kombinacja będzie zawierała wartość transparent, która określa przezroczysty kolor. Gdy wykorzystujemy właściwość background-image oraz którąkolwiek z funkcji, które służą do utworzenia gradientu, to dany gradient jest traktowany jako osobne tło, którym dany element HTML jest wypełniony. Wykorzystując te informacje możemy wypełnić tło elementu HTML kilkoma gradientami z czego pierwszy gradient (znajdujący się najbardziej z wierzchu) może być nieco przezroczysty.

div {
  text-align:center;
  width:70%;
  margin:0 auto;
  padding:50px;
  border:5px solid #000;
  background-image:linear-gradient(to left, gold, transparent, gold),
                   linear-gradient(45deg, white, green, white);
}

Rezultat:

Podobną funkcją do funkcji linear-gradient() jest funkcja repeatin

g-linear-gradient(). Działa ona identycznie jak funkcja linear-gradient() z tą różnicą, że gdy kolory, które wskazaliśmy do utworzenia gradientu liniowego, nie wypełnią całego obszaru tła elementu HTML, to gradient zostanie powtórzony tak, aby wypełnił cały obszar tła danego elementu HTML. Przykłady:

Jako ciekawostkę należy zapamiętać, że efekt funkcji repeating-linear-gradient() możemy uzyskać za pomocą funkcji linear-gradient(), gdy odpowiednio powtórzymy wartości we wspomnianej funkcji. Inaczej mówiąc zapis repeating-linear-gradient(white 0%, gold 25%) jest równoznaczny z zapisem linear-gradient(white 0%, gold 25%, white 25%, gold 50%, white 50%, gold 75%, white 75%, gold 100%). Innym rodzajem gradientu jest gradient promienisty. Jest on tworzony od jednego punktu i rozciąga się we wszystkie strony. Do utworzenia gradientu promienistego możemy wykorzystać właściwość background-image oraz funkcję radial-gradient(). Przykład:

Dzięki background-image oraz funkcji radial-gradient(blue, gold) został utworzony gradient promienisty, który składa się z koloru niebieskiego (blue) oraz złotego (gold). Domyślnie pozycja każdego koloru, jaki podamy wraz z funkcją radial-gradient() jest określana automatycznie przez przeglądarkę internetową, dlatego wspomniane pozycje kolorów rozkładają się równomiernie, w równych odstępach między sobą (zakres od 0% do 100%). Dla dwóch kolorów będą to wartości 0% oraz 100%. Dla trzech kolorów będą to wartości 0%, 50% oraz 100%. Dla czterech kolorów będą to wartości 0%, ~33%, ~67% oraz 100% itd. Inaczej mówiąc zapis radial-gradient(blue, gold) jest równoznaczny z zapisem radial-gradient(blue 0%, gold 100%). Pozycją kolorów, podobnie jak w przypadku funkcji linear-gradient(), możemy manipulować, nie tylko w zakresie 0% - 100%. Przykład:

Gdy dany gradient promienisty nie wypełni w całości obszaru tła elementu HTML, to w takiej sytuacji reszta obszaru tła elementu HTML jest wypełniana jednolitym kolorem (o wartości koloru ostatniego piksela danego gradientu promienistego).

Przykład:

Gradient promienisty, podobnie jak gradient liniowy, może składać się z większej liczby kolorów, dzięki czemu możemy uzyskać rozmaite efekty.

Przykład:

Gradient promienisty może mieć dwa typy kształtu: kształt elipsy (ellipse) lub kształt okręgu (circle). Domyślnym typem jest ellipse. Oznacza to, że zapis radial-gradient(blue, gold, green) jest równoznaczny zapisem radial-gradient(ellipse, blue, gold, green). W przykładzie, który znajduje się poniżej, został zaprezentowany gradient promienisty w kształcie okręgu.

Różnica pomiędzy kształtem ellipse, a kształtem circle polega na tym, że kształt ellipse rozciąga się do dwóch najbliższych krawędzi elementu HTML, natomiast kształt circle rozciąga się do dwóch najdalszych krawędzi elementu HTML. Domyślnie gradient promienisty jest tworzony od centralnego punktu elementu HTML, dlatego parametr, który odpowiada za miejsce wspomnianego punktu, ma wartość at center. Inaczej mówiąc zapis radial-gradient(circle, blue, gold, green) jest równoznaczny z zapisem radial-gradient(circle at center, blue, gold, green). Do manipulowania wspomnianym parametrem możemy wykorzystywać następujące wartości oraz ich kombinacje: top, right, bottom, left, center, bottom right, center left, które podajemy po słowie at. Do określenia wspomnianego parametru możemy również wykorzystać inne wartości, np. wyrażone w pikselach lub w procentach. Pierwsza podana przez nas wartość odpowiada za przesunięcie w poziomie od lewej krawędzi elementu HTML, natomiast druga podana przez nas wartość odpowiada za przesunięcie w pionie od górnej krawędzi elementu HTML. Jeżeli podamy tylko jedną wartość to druga jest rozpoznawana automatycznie jako wartość center. Przykłady:

Zarówno pozycja koloru, jak i miejsce gradientu promienistego są liczone względem rozmiaru szerokości oraz wysokości elementu HTML, do którego dany gradient promienisty jest dodawany, za pomocą funkcji radial-gradient() oraz właściwości background-image. Ostatnim parametrem, jaki możemy użyć w funkcji radial-gradient(), jest parametr, który odpowiada za rozmiar kształtu danego gradientu promienistego. Do określenia wspomnianego parametru możemy wykorzystać, np. wartości wyrażone w pikselach lub w procentach. Gdy nasz gradient jest kształtu okrągłego to możemy podać jedną wartość, która będzie oznaczała długość danego okręgu zarówno w poziomie jak i w pionie. Natomiast gdy nasz gradient jest kształtu eliptycznego to możemy podać dwie wartości, pierwsza z nich będzie oznaczała długość danej elipsy w poziomie, natomiast druga wartość będzie oznaczała długość danej elipsy w pionie. Przykłady:

Domyślną wartością parametru, który odpowiada za rozmiar kształtu gradientu promienistego, jest wartość farthest-corner. Oznacza to, że zapis radial-gradient(blue, gold, green) jest równoznaczny zapisem radial-gradient(farthest-corner, blue, gold, green) oraz jest równoznaczny z zapisem radial-gradient(farthest-corner ellipse at center, blue 0%, gold 50%, green 100%). Poniżej zostały wyjaśnione dodatkowe wartości, jakie możemy wykorzystać do określenia omawianego parametru. W przypadku tego typu wartości zawsze podajemy tylko jedną.

Podobną funkcją do funkcji radial-gradient() jest funkcja repeating-radial-gradient(). Działa ona identycznie jak funkcja radial-gradient() z tą różnicą, że gdy kolory, które wskazaliśmy do utworzenia gradientu promienistego, nie wypełnią całego obszaru tła elementu HTML, to gradient zostanie powtórzony tak, aby wypełnił cały obszar tła danego elementu HTML. Przykłady:

Tworzenie rozmaitych gradientów za pomocą różnych funkcji oraz właściwości background-image jest dość prostą czynnością, jednak tylko gdy znamy wszystkie parametry, jakie możemy wykorzystać do tego celu. Możemy również skorzystać z narzędzia, które znajduje się pod wskazanym adresem - www.colorzilla.com. W następnej części kursu CSS poznamy właściwości CSS, które należą do grupy transition.