Gradienty
niedziela, 23 sierpnia 2009
Każda nowoczesna
strona obowiązkowo musi mieć:
- Zaokrąglone brzegi
- Cienie
- 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 którym rysuje się projekt strony,
- tnie się na małe obrazki,
- które później są ładowane w przeglądarce.
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:
- -moz-border-radius, -webkit-border-radius
- text-shadow, -moz-box-shadow, -webkit-box-shadow
- -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:
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: canvas, javascript, programowanie, R
Red 20:59
Prześlij komentarz