18. Gradienty

Jest to świetny sposób na urozmaicenie strony, dzięki niemu możemy wizualnie znacznie polepszyć naszą stronę. No więc do dzieła

Jak to w większości pięknych rzeczy są także złe strony, w tym wypadku użycie gradientó wiąże się z zapamiętaniem, aż czterech przedrostków, które sprawią, iż każda przeglądarka będzie mogła je poprawnie odtworzyć. Ale czegoż to my nie zrobimy, aby nasza strona wyglądała pieknie nieprawdaż?

No więc może zacznijmy od wypisania właśnie tych przedrostków, których będziesz musiał używać, aby strona na każdej przeglądarce działała prawidłowo:

-webkit- dla chrome i safari
-moz- dla firefoxa
-o- dla opery
-ms- dla internet explorer

Gradienty występują jakby w dwóch rodzajach, a mianowicie: linearny oraz promienisty czyli tzw. okrągły.

Gradient linearny

Zacznijmy więc od tego jak z niego korzystać. Należy w właściwościach CSS dodać to w taki sposób:

		nazwa div'a {
					background: -moz-linear-gradient(kierunek, kolor początkowy, kolor końcowy);
					background: -o-linear-gradient(kierunek, kolor początkowy, kolor końcowy);
					background: -ms-linear-gradient(kierunek, kolor początkowy, kolor końcowy);
					background: -webkit-linear-gradient(kierunek, kolor początkowy, kolor końcowy);
				}

Kierunek

to right - z lewej do prawej
to left - z prawej do lewej
to top - z dołu do góry
to bottom - z góry do dołu
to right top, to right bottom, to left top, to left bottom - na ukos

Możemy również dodać po kolorach występujących w gradiencie odległość początkową , która występuje po wartości pierwszego koloru i odległość końcową po ostatnim kolorze.

Oto pierwsze wykorzystanie dla
background: -webkit-linear-gradient ⁽ top,purple 7%,pink 60%,grey ⁾ :

Przechodzenie do przezroczystości ?

Pewnie zastanawiasz się co ja znowu wymyśliłam i jak niby mamy przejść do przezrocztystości? Otóż uwierz mi da sie, wystarczy tylko użyć kolorów w palecie rgba ⁽ x,x,x,x ⁾ , gdzie ostatnim parametrem jest opacity Najlepiej zobacz to na przykładzie.

Oto kolejne wykorzystanie dla
background: -webkit-linear-gradient⁽left,rgba(190,189,127,0.1),rgba(190,189,127,0.5),rgba(199,234,195,1) ⁾ :

Gradient kołowy

Własność radial-gradient tworzymy w podobny sposób do gradientu liniowego tylko słowo linear zamieniamy na radial .

Oto i przykład:
background: -webkit-radial-gradient(10% 90%,circle, pink 15%,purple , red 30%,aqua,blue);

Powtarzanie

Uwaga mamy także możliwość użycia powtarzania naszego gradientu !!! Kiedy go możemy użyć? I tutaj mam świetną wiadomość , gdyż możesz go użyć zarówno
w liniowym jak i w kołowym. Za przedrostkiem odnoszącym się do przeglądarki dodajemy po prostu -repeating .

Oto i najptostrzy przykład:
-webkit-repeating-linear-gradient(left,white 0px,white 15px,pink 15px,pink 30px);

I koniec ♥ Poznałeś kolejne fajne właściwości, myślę, iż to były jedne z lepszych oraz mam nadzieję, iż Ci się podobało ♥

Kontakt

Tel: 512-345-287
Palcza 15
34-211 Palcza

Strone wykonała

Paulina Pasternak
E-mail: paula.pasternak@wp.pl