Gradienty

niedziela, 23 sierpnia 2009

Każda nowoczesna strona obowiązkowo musi mieć:

  1. Zaokrąglone brzegi
  2. Cienie
  3. Gradienty

Moda… Nie ma tu nic nowoczesnego, efekty te są w użyciu od co najmniej 10-ciu lat.

Co ciekawe, mają one pewną wspólną cechę: są nieosiągalne bez wsparcia ze strony…

programu graficznego:

W latach '90 były one wstawiane wprost do dokumentu za pomocą tagów img. Później uznano, że to jest złe i teraz ukrywa się je w deklaracji stylów.

Da się inaczej…

Wcale nie musi tak być. Wystarczy zgoda na to, by gorsze przeglądarki nie pokazywały naszej strony w pełnym blasku i chwale.

Gotowe rozwiązania już są i tylko czekają na odważnych:

  1. -moz-border-radius, -webkit-border-radius
  2. text-shadow, -moz-box-shadow, -webkit-box-shadow
  3. -webkit-gradient i wkrótce -moz-linear-gradient i -moz-radial-gradient

Tu pojawia się pewien problem. Pierwsze dwa efekty są łatwe w użyciu i wielu już z nich korzysta. Z gradientami jest inaczej. Jeszcze niedawno obsługiwały je wyłącznie przeglądarki oparte o WebKit. Teraz do tego grona dołączył Firefox 3.6, ale…
1) Nie jest on przeznaczony dla zwykłych śmiertelników,
2) Zaproponowana składnia css jest inna, niż ta pochodząca z Safari.

Tak więc, trzeba będzie jeszcze trochę poczekać na w pełni aprobowane rozwiązanie.

Zabawy z elementem Canvas

Z odsieczą przybywa Canvas, obecny w przeglądarkach od lat i używany na przykład przez Google Maps.

Oto działający przykład:

… do którego obejrzenia będzie potrzebna prawdziwa przeglądarka.
bazgroly.htm.

Ten jeden plik, prosty edytor, przeglądarka, oraz samouczek z MDC, wystarczą do eksperymentów, nauki i zabawy (jeśli ktoś lubi takie rzeczy).

Skoro, przeglądarki, mają tak wielkie możliwości, to czemu z nich nie korzystać? Żadnych obrazków na serwerze, grafika dostosowywana do rozmiaru elementów, możliwość zmiany kolorystyki zależnie od widzi mi się… Kusi? … Owszem.

Rysujemy

Jak wstawić grafikę, nie modyfikując niczego poza arkuszem stylów?

Na początek najłatwiejsze. By przygotować canvas poza ekranem, wystarczy takie polecenie:

var canvas = document.createElement("canvas");
canvas.width = 1;
canvas.height = 100;

Narysowanie pożądanego efektu też nie jest trudne:

var g = canvas.getContext("2d");
var gradient = g.createLinearGradient(0,0, 0,100);
    gradient.addColorStop(0, "#000");
    gradient.addColorStop(1, "#fff");
g.fillStyle = gradient;
g.fillRect(0,0, 1,100);

Tutaj kończy się wsparcie dla IE. Owszem, istnieje Excanvas, który oferuje prawie wszystkie możliwości, ale to nie wystarczy.

Końcowy rezultat

Na koniec kilka pomysłów na wstawienie grafiki na stronę… Wszystkie są oparte o jedną metodę toDataUrl.

Do obrazka…

img.src = canvas.toDataURL();

W tle, z wykorzystaniem styli inline…

div.style.backgroundImage = "url(" + canvas.toDataURL() + ")";

… oraz poprzez arkusz styli

var style = document.createElement("style");
document.getElementsByTagName("head")[0].appendChild(style);

style.textContent = 
    "body { background-image: url(" + 
        canvas.toDataURL() + 
    "); }";

Ta strona jest przykładem ostatniego, najmniej inwazyjnego, rozwiązania.

Gotowe

Miłym zaskoczeniem okazało się bardzo dobre wsparcie opisanej techniki we wszystkich liczących się przeglądarkach. W odróżnieniu od moich poprzednich eksperymentów z css, gdzie rezultaty były niespójne, nawet w obrębie jednej rodziny przeglądarek, tutaj wszystko działa bez najmniejszych zastrzeżeń.

Końcowy rezultat, wydaje się być bardzo obiecujący, a zaprezentowany kod nadaje się nie tylko do rysowania (tak na prawdę nudnych) gradientów.

Jedynym ograniczeniem pozostaje wyobraźnia.

Etykiety: , , ,

Red 20:59

Komentarze

Prześlij komentarz

Odnośniki

Utwórz link

Archiwum

Subskrybuj

RSS / Atom