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).

gradient liniowy

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('http://webkod.pl/images/gradient1.png');
}

Rezultat:

to jest przykładowy element - div

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('http://webkod.pl/images/gradient1.png');
  background-repeat:repeat-x;
}

Rezultat:

to jest przykładowy element - div

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('http://webkod.pl/images/gradient1.png');
  background-repeat:repeat-x;
}

Rezultat:

to jest przykładowy element - div

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('http://webkod.pl/images/gradient1.png');
  background-repeat:repeat-x;
  background-size:contain;
}

Rezultat:

to jest przykładowy element - div

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:

to jest przykładowy element - div

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:

linear-gradient(white -20%, green 150%)

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:

linear-gradient(white 0%, green 50%)

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:

linear-gradient(white, green, white)
linear-gradient(white 0%, green 20%, green 80%, white 100%)
linear-gradient(white, green, red)

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:

linear-gradient(45deg, white, green, white)

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:

to jest przykładowy element - div

Podobną funkcją do funkcji linear-gradient() jest funkcja repeating-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:

repeating-linear-gradient(white 0%, gold 50%)
repeating-linear-gradient(white 0%, gold 25%)
repeating-linear-gradient(to right, white 0%, gold 10%, white 20%)
repeating-linear-gradient(45deg, white 0%, gold 10%, white 20%)

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:

radial-gradient(blue, gold)

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:

radial-gradient(blue -20%, gold 150%)

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:

radial-gradient(blue 0%, gold 50%)

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:

radial-gradient(blue, gold, green)

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.

radial-gradient(circle, blue, gold, green)

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:

radial-gradient(circle at top, blue, gold, green)
radial-gradient(circle at bottom right, blue, gold, green)
radial-gradient(circle at 50px 0, blue, gold, green)

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:

radial-gradient(90px circle, blue, gold, green)
radial-gradient(360px 90px ellipse, blue, gold, green)

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ą.

closest-side
rozciągnięcie gradientu promienistego do najbliższych krawędzi danego elementu HTML, licząc od środka gradientu promienistego
farthest-side
rozciągnięcie gradientu promienistego do najbardziej oddalonych krawędzi danego elementu HTML, licząc od środka gradientu promienistego
closest-corner
rozciągnięcie gradientu promienistego do najbliższego rogu danego elementu HTML, licząc od środka gradientu promienistego
farthest-corner
rozciągnięcie gradientu promienistego do najbardziej oddalonego rogu danego elementu HTML, licząc od środka gradientu promienistego

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:

repeating-radial-gradient(white 0, gold 25px)
repeating-radial-gradient(circle, white 0, gold 15px)
repeating-radial-gradient(circle at top left, white 0, gold 10px, white 20px)

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.