Tworzenie stron

CSS3 pomocnikiem projektowania


Część z was być może wie, że na co dzień zajmuję się projektowaniem stron, grafiką i frontendem jako takim. Jako, że dawno nie pisałem o niczym związanym z projektowaniem, dziś opiszę nieco samego CSS3, jak i narzędzia, dzięki którym będziemy w stanie ułatwić sobie użycie nowych styli na naszych stronach.

Kaskadowe arkusze stylów

Wiecie, że CSS liczy sobie już około 15 lat? Czas leci szybko, prawda? :)

CSS (ang. Cascading Style Sheets) jak większość z was pewnie wie to język, który jest używany w celu kontroli stylu i wyglądu stron internetowych. Nie jest moim celem tworzenie kolejnego opisu, czy samouczka dotyczącego języka CSS (publikacji w tym temacie jest cała masa) stąd skupię się na czym innym, a mianowicie na tym, co CSS3 (najwcześniejsza wersja CSS3 powstała w 1999 roku! ;) może nam dać, jakie prace ułatwić i w jaki sposób jego używać.

CSS3 jest nowoczesny i wspomagany w mniejszym bądź większym stopniu przez większość dzisiejszych przeglądarek. W zasadzie jedyną kwestią, która powoduje, że nie wszyscy go jeszcze w pełni stosują, jest popularność nieszczęsnego IE, który od zawsze miał problem ze spełnianiem standardów sieciowych.

Można co prawda budować strony tylko pod Firefoxa, Chrome, czy Operę, ale nikt z nas, ani żaden świadomy klient nie zgodzi się „od tak” na promocję swoich usług z pominięciem osób, które mają na swoich komputerach wciąż zainstalowany Internet Explorer w wersji 7, czy nawet 6. A tych jest ciągle sporo. Dlatego mimo, że CSS3 istnieje już kilka dobrych lat, ciągle tak naprawdę czeka na swoje odrodzenie.

Kiedy CSS3 bywa pomocny

css zaokrągleniaProjektując grafikę lubimy zaokrąglać krawędzie i inne moduły na stronie. W wielu przypadkach strona wygląda wówczas nieco bardziej nowocześnie, niż przy twardych, klocowatych bryłach o wymiarach prostokąta. Mamy przykładowo sidebar (najczęściej boczny blok w co najmniej dwukolumnowej witrynie), który zawiera box z kalendarzem. Możemy box zaokrąglić z poziomu np. Adobe Photoshopa, pociąć i wstawić. Można? Można. Grafika pociętych zaokrągleń ma wymiary, takie jakie zostały jej nadane podczas fazy projektowania w Photoshopie, a więc jeśli wycięliśmy spód boxa o szerokości 200px z zaokrągleniami np. 10px, to po użyciu standardowego CSS nasz box będzie wyglądał jak wcześniej w oprogramowaniu firmy Adobe. A co jeśli w pewnym momencie uznamy, że nasz box powinien mieć nie 200 px, a np. 230 px? Znowu projektowanie, cięcie, poprawa CSS, voila, ale czas musieliśmy poświęcić. Ci bardziej sprytni, tak zaprojektują box, by szerokość boxa była dowolna, zaś same zaokrąglenia były za pomocą CSS „doklejane” do odpowiednich rogów. Ok, a co jeśli uznamy, lub co gorsza – klient uzna, że zaokrąglenia boxa są za duże i nie chcemy 10px, a jedynie połowę tego?

CSS3 to wszystko uproszcza. Projektujemy box (często możemy pominąć nawet samego Photoshopa), dodajemy style, zaś same zaokrąglenia 5 px załatwia poniższy kod:

-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;

Chcemy 10 px? Zmieniamy na 10, chcemy 30? Nie ma problemu..

Powyższy przykład jest oczywiście jednym z wielu, dla których możemy znaleźć miejsce na zastosowanie CSS3. Są inne jak cienie, gradienty, rotacje i wiele wiele innych..

Pomocne narzędzia

Jako, że nie wszyscy lubią szukać pomocy u wujka google i/lub nie wszyscy znają CSS3 na pamięć, w Intenecie możemy znaleźć wiele przydatnych narzędzi, które pomogą zautomatyzować nam pisanie części kodu. Poniżej lista stron (aplikacji internetowych)  z których sam czasem korzystam:

  • http://border-radius.com/ – powyższe zaokrąglenia zostały wygenerowane za pomocą właśnie tego narzędzia, mi nigdy nie chce się tego robić ręcznie ;-)
  • http://css3generator.com/ – za pomocą tej aplikacji, wygenerujemy sobie wiele innych ciekawych linii kodu (border radius, text shadow, box shdow, gradienty, wiele innych)
  • http://www.css3maker.com/ – kolejny, prawie już kombajn do generowania kodu w CSS3. Możliwości podobne co powyżej, podaję jako alternatywę
  • http://tools.css3.info/selectors-test/test.html – Ten link proponuję odpalić zarówno pod IE 6, lub IE7 jak i np. Firefoxem, Chromem, czy Operą. Dowiemy się, czy nasza przeglądarka interpretuje właściwie poszczególne selektory CSS3
Nie wiem jak wy, ale ja już naprawdę długo czekam, aż o cholerne IE i przede wszystkim jego starsze wersje pójdą w niepamięć.. ;-)

 


View Comments
There are currently no comments.