Zaokrąglone rogi w CC3

Zaokrąglone rogi wszelkiego rodzaju ramek to wśród twórców stron internetowych temat cieszący się wielkim zainteresowaniem. Gdyby zebrać wszystkie rozwiązania tego problemu i spróbować je opublikować, to prawdopodobnie wyszłaby z tego dość gruba książka. Zagadnienie doczekało się nawet opinie rozwiązywalnego na największą ilość sposobów. Nic dziwnego - kto z was nie chciałby mieć na swojej stronie pięknie zaokrąglonych rogów na przykład przycisków w formularzach?

Na szczęście tematem tym zainteresowało się także konsorcjum W3C zajmujące się kreowaniem standardów sieciowych. Zajęło się i to z dość dobrym skutkiem. Rzecz jasna, nie zadowolimy wszystkich gustów, ale dzięki nowym rozwiązaniom wchodzącym w skład trzeciej wersji języka CSS ci, którzy nie potrzebują jakichś zaawansowanych rozwiązań, będą mogli zredukować znacznie ilość potrzebnego kodu. Do rzeczy więc.

Na początku stwórzmy zwykłą "rameczkę" zawierającą kawałek tekstu. Nadamy jej klasę - na przykład okraglerogi1 - aby wygodnie odwoływać się do niej z poziomu CSS-a.

<div class="okraglerogi1">Krótki kawałek tekstu</div>

I dodamy trochę styli CSS, żeby nasza ramka miała "swój styl". Określimy kolor tła i dodamy dwupikselowe obramowanie. Przesuniemy też tekst na środek i odsuniemy go od obramowania.

.okraglerogi1 {
   border: 3px solid #F00;
   background: #FDD;
   text-align: center;
   padding: 5px;
}

Efekt powinien być podobny do tego poniżej

Niedługi kawałek tekstu

Na razie nic was nie powinno zaskoczyć. Dopiero teraz zaokrąglimy za pomocą tylko i wyłącznie CSS-a wszystkie rogi naszego "pudełka". Posłuży nam do tego nowa właściwość. Oto ona:

border-radius: 15px;

A oto efekt jej zastosowania:

Niedługi kawałek tekstu

Już widzę wszystkie niezadowolone miny. Niezadowolone, bo nie odpowiada im takie "proste" zaokrąglenie. Chcieliby mieć większą kontrolę nad łukiem, który się narysuje. Poza tym nie chcą zaokrąglać wszystkich, tylko wybrane rogi. Oczywiście o tym też pomyśleli twórcy. Poniższy kawałek kodu zaokrągli tylko prawy dolny róg. Zaokrągli bo w taki sposób, aby łuk nie był kawałkiem okręgu, tylko elipsy - promień poziomy łuku będzie znacznie dłuższy, niż promień pionowy.

border-bottom-right-radius: 230px 25px;

A oto efekt działania tego kodu:

Niedługi kawałek tekstu

A czy można trochę uelastycznić to rozwiązanie tak, aby wielkość łuku zależała od wielkości ramki? Również nic prostszego. Określimy wielkość łuku w procentach.

border-radius: 50%;

A oto efekt działania tego kodu:

Najpierw mniejsza ramka
A teraz
nieco dłuższa
zawierająca pięć
linijek tekstu
ramka!

Jak widzimy, efekt jest różny w zależności od przeglądarki. W Firofoxie 4 wszystko działa dobrze. W Operze 11 nie do końca. Promień o długości 50% powinien spowodować, że nasza ramka zyskuje kształt elipsy.

Dla leniwych, którzy wolą pamiętać niż pisać kod, jest forma skrócona. Dzięki niej zdefiniujemy wszystkie osiem promieni (dla każdego roga po dwa promienie). Ta krótka forma wygląda tak:

border-radius: 20px 50% 50% 15px / 20px 50% 50% 15px;

A działa tak:

A teraz
nieco dłuższa
zawierająca pięć
linijek tekstu
ramka!

W kodzie powyżej definiujemy najpierw promienie poziome: lewy górny, prawy górny, prawy dolny i lewy dolny (zgodnie z ruchem wskazówek zegara). Po ukośniku "/" definiujemy promienie pionowe w tej samej kolejności.

Niestety tutaj też efekt końcowy zależy od przeglądarki.

Skoro zajęliśmy sie tematem kompatybilności z przeglądarkami. Jak każde nowe rozwiązanie, tak i zaokrąglone rogi nie wyglądają wszędzie tak samo. Działają w Operze 11, Internet Explorerze 9, nowych wersjach Safari, Google Chrome oraz w Firefoxie 4. Aby zadziałały w bardzo popularnych, starszych wersjach Firefoxa, musimy dodać jeszcze specyficzne dla niego właściwości, rozpoczynające się od prefiksu "-moz-". Dobrze jest wszystkie takie właściwości trzymać w osobnym pliku, aby bez problemu usunąć je wtedy, gdy nie będą już potrzebne.

Z tym, niestety niemiłym akcentem dobrnęliśmy do końca materiału. Pozdrawiam wszystkich entuzjastów nowych technologii i przypominam, że rozwiązania pokazane w tym artykule nie działają tak samo w każdej przeglądarce. Uważajcie na to.