Gradient z wykorzystaniem CSS3 jako tło strony

kurs php

Kategoria wpisu Kurs CSS, Kursy Tagi: , , , , on przez .


1 Gwizdka2 Gwizdki3 Gwizdki4 Gwizdki5 Gwizdki (Brak ocen)
Loading...

Słowo gradient kojarzy nam się zwykle z obrazkiem posiadającym bardzo ciekawą kolorystykę np. przechodzącym z jednej barwy w drugą.

Jeszcze niedawno taki efekt graficzny można było uzyskać tylko z pomocą obrazka. Rewolucja jaką było pojawienie się CSS3 umożliwiła nam uzyskanie dokładni takich samych efektów. Dzięki czemu możemy tworzyć nie tylko lżejsze strony, ale rozbudowywać je o ciekawsze rozwiązania graficzne. Nie potrzebujemy także znać (posiadać) programów graficznych i martwić się że w złe miejsce wrzucimy ilustrację.

Gdzie możemy wykorzystać gradient CSS3

Gradient możemy praktycznie umieścić w takich samych miejscach jak obrazki czyli np. w tle przycisku (button), tle strony

Ogranicza nas jedynie wyobraźnia.

Wyrużniamy 2 rodzaje gradientu:

  • Gradient linowy (do dołu/góry/prawo/lewo/na skos) linear-gradient
  • Gradient kołowy / promienisty (rozchodzący się od środka) radial-gradient

Przykładowe gradienty:

Gradient typu liniowego (linear gradient)

Gradient typu liniowego od lewej do prawej

Jak widać na powyższych przykładach gradient liniowy zaczyna się od wybranego fragmentu i przechodzi w kolejny.

Gradient na ukos

Gradient liniowy można również obracać w inny sposób. Za kierunek obrotu odpowiedzialna jest wartość deg np:

0deg

 

90deg

 

180deg

 

-90deg

W przypadku gradientu liniowego nie jesteśmy ograniczeni do konkretnej ilości kolorów. W efekcie możemy stworzyć wielobarwny obiekt np:

W efekcie gradientu można runiesz wykorzystywać przezroczystość:

Możemy również manipulować natężeniem kolorów np:

W tym wypadku ten kolor, który ma wyższy % będzie najbardziej widoczny i dominujący.

Gradient może być również samopowtarzalny. Powtarzać go możemy kilkakrotnie:

Drugim rodzajem gradientu jest gradient promienisty. Tworzy się go od jednego punktu następnie rozciąga się we wszystkie strony tworząc coś w rodzaju elipsy.

Gradient promienisty można z kolei uzyskać:

Oczywiście gradient promienisty nie musi tylko przybierać krzatłu jajka może być również w kształcie koła.

Gradient można również wykorzystać do stworzenia szachownicy (kratki) np. czarno białej.

W kodzie CSS wygląda to tak (stworzone przez Shippo)

Na stronie znajdziecie inne ciekawe przykłady:
http://lea.verou.me/css3patterns/

Obsługa przez Przeglądarki internetowe

PropertyChromeEdge IEFirefoxSafariOpera
linear-gradient26.0
10.0 -webkit-
12.010.016.0
3.6 -moz-
6.1
5.1 -webkit-
12.1
11.1 -o-
radial-gradient26.0
10.0 -webkit-
12.010.016.0
3.6 -moz-
6.1
5.1 -webkit-
12.1
11.6 -o-
repeating-linear-gradient26.0
10.0 -webkit-
12.010.016.0
3.6 -moz-
6.1
5.1 -webkit-
12.1
11.1 -o-
repeating-radial-gradient26.0
10.0 -webkit-
12.010.016.0
3.6 -moz-
6.1
5.1 -webkit-
12.1
11.6 -o-

Przykładowe generatory gradientów CSS

Źródło: http://www.w3schools.com/css/css3_gradients.asp

dodatkowe tagi:
kurs CSS
tutorial CSS3
Linear gradients
oryginalne tło strony internetowej
Gradient kołowy i linowy na witrynie www
płynne przejście jednego koloru w drugi zob. też gradient (grafika) w Wikipedii
mat. fiz. wektor o kierunku i zwrocie zgodnym z kierunkiem wzrostu funkcji i wartości proporcjonalnej do szybkości wzrostu; zob. też gradient (matematyka) w Wikipedii
wielobarwne tło
zamiast grafiki, ilustracji
gradient CSS3

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *