Wspominałem kilka dni temu o wprowadzeniu do kursu HTML bloku stylów Transition, które spolszczyłem jako Przemiana, choć nie mam pewności, czy jest to w pełni trafne. Być może lepsza nazwa jeszcze się utrze (czytelnik zaproponował ładne Metamorfoza).

W bloku tym jest polecenie transition-property, które może być niejasne - warto o nim chyba szerzej powiedzieć i wyjaśnić możliwe wątpliwości. W ogóle trzeba zauważyć, że CSS3 jest koncepcyjnie nieco trudniejszy, zwłaszcza gdy mowa o dynamicznie zmieniających się obiektach. Dobrze opanowane i zręcznie stosowane style mogą jednak dać naprawdę ciekawe wyniki.

Transition-property definiuje zakres własności obiektu, które mogą podlegać przemianie. Ma trzy wartości: all włącza (potencjalnie) wszystkie własności do przemiany, none wyklucza wszystkie, natomiast trzecia wartość to po prostu imiennie wskazane własności - w przypadku pojemnika może to być width, height, border itd. W poniższym przykładzie deklarujemy, że stopniowej przemianie będzie ulegać jedynie szerokość i wysokość pojemnika.

Uwaga: czysty kod na razie nie działa, konieczne jest stosowanie prefiksów -moz- (Firefox 4), -o- (Opera) i -webkit- (Chrome, Safari).

div {
width:100px;
height: 100px;
background-color:khaki;
transition-property: width, height;
transition-duration: 3s;
}

W osobnym bloku kodu, który wyzwala przemianę (często z użyciem pseudoklasy :hover, czyli po nasunięciu kursora myszy) wymieniamy z kolei cechy obiektu, które zostaną faktycznie zmienione.

div:hover {
width: 300px;
height: 150px;
border: 5px solid red;
background-color:gainsboro;
}

Teraz, po przesunięciu kursora myszki nad pojemnik, zmienią się wszystkie wymienione wyżej własności, ale jedynie width i height zmienią się płynnie, gdyż tylko one zostały uwzględnione w poleceniu transition-property. Pozostałe zmienią się błyskawicznie.

Gdybyśmy w transition-property użyli wartości none, żadna własność nie będzie płynnie zmieniana (we wszystkich nastąpi natychmiastowa przemiana), natomiast użycie all spowoduje, że wszystkie własności wymienione w wyzwalaczu będą stopniowo modyfikowane.

Przykład, w którym szerokość i wysokość zmienia się płynnie, a kolor tła i obramowanie natychmiast - przesuń kursor nad pojemnik.

Na marginesie warto jeszcze wspomnieć, że wyrażane są tu i ówdzie wątpliwości, czy nie byłoby zasadne połączenie w jeden blok stylów Transitions i Animations - obie techniki realizują zbliżone cele i niektórzy (w tym "ojciec" CSS, Norweg Hakon Wium Lie - obecnie w Operze) twierdzą, że ma miejsce niepotrzebne powielanie niektórych technik. Inni twierdzą, że rozdzielenie jest zasadne, tak więc zobaczymy, jak będzie ostatecznie.

Przykład bardzo prymitywnego zegara sporządzonego wyłącznie za pomocą stylów - to połączenie szeregu technik CSS3:

div.strzalka
{
position:relative; left:200px;
width:0px;
height:0px;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 100px solid green;
animation: zegar 12s infinite 2s; 
-webkit-animation: zegar 12s infinite 2s; 

}

div.tarcza
{
width:200px;
height:200px;
background-color:khaki;
border-radius:50%;
border: 1px solid; 
position:relative: 200px;
}

@keyframes zegar
{
0% {transform:rotate(0deg); transform-origin:bottom;}
8.33% {transform:rotate(30deg); transform-origin:bottom;}
16.66% {transform:rotate(60deg); transform-origin:bottom;}
25% {transform:rotate(90deg); transform-origin:bottom;}
33.3% {transform:rotate(120deg); transform-origin:bottom;}
41.6% {transform:rotate(150deg); transform-origin:bottom;}
50% {transform:rotate(180deg); transform-origin:bottom;}
58.3% {transform:rotate(210deg); transform-origin:bottom;}
66.6% {transform:rotate(240deg); transform-origin:bottom;}
75% {transform:rotate(270deg); transform-origin:bottom;}
83.3% {transform:rotate(300deg); transform-origin:bottom;}
91.6% {transform:rotate(330deg); transform-origin:bottom;}
100% {transform:rotate(360deg); transform-origin:bottom;}
}

