Logo

Blog o JavaScript, jQuery, HTML5, CSS3 i 4. Porady jak pisać dobrej jakości kod, tutoriale, nowości.

Radial-gradient - nowa składnia i pierwsze implementacje

  • 09.07.2012 22:12:06
  • CSS
  • 2

Gradienty w CSS3 to bardzo przydatne narzędzie, dzięki któremu możemy urozmaicić wygląd naszej strony niewielką ilością kodu, ogranicza nas właściwie jedynie wyobraźnia. Warto rzucić więc okiem na nową składnię gradientów kołowych, która została już zaimplementowana w najnowszych wersjach beta IE10.

Od artykułu o gradientach CSS3 minęło już trochę i w tym czasie sporo się zmieniło. Dotychczasowa konstrukcja była dosyć często omawiana - w końcu wszyscy doszli do wniosku, że należy ją zmodyfikować, ponieważ była podobno dosyć trudna w zapamiętaniu i swobodnym stosowaniu. Teraz teoretycznie będzie to łatwiejsze, ponieważ konstrukcja gradientu kołowego jest podobna do gradientu liniowego, ale mimo wszystko to nadal jest coś, czego trzeba się po prostu nauczyć. Czy teraz jest trudniej, czy łatwiej, to już kwestia indywidualnych preferencji i tego czy ktoś już z gradientów wcześniej korzystał. Na pewno nie jest to tak ekstremalnie trudne jak obsługa promu kosmicznego czy gra w pokera na światowym poziomie, więc każdy powinien sobie z tym bez problemów poradzić.

Zobaczmy więc jak wygląda nowa konstrukcja na kilku prostych przykładach. Najprostszy możliwy gradient kołowy posiada jedynie dwa parametry - kolor początkowy i końcowy:

p { 
   background: radial-gradient(#000, #FFF); 
}

Powyższa definicja wyświetli nam gradient widoczny na pierwszym obrazku. Domyślnie gradient będzie miał kształt elipsy, ale i to da się szybko załatwić, jeśli zależy nam na kole:

p { 
   background: radial-gradient(circle, #000, #FFF); 
}

Oczywiście to nie wszystko - możemy dowolnie manipulować gradientem ustawiając mu na przykład miejsce względem którego gradient ma zostać rozciągnięty:

p { 
   background: radial-gradient(closest-side circle, #000, #FFF); 
}

W tym przypadku użytym słowem kluczowym było closest-size, ale do dyspozycji jest także farthest-corner (domyślnie), farthest-side i closest-corner. Zamiast tego możemy także użyć wartości liczbowych:

p {
   background: radial-gradient(30px circle, #000, #FFF); 
}

Wszystko ślicznie, ale co, jeśli chcielibyśmy przesunąć gradient względem środka? Tu do akcji wkracza at, dzięki któremu zdefiniujemy położenie środka gradientu kołowego:

p { 
   background: radial-gradient(farthest-corner circle at left, #000, #FFF); 
}

Nic nie stoi na przeszkodzie, by ponownie użyć wartości liczbowych:

p { 
   background: radial-gradient(at 30% 50%, #000, #FFF); 
}

Jak widać zmiany nie są rewolucyjne. Każdy, kto będzie korzystać z gradientów kołowych na pewno szybko przyswoi nową konstrukcję. Należy jednak pamiętać, że stare style mogą popsuć wygląd strony w przeglądarkach, które będą wspierać nowe reguły. Aktualnie jedynie najnowsze wersje beta przeglądarki IE10 posiadają zaimplementowaną obsługę nowej konstrukcji gradientów kołowych. Co ciekawe gradienty w IE10 są na tyle zgodne z dokumentacją, że zostały zaimplementowane bez żadnych przedrostków!

Autor wpisu

Andrzej Mazur — front-end developer, bloger, HTML5 game developer, twórca CSS4.pl i FrontStart.pl. Pasjonat nowych, otwartych technologii.

Komentarze

Gavatar procek

10.07.2012 procek

Super, świetnie, ale teraz aby utrzymać kompatybilność ze wszystkimi przeglądarkami trzeba będzie pisać po 5 wersji jednego parametru. Oczywiście można generować sobie przedrostki choćby po stronie serwera, ale będzie to niewygodne dla developera...

Gavatar Olek

26.01.2013 Olek

Przydatny poradnik :)

Dodaj komentarz