CSS3: gradienty

Opublikowany: 18.04.2011 21:25:03 | Komentarzy 7

Wstęp

Na nasze szczęście CSS3 pozwala na bardziej zaawansowane manipulacje obrazkami, a właściwie grafikami. W starych wersjach CSS (2 i 2.1) obrazki były wykorzystywane jako: tło (body, wylistowań, kontenerów, itp.), obrazek (na stronie). CSS 3 rozszerza ich wykorzystanie do bardziej "zaawansowanych" modyfikacji 2D.

Typy gradientów

W CSS3 będziemy mieli (bo na razie dokumentacja jest w trakcie tworzenia) dwa typy gradientów:

• Linear (liniowy).
• Radial (koÅ‚owy).

Dodatkowo każdy z nich występuje w dwóch wariacjach:

• DomyÅ›ly - czyli gradien ze zdefiniowanÄ… pulÄ… kolorów, które przechodzÄ… jeden w kolejny.
• Powtórzenia - czyli coÅ› w rodzaju pÄ™tli. Gradienty bÄ™dzie można powtarzać.

W CSS3 jest to zdefiniowane jako:

 gradient = [ linear-gradient | radial-gradient | repeating-linear-gradient | repeating-radial-gradient ]

Gradienty liniowe (linear) - linear-gradient()

Funkcja linear-gradient przyjmuje dwa rodzaje parametrów:

linear-gradient(
  [[
    [ [top | bottom] || [left | right] ]
    |
    kÄ…t
  ]
  ,]?
  kolor[, kolor]+
)

Pierwsza część odpoawiada za położenie lub kierunek gradientu (linia gradientu). Innymi słowy - w jakim kierunku będą "układać się" kolory.

Linię gradientu możemy definiować na dwa sposoby:

1. Za pomocÄ… konkrÄ™tnej wartoÅ›ci kÄ…tu - angle np.: 10deg, 90deg. Dodatnia wartość oznacza, że gradient bÄ™dzie obracaÅ‚ siÄ™ w lewo.
2. PodajÄ…c konkretne "poÅ‚ożenie" np.: top left, right, itd.

Druga definiuje listę kolorów, musi ich być minimum dwa aby gradient wyglądał jak gradient. Te dwa rodzaje parametrów możemy ze sobą dowolnie mieszać.

Przykłady gradientów liniowych

Gradient z domyślnym kierunkiem (czarno-czerwony):

#linear1 {
width: 400px;
height: 100px;
margin: auto;
background: linear-gradient(black, red);
}

Gradient z domyślnym kierunkiem 3-kolorowy

#linear2 {
width: 400px;
height: 100px;
margin: auto;
background: linear-gradient(black, red, yellow);
}

Gradient 2-kolorowy pod kątem 45°

#linear3 {
width: 400px;
height: 100px;
margin: auto;
background: linear-gradient(45deg, black, red);
}

Gradient 3-kolorowy, którego kolory przechodzą między sobą w konkretnych punktach.

#linear4 {
width: 400px;
height: 300px;
margin: auto;
background: linear-gradient(black 50px, red 150px, yellow 200px);
}

Gradienty kołowe (radius) - radial-gradient()

Funkcja radial-gradient() nie różnie dużo od poprzedniej. Różnica jaka jest pomiędzy nimi, to dodatkowe parametry określnające owalność oraz jego wielkość.

radial-gradient(
	[bg-position,]? 
	[[
		[shape || size]
		|
		[length | percentage]{2}
	],]? 
	kolor[, kolor]+
)

Pierwszy parametr okreÅ›la Å›rodek owalu. DziaÅ‚a to na podobnej zasadzie jak ustawianie tÅ‚a dla background. Jeżeli go nie podamy, to domyÅ›lna wartość to center.

Drugi parametr jest już trochę bardziej skomplikowany, bo przyjmuje dwie wartości i dodatkowo można je mieszać na różne sposoby.

Zmienna shape przyjmuje dwie wartoÅ›ci circle lub ellipse.

Kolejny parametr to:

size = [ closest-side | closest-corner | farthest-side | farthest-corner | contain | cover ]

W wielkim skrócie, można powiedzieć, że ten parametr odpowiada za promień koła lub promienie elipsy. Wszystko jest uzależnione od rozmiarów obszaru z gradientem i pozycji startowej.

I tak:

• closest-side obiera promieÅ„ wzglÄ™dem najbliżego punktu wzglÄ™dem Å›rodka (obszaru na którym jest "malowany").
• fahrest-side - podobnie jak wyżej, z tÄ… różnicÄ…, że wzglÄ™dem najdalszego punktu wzglÄ™dem Å›rodka.
• closest-corner, fahrest-corner - promieÅ„ jest dobierany wzglÄ™dem (odpowiednio) najbliższego i najdalszego rogu obszaru.
• contain jest synonimem dla closest-side.
• cover to synonim farthest-corner.

Kilka przykładów

Gradient kołowy z domyślnym środkiem (czarno-czerwony):

#radial1 {
width: 100px;
height: 100px;
margin: auto;
background: radial-gradient(circle, #f00, #000);
}
 

Gradient kołowy ze środkiem w punkcie (20,50) pikseli z gradientem do najdalszego rogu:

#radial2 {
width: 200px;
height: 200px;
margin: auto;
background: radial-gradient(20px 50px, circle cover, #f00, #000);
}

Na koniec tęcza :)

#tecza {
width: 400px;
height: 200px;
margin: auto;
background: radial-gradient(200px 200px, ellipse, #00f 10px, #f00 30px, #f90 60px, #ff0 90px, #0f0 120px, #4B0082 150px, #b803ff 180px, #00f);
}

Kolory tęczy przechodzą między sobą co 30 pikseli. Pierwszy kolor to niebieski, aby imitował kolor "nieba" ;).

Mam nadzieję, że przybliżyłem Wam trochę gradinety. Jeżeli macie jakieś uwagi do moich tłumaczeń czy interpretacji niektórych zmiennych, to piszcie w komentarzach. Zdaję sobie sprawę, że coś może być nie tak.

Tagi: css3 gradienty css gradienty kołowe gradienty liniowe