@-webkit-keyframes zegar
{
0% {-webkit-transform:rotate(0deg); -webkit-transform-origin:bottom;}
8.33% {-webkit-transform:rotate(30deg); -webkit-transform-origin:bottom;}
16.66% {-webkit-transform:rotate(60deg); -webkit-transform-origin:bottom;}
25% {-webkit-transform:rotate(90deg); -webkit-transform-origin:bottom;}
33.3% {-webkit-transform:rotate(120deg); -webkit-transform-origin:bottom;}
41.6% {-webkit-transform:rotate(150deg); -webkit-transform-origin:bottom;}
50% {-webkit-transform:rotate(180deg); -webkit-transform-origin:bottom;}
58.3% {-webkit-transform:rotate(210deg); -webkit-transform-origin:bottom;}
66.6% {-webkit-transform:rotate(240deg); -webkit-transform-origin:bottom;}
75% {-webkit-transform:rotate(270deg); -webkit-transform-origin:bottom;}
83.3% {-webkit-transform:rotate(300deg); -webkit-transform-origin:bottom;}
91.6% {-webkit-transform:rotate(330deg); -webkit-transform-origin:bottom;}
100% {-webkit-transform:rotate(360deg); -webkit-transform-origin:bottom;}
}

Tylko Chrome i Safari obsługują na razie animacje zbudowane za pomocą CSS3 - łącznie to 13 procent użytkowników przeglądarek internetowych. A jest o co się bić - oglądam czasem przykłady animacji imponujących dopracowaniem i pomysłowością. Poniżej jest tylko prosty i prymitywny przykład:

A tak to powinno wyglądać - wideo:

Technikę opiszę wkrótce bardziej szczegółowo w kursie HTML.

W kursie HTML umieściłem kolejny blok stylów CSS3 - transition. Używam tu polskiego tłumaczenia "przemiana", bo "przejście" jakoś nie bardzo mi pasuje - może zresztą utrze się jakieś inne, zobaczymy.

http://webmaster.helion.pl/index.php/css3-przemiana

Blok obejmuje zbiorcze polecenie transition oraz poszczególne jego części składowe: transition-property (zmieniany wymiar), transition-duration (czas przemiany), transition-timing-function (rozkład czasowy przemiany) oraz transition-delay (opóźnienie startu przemiany).

Style obsługują Opera, Chrome i Safari, natomiast Internet Explorer 9 RC i Firefox 4 z błędami. Dlatego dla użytkowników IE i Firefoksa sporządziłem też dwa króciutkie screencasty (w rozdziale transition) pokazujące, o co tu w ogóle chodzi.

Przykład przemiany

Rok temu pisałem w blogu o szpaltach w kaskadowych arkuszach stylów poziomu 3. Teraz umieściłem w kursie HTML bardziej systematyczny wykład tej techniki - na razie szpalty są obsługiwane w zasadniczej części przez Firefoksa, Chrome i Safari, ale i tak nie wszystkie polecenia są w nich dostępne. Internet Explorer i Opera nie zabrały się jeszcze za wdrażanie tej użytecznej techniki webmasterskiej.

Odsyłam na stronę:

http://webmaster.helion.pl/index.php/css3-szpalty

We wpisie Doktorat z obramowania zapowiadałem opracowanie w kursie HTML bloku zagadnień związanych z obramowaniem pojemników. Właśnie skoczyłem opis, aczkolwiek o ile zaokrąglenia i cieniowanie są dość łatwe i w pełni wdrożone w przeglądarkach, o tyle obrazkowe obramowania są gotowe połowicznie. Działa podstawowa część zbiorczej definicji border-image, natomiast nie działają jeszcze w przeglądarkach "kanoniczne" definicje poszczególnych parametrów definiowanych z osobna. Dlatego na razie, podając klasyczne definicje, pokazuję też obejścia.

