gradienty CSS3 pozwalają wyświetlać płynne przejścia między dwoma lub więcej określonych kolorach.
Wcześniej trzeba było użyć wizerunki tych efektów. Jednak za pomocą gradienty CSS3 można skrócić czas pobierania i wykorzystania pasma. Ponadto, elementy z gradientami wyglądają lepiej, gdy duże, ponieważ gradient wygenerowane przez przeglądarkę.
CSS3 definiuje dwa rodzaje gradientów:
- Gradienty liniowe (idzie w dół / w górę / w lewo / w prawo / po przekątnej)
- Radialnym gradientem (zdefiniowane przez ich środku)
Pomoc Browser
Liczby w tabeli określ pierwszą wersję przeglądarki, która w pełni obsługuje właściwość.
Liczby następnie -webkit-, -moz- lub -o- określić pierwszą wersję, która pracowała z prefiksem.
| Nieruchomość | |||||
|---|---|---|---|---|---|
| linear-gradient | 26.0 10.0 -webkit- |
10.0 | 16.0 3.6 -moz- |
6.1 5.1 -webkit- |
12.1 11.1 -o- |
| radial-gradient | 26.0 10.0 -webkit- |
10.0 | 16.0 3.6 -moz- |
6.1 5.1 -webkit- |
12.1 11.6 -o- |
| repeating-linear-gradient | 26.0 10.0 -webkit- |
10.0 | 16.0 3.6 -moz- |
6.1 5.1 -webkit- |
12.1 11.1 -o- |
| repeating-radial-gradient | 26.0 10.0 -webkit- |
10.0 | 16.0 3.6 -moz- |
6.1 5.1 -webkit- |
12.1 11.6 -o- |
CSS3 liniowe gradienty
Aby utworzyć gradient liniowy musi zdefiniować przynajmniej dwa przystanki kolorów. Kolor przystanki są kolory, które chcesz uczynić płynne przejścia między. Można również ustawić punkt początkowy i kierunek (lub kąt) wraz z efektem gradientu.
Składnia
background: linear-gradient( direction , color-stop1 ,
color-stop2, ... );Linear Gradient - Od góry do dołu (jest to ustawienie domyślne)
Poniższy przykład pokazuje, gradient liniowy, który zaczyna się na szczycie. Zaczyna czerwony, przejście na żółto:
Przykład
#grad {
background: red; /* For browsers that do not
support gradients */
background: -webkit-linear-gradient(red,
yellow); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(red,
yellow); /* For
Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red, yellow); /* For
Firefox 3.6 to 15 */
background: linear-gradient(red, yellow); /* Standard
syntax */
} Spróbuj sam " Linear Gradient - od lewej do prawej
Poniższy przykład pokazuje, gradient liniowy, który rozpoczyna się z lewej strony. Zaczyna czerwony, przejście na żółto:
Przykład
#grad {
background: red; /* For browsers that do not
support gradients */
background: -webkit-linear-gradient(left,
red , yellow); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, red,
yellow); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right,
red, yellow); /* For Firefox 3.6 to 15 */
background: linear-gradient(to
right, red , yellow); /* Standard syntax */
} Spróbuj sam " Linear Gradient - Przekątna
Można zrobić gradient przekątnej określając zarówno pozycje wyjściowe poziomych i pionowych.
Poniższy przykład pokazuje, gradient liniowy, który zaczyna się w lewym górnym rogu (i idzie do dołu po prawej). Zaczyna czerwony, przejście na żółto:
Przykład
#grad {
background: red; /* For browsers that do not
support gradients */
background: -webkit-linear-gradient(left
top, red, yellow); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(bottom
right, red, yellow); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(bottom
right, red, yellow); /* For Firefox 3.6 to 15 */
background:
linear-gradient(to bottom right, red, yellow); /* Standard syntax */
} Spróbuj sam " Korzystanie kąty
Jeśli chcesz mieć większą kontrolę nad kierunkiem gradientu można określić kąt, zamiast predefiniowanych kierunkach (do dołu, do góry, w prawo, w lewo, w dół w prawo, itd.)
Składnia
background: linear-gradient( angle , color-stop1 ,
color-stop2 );
Kąt jest określony jako kąt między linią poziomą i linii gradientu.
Poniższy przykład pokazuje, jak używać dowolnych kątów gradientów liniowych:
Przykład
#grad {
background: red; /* For browsers that do not
support gradients */
background: -webkit-linear-gradient(-90deg,
red, yellow); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(-90deg,
red, yellow); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(-90deg,
red, yellow); /* For Firefox 3.6 to 15 */
background:
linear-gradient(-90deg,
red, yellow); /* Standard syntax */
} Spróbuj sam " Korzystanie z wielu kolorów Stops
Poniższy przykład pokazuje, gradient liniowy (od góry do dołu) z wieloma przystankami kolorystycznych:
Przykład
#grad {
background: red; /* For browsers that do not
support gradients */
background: -webkit-linear-gradient(red,
yellow, green); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(red,
yellow, green); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red,
yellow, green); /* For Firefox 3.6 to 15 */
background:
linear-gradient(red, yellow, green); /* Standard syntax */
} Spróbuj sam " Poniższy przykład pokazuje, jak utworzyć gradient liniowy (od lewej do prawej) z koloru tęczy i tekstem:
Przykład
#grad {
background: red; /* For browsers that do not
support gradients */
/* For Safari 5.1 to 6.0 */
background: -webkit-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
/* For Opera 11.1 to 12.0 */
background:
-o-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
/*
For Fx 3.6 to 15 */
background: -moz-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
/* Standard syntax */
background: linear-gradient(to right,
red,orange,yellow,green,blue,indigo,violet);
} Spróbuj sam " Korzystanie Przezroczystość
Gradienty CSS3 obsługują również przezroczystość, która może być używana do tworzenia efektów zanikowych.
Aby dodać przejrzystości, używamy rgba() funkcji w celu określenia przystanków kolorów. Ostatnim parametrem w rgba() funkcji może przyjąć wartość od 0 do 1, i określa przejrzystość koloru: 0 oznacza pełną przejrzystość, 1 wskazuje pełny kolor (bez przezroczystości).
Poniższy przykład pokazuje, gradient liniowy, który rozpoczyna się z lewej strony. Zaczyna się w pełni przejrzyste, przejście do pełnego koloru czerwonego:
Przykład
#grad {
background: red; /* For browsers that do not
support gradients */
background: -webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1)); /*Safari
5.1-6*/
background:
-o-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /*Opera 11.1-12*/
background: -moz-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1));
/*Fx 3.6-15*/
background: linear-gradient(to right, rgba(255,0,0,0),
rgba(255,0,0,1)); /*Standard*/
} Spróbuj sam " Powtarzanie liniowego gradientu
repeating-linear-gradient() Funkcja ta służy do powtarzania gradienty liniowe:
Przykład
powtarzając Gradient liniowy:
#grad {
background: red; /* For browsers that do not
support gradients */
/* Safari 5.1 to 6.0 */
background: -webkit-repeating-linear-gradient(red,
yellow 10%, green 20%);
/* Opera 11.1 to 12.0 */
background:
-o-repeating-linear-gradient(red, yellow 10%, green 20%);
/* Firefox 3.6
to 15 */
background: -moz-repeating-linear-gradient(red, yellow 10%,
green 20%);
/* Standard syntax */
background:
repeating-linear-gradient(red, yellow 10%, green 20%);
} Spróbuj sam " CSS3 radialnych gradientów
Promieniowy gradient określona przez jego środek.
Aby utworzyć gradientu radialnego należy również zdefiniować co najmniej dwa przystanki kolorów.
Składnia
background: radial-gradient( shape size at position, start-color, ..., last-color );Domyślnie kształt elipsy, rozmiar jest najdalej rogu, a pozycja jest ośrodkiem.
Radial Gradient - równomiernie rozmieszczone Kolor Stops (jest to ustawienie domyślne)
Poniższy przykład pokazuje, gradientu radialnego z równomiernie rozmieszczonych przystanków kolorystycznych:
Przykład
#grad {
background: red; /* For browsers that do not
support gradients */
background: -webkit-radial-gradient(red, yellow, green); /*
Safari 5.1 to 6.0 */
background: -o-radial-gradient(red, yellow, green); /* For Opera
11.6 to 12.0 */
background: -moz-radial-gradient(red, yellow, green); /*
For Firefox 3.6 to 15 */
background: radial-gradient(red, yellow, green);
/* Standard syntax */
} Spróbuj sam " Radial Gradient - W odróżnieniu rozstawione Kolor Zatrzymuje
Poniższy przykład pokazuje, gradientu radialnego z inaczej rozmieszczonymi przystankami kolorystycznych:
Przykład
#grad {
background: red; /* For browsers that do not
support gradients */
background: -webkit-radial-gradient(red 5%,
yellow 15%, green 60%); /*
Safari 5.1-6.0 */
background: -o-radial-gradient(red 5%, yellow
15%, green 60%); /* For Opera
11.6-12.0 */
background: -moz-radial-gradient(red 5%, yellow 15%,
green 60%); /*
For Firefox 3.6-15 */
background: radial-gradient(red 5%, yellow
15%, green 60%);
/* Standard syntax */
} Spróbuj sam " Ustaw Shape
Parametr kształtu określa kształt. Może on przyjąć wartość koło lub elipsę. Domyślną wartością jest elipsą.
Poniższy przykład pokazuje promieniowy gradient o kształcie okręgu:
Przykład
#grad {
background: red; /* For browsers that do not
support gradients */
background: -webkit-radial-gradient(circle, red, yellow, green); /*
Safari */
background: -o-radial-gradient(circle, red, yellow, green); /* Opera
11.6 to 12.0 */
background: -moz-radial-gradient(circle, red, yellow,
green); /* Firefox 3.6 to 15 */
background: radial-gradient(circle, red,
yellow, green);
/* Standard syntax */
} Spróbuj sam " Zastosowanie innego rozmiaru Słowa kluczowe
Parametr wielkości określa wielkość gradientu. To może trwać cztery wartości:
- Najbliżej-side
- najdalej po stronie
- Najbliżej-corner
- najdalej rogu
Przykład
Gradientu radialnego z różnych słów kluczowych wymiarach:
#grad1 {
background: red; /* For browsers that do not
support gradients */
/* Safari 5.1 to 6.0 */
background: -webkit-radial-gradient(60%
55%, closest-side, red, yellow, black);
/* For Opera 11.6 to 12.0 */
background: -o-radial-gradient(60% 55%, closest-side, red, yellow, black);
/* For Firefox 3.6 to 15 */
background: -moz-radial-gradient(60% 55%,
closest-side, red, yellow, black);
/* Standard syntax */
background: radial-gradient(closest-side at 60% 55%, red, yellow,
black);
}
#grad2 {
/* Safari 5.1 to 6.0 */
background: -webkit-radial-gradient(60% 55%, farthest-side,
red, yellow, black);
/* Opera 11.6 to 12.0 */
background: -o-radial-gradient(60% 55%,
farthest-side, red, yellow, black);
/* For Firefox 3.6 to 15 */
background: -moz-radial-gradient(60% 55%, farthest-side, red, yellow, black);
/* Standard syntax */
background: radial-gradient(farthest-side at 60%
55%, red, yellow, black);
} Spróbuj sam " Powtarzanie promieniowego gradientu
repeating-radial-gradient() Funkcja ta służy do powtarzania gradienty radialne:
Przykład
Powtarzający radial gradient:
#grad {
background: red; /* For browsers that do not
support gradients */
/* For Safari 5.1 to 6.0 */
background: -webkit-repeating-radial-gradient(red,
yellow 10%, green 15%);
/* For Opera 11.6 to 12.0 */
background:
-o-repeating-radial-gradient(red, yellow 10%, green 15%);
/* For Firefox
3.6 to 15 */
background: -moz-repeating-radial-gradient(red, yellow 10%,
green 15%);
/* Standard syntax */
background:
repeating-radial-gradient(red, yellow 10%, green 15%);
} Spróbuj sam " Sprawdź się z ćwiczeń!
Ćwiczenie 1 » Ćwiczenie 2» Ćwiczenie 3 » Ćwiczenia 4» Zadanie 5 » Ćwiczenia 6» Ćwiczenia 7 »