W poprzednim poście pokazałam w jaki sposób można stworzyć tło gradientowe poprawnie wyświetlane w przeglądarkach Mozilli, Chrome czy IE. Odkąd Opera poczyniła zdecydowane kroki w kierunku wsparcia CSS3 można już tworzyć ciekawe efekty również dla tej przeglądarki.

Wygląda na to, że przynajmniej na tym etapie będzie można wyeliminować udział programów graficznych do produkcji niejednolitego tła. Teraz jeśli mam ochotę zmienić sobie schemat kolorów wystarczy, że wklepię formułkę w pliku *.css i problem z głowy.

Obecnie opera potrafi wyświetlić różne gradienty liniowe: 2 i kilku kolorowe (na wsparcie gradientów radialnych musimy jeszcze chwilę poczekać). Czytaj całość »

Grafika na stronach przede wszystkim kojarzy nam się z bitmapami oraz obiektami Flash. W drugim przypadku mamy do czynienia z zamkniętą technologią, nieprzyjazną wyszukiwarkom i zewnętrznym aplikacjom. Dobrą alternatywą dla klasycznych rozwiązań graficznych może być SVG. Nie jest to jeszcze format zbyt popularny, ale ma przed sobą przyszłość.
SVG (Scalable Vector Graphics) to skalowalna grafika wektorowa, dzięki czemu możemy dowolnie zmienić jej rozmiar bez utraty jakości. Format został wprowadzony przez W3C (World Wide Web Consorcium) w 2001 roku (SVG w wersji 1.1).
Format jest zgodny z językiem XML, dzięki czemu możemy swobodnie opisywać naszą dwuwymiarową grafikę – nie potrzebujemy w tym celu żadnych dodatkowych programów, wystarczy zwykły edytor tekstu. Większość programów graficznych potrafi zaimportować i wyeksportować do formatu SVG m.in. Adobe Illustrator, Corel Draw, Inkscape (w programach tych można też obrabiać pliki SVG). Niektóre przeglądarki: Firefox, Opera (która ma pełne wsparcie SVG 1.1) radzą sobie z wyświetleniem plików SVG bez potrzeby instalowania dodatkowych pluginów, w Internet Explorerze z pomocą przychodzi Adobe SVG Viewer.

Dodatkową zaletą formatu SVG jest możliwość przeszukiwania w plikach SVG pod kątem tekstu oraz znacznie mniejszy rozmiar w porównaniu z tradycyjną grafiką. W omawianym przykładzie plik SVG to zaledwie 3kB podczas gdy jego odpowiednik w średniej jakości JPEG waży 2 razy więcej.
Czytaj całość »

Powoli mijają czasy, w których tło na stronach czy przyciski tworzone są w oparciu o pliki graficzne. Efekty gradientu czy zaokrąglone rogi, których wykonanie możliwe było jedynie za pomocą programów graficznych teraz możemy osiągnąć dzięki CSS3.

O ile ostatnie wersje przeglądarek Firefox czy Safari nie będą mieć problemu z wyświetleniem takiej zawartości, o tyle gorzej uzyskać podobny efekt w IE, ale może i tutaj będą z czasem jakieś postępy – IE w wersji 9 ma już obsługiwać funkcjonalności CSS3. Dla zainteresowanych demo IE9 można pobrać tutaj.

W dalszej części artykułu porównamy składnię rysowania gradientu dla poszczególnych przeglądarek oraz stworzymy przykładowy przycisk na stronę
Czytaj całość »

Temat trywialny, ale warto mu poświęcić chwilę uwagi. Projektując stronę trudno jest wziąć pod uwagę wszystkie nieoczekiwane akcje ze strony użytkowników końcowych.

Standardowo każda przeglądarka domyślnie ma ustawiony biały kolor tła i raczej nikt nie ma potrzeby zmieniać takich ustawień. Chyba, że ktoś tak jak ja woli mieć szare tło – wtedy wygląd niektórych stron staje się mniej estetyczny. Dotyczy to oczywiście stron, które tworzone są w oparciu o białe tło. Ustalamy kolory tła dla poszczególnych kontenerów, tekstu, a gdy zabraknie nam tego jednego wpisu strona  traci swoje pierwotne założenia. Przykład: zmienimy sobie kolory tła i tekstu w przeglądarce Firefox.
Czytaj całość »