Najtrudniejsze jest zrozumienie, jak dzielony jest obrazek i jakie jego części wchodzą do obramowania. Wydaje się, że udało mi się to w miarę prosto wyjaśnić, przy czym posłużyłem się tu wspominaną już poprzednio aplikacją Border Image Generator, z której zdjąłem kilka ekranów. Gdy uchwycimy, na czym polega "wycinanie" fragmentów obrazka i wstawanie ich do obramowania, jaka jest mechanika działania tego narzędzia, będziemy już w domu.

Nawiasem mówiąc, jest zamieszanie w rozumieniu wirtualnych na razie poleceń outset, slice, width - zaobserwowałem różne interpretacje, a czasem wręcz bezradne rozkładanie rąk - specyfikacja jest tu zagmatwana, a i tak stosujemy na razie obejście. Zobaczymy, co będzie się działo dalej.

Zapraszam zatem ponownie na stronę całego bloku informacji o obramowaniach - webmaster.helion.pl/index.php/css3-obramowania. Będę ją jeszcze uzupełniać, jeśli tylko przeglądarki będą wdrażać poszczególne polecenia w sposób zgodny z zaleceniami W3C. Już teraz polecam jednak tym webmasterom, którzy jeszcze nie interesowali się głębiej nowymi stylami, zapoznanie się z tymi technikami. Są po prostu użyteczne i pozwalają tworzyć efektowne strony.

Ozdobne obramowanie pojemnika, o jakim tu ostatnio pisałem, nie musi się ograniczać do prostych malunków zmajstrowanych w jakimś fotoretuszerze (swoją drogą, czekam na gotowe kolekcje ramek do pobrania). Możemy skorzystać np. z fotografii ramy obrazu.

W celach demonstracyjnych pobrałem z serwisu Wylio zdjęcie obrazu na licencji Creative Commons. Następnie wyciąłem obraz z ram, całej powierzchni poza ramami nadałem przezroczystość (posługuję się zwykle bezpłatnym programem Paint.NET) i zapisałem jako przezroczysty plik PNG.

Następnie zdefiniowałem ramkę pojemnika (trochę zawiły adres pliku w SkyDrive):

