CSS 3.0 Maker to kolejna, ślicznie zresztą zrealizowana aplikacja webowa, która pozwala poćwiczyć nową wersję kaskadowych arkuszy stylów. Polecenia są zgrupowana na kartach, jest podgląd efektu, a co istotne, informacja o obsłudze przez przeglądarki. Oczywiście automatycznie jest też generowany kod, który można pobrać jako stronę internetową lub po prostu skopiować.

Na marginesie, eksplozja aplikacji webowych owocuje pojawianiem się naprawdę świetnych pomysłów. Dla webmasterów CSS 3.0 Maker jest po prostu obowiązkowy. No i wielkie brawa dla autora.

Pod adresem http://css3please.com/ jest "piaskownica", w której możesz poćwiczyć niektóre elementy kaskadowych arkuszy stylów w wersji 3, np. zaokrąglenie, cieniowanie czy gradient. Jeśli korzystasz z przeglądarki akceptującej takie style (najnowsze wersji Opery, Firefoksa czy Chrome), wystarczy wstawić kursor w miejscu, gdzie widnieją wartości parametrów (na żółto) i obserwować, jak zmienia się postać pudełka. Zwracaj jedynie uwagę na miejsce - webkit dotyczy Safari i Chrome, moz - Firefoksa, natomiast kod bez prefiksu - Opery.  To bez wątpienia przydatna wizualizacja stylów, która pomoże mniej wprawnym webmasterom w zrozumieniu, jak działają style.

O to się Polska biła! Wielu webmasterów korzysta w Firefoksie ze świetnego dodatku webmasterskiego Web Developer - tym razem autor, Chris Pederick, zaoferował wstępną wersję (v. 0.1) tego samego dodatku dla Chrome. Nie wszystko jeszcze działa, jak należy, ale to dobry początek, który zachęci niejednego webmastera do częstszego korzystania z Chrome.

Na przykładowej ilustracji włączona jest opcja Display Image Paths.

Na marginesie, polecam notkę o edytorze HTML wbudowanym w Chrome, czyli Chrome Editor.

Helion dorzucił do Poradnika webmastera forum dyskusyjne - dostępne w górnym menu. Nie wymyślano koła na nowo, forum jest oparte na sprawdzonym systemie phpBB. Mamy nadzieję, że przyda się użytkownikom.

Działy forum to: HTML/XHTML, CSS, AJAX/JavaScript, PHP/MySQL, CMS, Web Design, SEO, Hosting, Praca dla webmastera, Nowe książki, Hydepark.

http://webmaster.helion.pl/

Przy okazji - kurs Twittera, który zacząłem pisać kilka dni temu, ma już pięć odcinków.

Pójdę o zakład, że jednym z częściej wykorzystywanych na stronach efektów będą zaokrąglone rogi pojemników. Umiejętnie wykorzystane, mogą być przyjemnym elementem wizualnej strony witryny.

Załóżmy, że mamy jakiś pojemnik - oczywiście aby można go było zobaczyć, powinien mieć odmienne tło. Niech definicja bloku będzie następująca:

Jednostkami miary mogą być px, pt, em, ale nie %.

I przykład:

Dodajmy dla porządku, że na razie stosujemy dodatkowo prefiksy, a nie wyłącznie czystą postać definicji, czyli -webkit-border-radius i -moz-border-radius, dzięki czemu czytają je Firefox, Chrome i Safari.

Zauważ, że wartość border-radius: 10px zaokrągla wszystkie rogi jednocześnie. Gdybyśmy chcieli zaokrąglić je w różnym stopniu, musielibyśmy wymienić kilka wartości, od lewego górnego zgodnie ze wskazówkami zegara, a więc np. border-radius: 10px 20px 20px 0px. 

Można też wymienić wybrane rogi, stosując border-top-left-radius, border-top-right-radius, border-bottom-right-radius i border-bottom-left-radius.

Gdy mamy ściśle określone wymiary pojemnika, uzyskujemy coraz większe zaokrąglenie, podając coraz wyższą wartość zaokrąglenia, np. 20px 50px 50px 50px.

Jeśli pojemnik jest kwadratowy, podanie zaokrągleń o wielkości połowy boku uczyni z pojemnika koło.

