Praktyczne wykorzystanie zaokrąglonych krawędzi w CSS3
Może to śmiesznie zabrzmi, ale bardzo fajnie bawiłem się przy ostatnim kodowaniu szablonu z wykorzystaniem zaokrąglonych krawędzi dostępnych w CSS 3. Dzięki nim udało mi się znacznie ograniczyć wielkość elementów graficznych. W tym krótkim artykule przedstawię moje poczynania na przykładzie strony Wspolnyczas.pl – jest to moja witryna, jednak o niej samej napiszę innym razem.
Jak widać na poniższym projekcie graficznym posiada on wiele zaokrąglonych elementów. Dotychczas zakodowanie takiego szablonu wiązało się z dużym rozmiarem elementów graficznych, a jeśli próbowaliśmy je trochę odchudzić trzeba było się sporo napocić przy dodatkowych blokach.
Przykłady
Jako pierwszy przykład przedstawię prosty button z gradientem, posiadający lekko zaokrąglone krawędzie. Jest to bardzo popularna forma spotykana na wielu witrynach. Do tej pory kodowało się je tradycyjnie wycinając zazwyczaj jako tło cały button, a w htmlu dodawało się jedynie tekst, w ten oto sposób:
Oczywiście można kombinować powtarzając sam środek, a boki dodając w osobnych blokach, jednak przy tak małym elemencie nie miało to sensu. Przy przedstawionym powyżej sposobie wynikał jeszcze jeden problem, nie rozciągał się gdy treść przycisku była dłuższa.
A teraz wykorzystajmy zaokrąglanie krawędzi dostępne w CSS3, cięcie będzie wyglądać następująco:
Tym razem wycinamy taki fragment, który po powieleniu w poziomie utworzy nam nasz buttonik (na razie bez zaokrągleń). Dodajemy jeszcze nieco CSSa, który zaokrągla nam krawędzie i ustawia kilka innych elementów:
1 2 3 4 5 6 7 8 | background:url(images/przycisk_niebieski.jpg) repeat-x; border:none; color:#ffffff; font-size:12px; height:20px; padding:auto 5px; cursor:pointer; border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px; -o-border-radius:4px; -khtml-border-radius:4px; |
Podsumowując uzyskaliśmy dwukrotnie mniejszy element graficzny (756 bajtów stary – 334 bajty nowy) a także możliwość dostosowywania szerokości buttona do zawartego w nim tekstu.
A teraz spójrzmy na blok poziomego menu umiejscowionego pod headerem. Zajmuje on szerokość całej witryny, jest gradientem, a dodatkowo znajdują się na nim elementy grafiki umieszczonej w topie (nogi). Do tej pory ten blok zakodować można było na dwa sposoby:
Sposób pierwszy: dla bardziej leniwych
Sposób drugi: wycięcie boków, powtarzającego się tła i fragmentu nachodzącej grafiki
Drugi sposób wymaga od nas więcej pracy, jednak pozwala również na znaczną optymalizację wielkości grafik.
Przy wykorzystaniu zaokrąglania krawędzi wystarczy, że wytniemy te elementy:
Jest on podobny do sposobu drugiego, jednak tutaj nie musimy już martwić się o lewą i prawą krawędź bloku, CSS zaokrągli go za nas. Oczywiście w jednym divie nie możemy zamieścić dwa tła, więc najlepiej pozostały kawałek “nóg” wrzucić w listę zawierającą menu, które znajduje się na tym bloku.
No i jeszcze porównanie wielkości elementów graficznych:
- Pierwszy sposób bez wykorzystania CSS3: 3,74 KB
- Drugi sposób bez wykorzystania CSS3: 2,46 KB
- Nowa wersja z wykorzystaniem zaokrąglania krawędzi: 1,68 KB
Podsumowanie
Jedyne o czym trzeba pamiętać to fakt, że IE nadal nie obsługuje tych nowości i boję się, że nieprędko się to zmieni. Mimo to elementy pozbawione zaokrąglenia nie tracą wiele swego uroku, i moim zdaniem oszczędność wynikająca z użycia tych elementów w pewni usprawiedliwia ich użycie.
Mam nadzieję, że ten artykuł pomoże wam w budowaniu w przyszłości jeszcze lepiej zoptymalizowanych witryn.
Jeśli macie jakieś uwagi, elementy które można poprawić, chętnie się o nich dowiem – czekam na komentarze.
Podobne artykuły:
- Smaczki CSS3
- Optymalizacja szablonów
- Narzędzia dla webmastera teraz również w Operze!
- Czy to już czas na HTML 5 i CSS 3 ?
Abstrahując od zaokrąglonych rogów i CSS3 (żeby diabli wzięli IE), zdjęcie skaczących dzieciaków powinno wejść do kanonu najczęściej używanych grafik na stronach. Razem z happy-people-at-work-random-photo :-]
Z tego co widać na zagranicznych stronach coraz mniej osób przejmuje się tym, że pod IE strona będzie wyglądać nieco inaczej i coraz cześciej stosuje zaokrąglenia CSS żeby zminimzliować ilość grafiki na stronie. I słusznie, bo – po pierwsze: prędzej czy później nowe wersje IE zaczną obsługiwać CSS3, a stare wersje odejdą do lamusa, a po drugie: różnica między stroną z delikatnymi zaokrągleniami a stroną bez zaokrągleń jest naprawdę nieduża i wielu przeciętnych użytkowników sieci pewnie nawet tych różnic nie zauważa.
“Jedyne o czym trzeba pamiętać to fakt, że IE nadal nie obsługuje tych nowości i boję się, że nieprędko się to zmieni.”
Zmieni się w IE 9. Będzie obsługiwał “border-radius” bez prefiksów jak Opera. Niestety, przeglądarka nie ruszy na XP. Stosuję 3 sposób, a efekt lepszy niż w programie graficznym. Kto nadal używa kiepskich przeglądarek, po prostu nie zobaczy zaokrągleń.
Hej, chciałbym tylko nawiązać do Twojej strony. Ciekawy projekt, wystarczy rozreklamować.
wspolnyczas.pl/spotkanie/5/wyjazd-samochodem-na-gp-wegier.html
szczegóły spotkania
Wyjazd samochodem na GP Węgier
Myślę, że jest za mały odstęp pomiędzy tymi wierszami
Na razie jestem tak zaabsorbowany innymi sprawami, że strona poszła w odstawkę. Mam jednak już w głowie plany jej rozwoju i niedługo postaram się do niej powrócić.
Dzięki za komentarz.