style="width: 500px; height:200px; padding:10px; border-width: 40px;
-moz-border-image: url(http://public.blu.livefilestore.com/y1phTmyXL7v02jPg9teAIt-LUIQVaEvM5IWoMakIfNYAc4uPXnKOrfKL9_We6Ws8i7QS5CVEGoNBP_2S8XeeGo8dg/RamaObrazu.png?psid=1) 41 repeat;
-webkit-border-image: url(http://public.blu.livefilestore.com/y1phTmyXL7v02jPg9teAIt-LUIQVaEvM5IWoMakIfNYAc4uPXnKOrfKL9_We6Ws8i7QS5CVEGoNBP_2S8XeeGo8dg/RamaObrazu.png?psid=1) 41 repeat;
-o-border-image: url(http://public.blu.livefilestore.com/y1phTmyXL7v02jPg9teAIt-LUIQVaEvM5IWoMakIfNYAc4uPXnKOrfKL9_We6Ws8i7QS5CVEGoNBP_2S8XeeGo8dg/RamaObrazu.png?psid=1) 41 repeat;
border-image: url(http://public.blu.livefilestore.com/y1phTmyXL7v02jPg9teAIt-LUIQVaEvM5IWoMakIfNYAc4uPXnKOrfKL9_We6Ws8i7QS5CVEGoNBP_2S8XeeGo8dg/RamaObrazu.png?psid=1) 41 repeat;"

Ostatecznie tekst w ramce zyskuje taką oto postać (dwa przykłady z różnymi rozmiarami pojemnika):

Pracuję w tej chwili w kursie HTML nad blokiem zagadnień związanych z obramowaniem pojemników. O ile efektowne zaokrąglenia narożników czy cieniowanie pojemnika jest lekkie, łatwe i przyjemne, to schody zaczynają się z chwilą dojścia do obramowań w postaci obrazków.

Tak zagmatwanej techniki to jeszcze chyba nie widziałem w CSS. Nie dość, że przeglądarki nie obsługują kanonicznych poleceń specyfikacji (jedne stosują swoje obejścia, inne w ogóle nic nie widzą), to zrozumienie sensu skomplikowanego "układu równań" graniczy z cudem. Obawiam się, że wielu mniej wprawnych webmasterów będzie mieć problemy z uchwyceniem technicznych drobiazgów, choć ich efekt jest wart włożonej pracy, bo można tworzyć bardzo ładnie wyglądające ramki.

Dobrym treningiem będzie pobawienie się webową aplikacją Border Image Generator - zmieniając parametry, a zwłaszcza manipulując suwakami, można się przypatrywać, co się dzieje z obrazkiem po prawej stronie i na podglądzie, oraz jak zmieniają się wartości w definicji stylu. Dzięki temu programowi zrozumiałem mechanikę działania stylu, a teraz zastanawiam się, jak przełożyć to na wykład w kursie, aby jeszcze bardziej nie zagmatwać problemu. Zapewne zdołam to zrobić w najbliższym czasie, a na razie odsyłam chętnych do wspomnianego generatora - radzą sobie z nim Firefox i Chrome, Opera nie pokazuje podglądu, zaś Internet Explorer w ogóle jest w lesie.

Polecam też interaktywne demo:

http://www.norabrowndesign.com/css-experiments/border-image-anim.html

I jeszcze przykład pokazujący, że warto tę technikę zgłębić:

I ilustracja (zrzut ekranowy) dla osób, których przeglądarki nie widzą tego stylu:

W kursie HTML umieściłem opracowanie technik manipulowania tłem graficznym w pojemnikach - oczywiście mam na myśli nowe polecenia - background-size (wielkość tła), background-origin (zakres zajmowanego obszaru pojemnika) i background-clip (przycinanie tła).

http://webmaster.helion.pl/index.php/css3-tlo

Podane są kody, żywe przykłady, a także ilustracje dla tych użytkowników, których przeglądarki nie obsługują tych stylów.

Obsługa jest zróżnicowana - najlepiej to wygląda w przypadku background-size, gdzie nie radzi sobie tylko IE8. ciut gorzej w background-origin, gdzie poległy IE8 i FF3.x, a całkiem słabo w background-clip, gdzie działa tylko Opera oraz FF4 i IE9.

Widać tu wyraźnie, ile czasu jeszcze upłynie, zanim będzie można swobodnie posługiwać się takimi poleceniami bez stosowania żadnych dodatkowych sztuczek i ryzyka, że interpretacja będzie mocno odmienna w różnych programach. Cały kłopot w tym, że dominujący na światowym rynku Internet Explorer rozwija się wprawdzie sukcesywnie, ale najnowsza wersja nie jest dostępna dla Windows XP, który zajmuje ciągle spory kawał rynku systemów operacyjnych. Może się więc powtórzyć sytuacja z pierwszej połowy poprzedniej dekady, gdy to przeglądarka Microsoftu była hamulcowym webmasterstwa - gorzki paradoks polega tu na tym, że tym razem programiści Microsoftu naprawdę mocno nad nią pracują.

Oprócz tego umieszczam też sukcesywnie w kursie przetestowane ostatnio w blogu selektory pseudoklas.

http://webmaster.helion.pl/index.php/css3-selektory/css3-selektory-pseudoklas

Pseudoklasa :nth-last-child, podobnie jak :nth-last-of-type, wybiera elementy licząc od końca - z tą jednak różnicą, że nie ogranicza się do jednego typu, lecz uwzględnia wszystkie dzieci danego rodzica.

Definicja o postaci:

spowoduje wybranie trzeciego od końca elementu na liście.

• jeden
• dwa
• trzy
• cztery
• pięć
• sześć

Możliwe wartości to liczby, odd (nieparzyste), even (parzyste) i formuły, np. 3n+1.

Selektor jest obsługiwany przez wszystkie przeglądarki za wyjątkiem IE8.