Naturalnie możemy dowolnie definiować tło pojemnika, kolor, grubość i styl obramowania, uzyskując potrzebne nam wyniki. Można też oczywiście łączyć takie obramowania z cieniowaniem.

W projektowanej specyfikacji CSS3 znajduje się szereg narzędzi do przekształceń 2D i 3D. Pokażemy tutaj kilka przykładów manipulowania ilustracjami - polecenia te możemy też wykorzystać do przekształcania innych elementów, np. bloków tekstu, ale chyba najczęściej będą one stosowane w odniesieniu do zdjęć.

Polecenie ma postać transform, po którym umieszczamy szereg parametrów i ich wartości. Na razie musimy stosować prefiksy -moz i -webkit, dzięki którym odczytują je poprawnie Firefox, Chrome i Safari; czyli -moz-transform i -webkit-transform.

Przykładowo, mamy obrazek w oryginalnej postaci:

Gdy w definicji obrazka zastosujemy styl o postaci:

obrazek zostanie zmniejszony o 20%.

Podobnie możemy powiększać obraz. Zauważ od razu, że niezmiennikiem powiększenia jest środek obrazu, a powiększenie spowoduje przysłonięcie znajdujących się przed nim lub za nim elementów.

Możemy skalować obraz tylko na szerokość lub na wysokość, stosując parametr scaleX lub scaleY.

Parametr rotate pozwala obrócić obraz o pewną liczbę stopni, np. rotate(15deg).

Gdybyśmy użyli wartości ujemnej, obraz zostanie obrócony w lewo. Obrotowi powinno towarzyszyć użycie stylów margin-top i margin-bottom, aby obrócony obraz nie przysłaniał elementów nad nim i pod nim.

Z kolei użycie parametru skew pozwoli pochylić obraz. Gdy zastosujemy parametr skew(20deg), uzyskamy przekrzywienie w lewo, według osi X. Użycie wartości ujemnej spowoduje przekrzywienie w prawo.

Dodanie w skew drugiej wartości, np. skew(20deg, 10deg), pozwoli uzyskać nie tylko przekrzywienie w osi X, ale i dodatkowo w osi Y.

Użycia tego polecenia w odniesieniu do tekstu raczej nie zalecam, chyba że ktoś chce uzyskać jakieś specjalne efekty.

Zmanipulowany śródtytuł

Z przykładów tych (jak również z pokazanych w poprzednich wpisach) widać jasno, jak potężne narzędzia wizualizacyjne oferuje projekt nowej specyfikacji stylów. Oczywiście trzeba je stosować z głową, aby fantazyjne efekty nie przysłoniły treści.

Kolejna przyjemna nowość kaskadowych arkuszy stylów w wersji 3 to cieniowanie pojemników, uzyskiwane za pomocą polecenia box-shadow.

Przykładowy styl:

Pierwsza wartość określa przesunięcie w prawo, druga - przesunięcie w dół, trzecia - rozmycie. #888 to kod koloru.

Na razie czysty kod nie działa, musimy stosować prefiksy odpowiadające implementacjom w przeglądarkach, a więc -moz-box-shadow i -webkit-box-shadow. Polecenie interpretują zatem Firefox, Chrome i Safari.

