Dawniej strony internetowe budowano w oparciu o HTML, zdjęcia, aplikacje flashowe i skrytpy napisanie w Javie. Dzisiaj niemal wszystko można zastąpić odpowiednią formułką w CSS.
Jeszcze kilka lat temu internet pełen był stron napisanych w HTML'u. Witryny projektowano na ramkach, menu i headery wyglądały ładnie, ale były to potężne aplikacje flashowe, które nie tylko spowalniały ładowanie strony, ale również uniemożliwiały zrozumienie treści robotom wyszukiwarek. Przyciski na stronach były interaktywne, po uaktywnieniu danego linka dochodziło do zmiany koloru czy podświetlenia. Jednakże efekt ten osiągano poprzez zmuszenie pokazania się innego obrazka w tle.
Sprawiało to, że strony internetowe ważyły nawet kilka Megabajtów. Dzisiaj jednak technologia flash to relikt przeszłości, duże obrazy (które dawniej nikomu nie przeszkadzały) muszą zostać skompresowane, a efekt aktywnego linku/przycisku osiąga się dzięki komplementacji kodu napisanego w językach CSS3 i PHP5.
O co chodzi z tym CSS'em?
CSS to tak naprawdę arkusz stylów. Bez niego strona internetowa wyświetli się, ale pozbawiona będzie jakichkolwiek dekoracji. Można powiedzieć, że w HTML'u i PHP mówimy przeglądarce, co ma wyświetlać, zaś w CSS'ie informujemy ją, jak ma to robić. Oczywiście treść jest ważna i stanowi podstawę każdego portalu, ale to dzięki arkuszom stylu możemy cieszyć się ładnym designem.
Opanowanie podstawowych regułek nie zajmie wam więcej niż kilkanaście-kilkadziesiąt minut. Zrozumienie kodu na podstawowym poziomie powinno zająć kilka dni. Jednak umiejętne stosowanie, bez popełniania błędów, to już wyższa szkoła jazdy. Niewiele osób zdaje sobie sprawę z faktu, że dzięki połączeniu CSS'a ze skryptem napisanym w JavaScript i użyciu metody Canvas, możliwe będzie rysowanie obiektów na stronie. Dzięki temu będziecie mogli stworzyć wykresy słupkowe, które będą się rozwijać samoczynnie, bądź po najechaniu na nie kursorem. Istnieje możliwość stworzenia interaktywnego menu. Wszystko estetycznie, a co więcej, lekko.
Bo każdy z wyżej wymienionych modułów nie będzie opierał się w żadnym stopniu o zewnętrzne pliki graficzne. Arkusz stylów waży około kilku-kilkunastu kilobajtów. Moduł napisany w JS również nie powinien przekroczyć tej wielkości. Pokazuje to więc, jak znacznie różni się to rozwiązanie, od wykorzystywanej jeszcze na początku XXI wieku metody z obrazkami wstawianymi jako background dla buttonów.
Jak zacząć zabawę z CSS'em?
Najlepszym sposobem jest nauka na własnych błędach. Dobrym pomysłem może być postawienie strony internetowej i napisanie własnej szaty graficznej, bądź dostosowanie gotowego szablonu pod własne widzi misię.
Przy projektowaniu witryny należy dzisiaj pamiętać o konieczności dostosowania zarówno całości, jak i poszczególnych modułów do poprawnego wyświetlania się na urządzeniach mobilnych, takich jak telefony komórkowe czy tablety. Również monitory projektuje się w różnych rozdzielczościach, dlatego istotne jest określenie, w jakim zestawieniu, jak powinna zachowywać się strona.
Dawniej uważano, że dla każdego z monitorów poprawne będzie utrzymanie wyglądu portalu w jeden sposób. Jednak ewolucja techniki pokazała, że to utrudnia jej przeglądanie. Nastała era RWD (responsywności witryn). Dzięki właściwym zapisom w arkuszu stylów w łatwy sposób dostosujecie portal do smartfona czy wcezśniej wspomnianego tabletu.
Aby nauczyć się podstaw lub rozwinąć swoje umiejętności można sięgnąć po podręcznik, pokroju tego napisanego przez Petera Gasstona. CSS3. Podręcznik nowoczesnego webdevelopera pomoże zdobyć wiadomości o tzw. media queries, które pozwalają zmieniać wygląd elementów strony w zależności od urządzenia. Co więcej, dowiesz się w jaki sposób pseudoznaczniki i pseudoklasy ułatwią Ci życie. Zobaczysz, jak zaimplementować ciekawy font dzięki zapisowi @font-face.
Podręcznik wprowadzi Cię w zagadnienia transformacji 2D i 3D oraz pokaże zalety elastycznych układów elementów (Flexbox). Dzięki książce poszerzysz umiejętności z zakresu CSS w zakresie zastosowania w statycznych stronach internetowych przejść oraz animacji opartych na zdarzeniach, użycia gradientów promieniowych i liniowych czy kontrolowania układu strony dzięki siatką, kolumną czy elastycznego wyrównania.
Pozdrawiamy
