Praktyczne wykorzystanie zaokrąglonych krawędzi w CSS3

Autor: Mateusz Czyżewski, Data: 10/06/2010

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.

Komentarze

  1. 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 :-]

  2. infortis says:

    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.

  3. WebCM says:

    “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ń.

  4. Mirek says:

    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

  5. Mateusz Czyżewski says:

    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.

Dodaj komentarz:

Kanal RSS - nowosci

Witaj!

Witaj na blogu poświęconym wszystkiemu, co wiąże się ze stronami www. Przeczytasz tutaj o procesie ich tworzenia, pozycjonowaniu, wymianie linków, zarabianiu w programach partnerskich itp.

Odnajdziesz tutaj szablony stworzone w języku HTML dostępne całkowicie za darmo.

Jednym z działów jest moje potrfolio, a więc zbiór najlepszych prac.

Polecam:

atrakcje turystyczne

wyjade.pl - atrakcje, szlaki, wydarzenia

Popularne szablony:

Szablon 4

Szablon 4

Szablon 1

Szablon 1

Szablon 8

Szablon 8

Szablon 5

Szablon 5

Copyright 2007 - 2009 by flankerds.com. Wszystkie prawa zastrzeżone.