Pełny kod przykładu (w pierwszym wierszu jest definicja samego pojemnika:

Efekt:

Ten akapit znajduje się w cieniowanym pojemniku.

Możemy użyć wartości negatywnych, które inaczej ustawiają cieniowanie (w lewo i w górę).

Pełny kod przykładu:

Efekt (z dodatkowym marginesem po lewej stronie):

Ten akapit znajduje się w cieniowanym pojemniku.

Cieniowaniem możemy oczywiście obejmować inne obiekty, np. grafiki.

Obsługa tekstu była zawsze oczkiem w głowie zarówno twórców specyfikacji kaskadowych arkuszy stylów, jak i przeglądarek - nic dziwnego, że jedną z najszybciej zaimplementowanych zmian w trzeciej wersji CSS jest cieniowanie tekstu. Interpretują je najnowsze wersje Firefoksa, Opery i Chrome, i to bez prefiksów.

Definicja stylu jest prosta - dla przykładu:

Gray to oczywiście kolor. Pierwsza wartość liczbowa odpowiada za przesunięcie tekstu w prawo, druga za przesunięcie w dół, trzecia - za dodatkowe rozmycie. Gdyby nie było trzeciej wartości, tekst miałby ostrzejsze krawędzie.

Porównanie - pierwsza wersja z rozmyciem, druga bez rozmycia.

----

W epoce baroku nastąpił niebywały rozwój nauk przyrodniczych, określany jako rewolucja naukowa.

W dziedzinie biologii William Harvey opisał działanie układu krwionośnego, a John Ray stworzył pierwszą systematykę roślin. Dzięki mikroskopowi przełomowych odkryć dokonali również Robert Hooke, Antonie van Leeuwenhoek i Marcello Malpighi. Z kolei Robert Boyle rozpoczął erę nowoczesnej chemii.

W epoce baroku nastąpił niebywały rozwój nauk przyrodniczych, określany jako rewolucja naukowa.

W dziedzinie biologii William Harvey opisał działanie układu krwionośnego, a John Ray stworzył pierwszą systematykę roślin. Dzięki mikroskopowi przełomowych odkryć dokonali również Robert Hooke, Antonie van Leeuwenhoek i Marcello Malpighi. Z kolei Robert Boyle rozpoczął erę nowoczesnej chemii.

----

Łatwo zauważyć, że wersja z rozmyciem mniej "bije po oczach", jest nieco przyjemniejsza w odbiorze i nie mamy wrażenia kłopotów ze wzrokiem.

Jedną z użytecznych technik wprowadzanych w specyfikacji kaskadowych arkuszy stylów w wersji 3 są szpalty (ang. columns). Na razie są one interpretowane przez silniki Gecko i Webkit, a na dodatek konieczne jest użycie prefiksów -moz i -webkit, gdyż "czysta" definicja nie jest jeszcze interpretowana (Opera posługiwała się jakiś czas temu prefiksem -o, ale zrezygnowała z niego).

Oto przykład dwuszpaltowego tekstu objętego znacznikiem DIV, w którym styl został zdefiniowany następująco:

column-count wskazuje oczywiście liczbę szpalt, natomiast column-gap określa odstęp między szpaltami, zaś column-rule - postać linii rozdzielającej szpalty. Właściwą interpretację zobaczą użytkownicy Firefoksa, Chrome i Safari. Cytowany fragment pochodzi z hasła Barok w polskiej Wikipedii.

Jak widać, jest to bardzo przydatna technika, która pozwoli lepiej gospodarować przestrzenią tekstu, przede wszystkim tam, gdzie jest szerokie okno.

Pod adresem http://webmaster.helion.pl jest już dostępna nowa wersja Poradnika webmastera. To nieco zaktualizowana wersja - przede wszystkim uzupełniłem interpretację stylów, nieco poprawiłem niektóre fragmenty. Ale obowiązuje ciągle HTML4 i CSS2, więc nie ma fundamentalnych zmian, aczkolwiek powolutku będą się ukazywać, w miarę pojawiania się obsługi w przeglądarkach, także elementy nowszych specyfikacji.

Do Poradnika dodany został kurs PHP (innych autorów), napisałem też wstępy do Joomla i Witryn Google, przeniosłem również wstęp do ePub. Prawdopodobnie pojawią się następne materiały udostępnione przez Helion, ale to na razie plan. Przygotowywane jest forum dyskusyjne - powinno być w tym tygodniu. Starsze materiały, także zip z poprzednią wersją, są dostępne pod niewyszukanym tytułem Starocie.

W sumie, z przeniesieniem kursu było sporo roboty, gdyż w biegu uczyłem się obsługi Joomli i musiałem wojować z rozmaitymi problemami technicznymi, zwłaszcza prezentacją kodów źródłowych, zachowaniem edytorów itd. Mam nadzieję, że nie ma jakichś większych usterek.

Zapraszam zatem - obecna wersja jest na pewno bardziej funkcjonalna, a i wizualnie przyjemniejsza niż poprzednia.

--

Późniejszy dopisek: w ciągu doby od startu nowej wersji zanotowałem ponad 7 tys. wizyt i z górą 48 tys, wyświetleń stron (dane z komponentu JoomlaStats) - życzyłbym sobie utrzymania takich statystyk, ale to raczej mało realne, bo na razie czytelnicy zapewne "obwąchują" nową odsłonę kursu.