PROGRAMOWANIE i WEBMASTERKA

Informacje i porady dla programistów i webmasterów. Wersja bardzo beta

CSS3 praktyczny przykład zastosowania

Prowadzenie tego bloga rozpocząłem od porad na temat CSS3, teraz zobaczmy na praktycznym przykładzie co można osiągnąć dzięki zastosowaniu kaskadowych stylów w wersji 3. W tym celu przyjrzyjmy się stronie Aktualna Faza Księżyca, na której zastosowano kilka z nowych właściwości CSS3.

Powyższa strona pozwala na obserwację aktualnej bądź symulowanej (czas) fazy Księżyca oraz jego położenia względem Słońca i Ziemi. Umożliwia też animację wyglądu i położenia Księżyca. W całości jest wykonana z html’u z użyciem javascriptu i CSS3. Właściwości CSS3 bez, których nie było by możliwe wykonanie tejże strony, to obrót i przezroczystość.

Kiedy uruchomimy animację (przyciskiem strzałki w prawym górnym rogu), możemy zobaczyć, że obrazek Ziemi obraca się, oraz zmienia się zacienienie Księżyca. Obrót wykonany jest funkcją rotate(deg) (w przypadku starszych wersji IE wykorzystano filtr: filter:progid:DXImageTransform.Microsoft.Matrix(M11=’1.0′, sizingmethod=’auto expand’)), a zacienienie Księżyca stylem opacity:X (w przypadku CSS3) i filtrem filter:alpha(opacity:X) w przypadku starszych wersji IE.

Oczywiście pokazana strona nie wykorzystuje wszystkich nowych możliwości CSS3. Nie ma tu na przykład transformacji 3D, czy gradientów ale na jej przykładzie chciałem pokazać, że korzystając z trzeciej wersji stylów kaskadowych można osiągnąć już praktyczne efekty bez potrzeby wykorzystywania animacji flash’owych czy tym podobnych.

Komentuj

*