Okrągła strona bez komplikacji

Dzisiaj, w ramach rozwijającej się wersji kaskadowych arkuszy stylów pokażę Wam, jak za pomocą bardzo krótkiego polecenia zaokrąglić rogi dla jakiegokolwiek znacznika. W tym artykule mowa o border-radius – czyli tłumacząc na język polski promień zaokrąglenia.

Na okrągło kiedyś

W czasach, gdy jeszcze o CSS3 prawie nikt nie słyszał używano trudnej metody – dzielono jeden div na wiele i tworzono bitmapy, które dawały wygląd zaokrąglenia (właściwie dziś też się w taki sposób wygładza). Wszystko było ok, dopóki okazywało się, że trzeba zmienić kolor tła czy zwiększyć promień zaokrąglenia. Trzeba było zaczynać od podstaw! Teraz W3C dało nam niesamowite uproszczenie.

Pierwsze zaokrąglenie

Na sam początek stwórzmy jakiegoś diva – powiedzmy, że koloru niebieskiego z czarną obwódką. Ma być np. szeroki na 200 pikseli i tak samo wysoki.

<div style="
width:200px;
height:200px;
background:#4477ff;
border:2px solid #000000;"></div>

Co daje nam takie coś:

Właściwie takie “efekty” poznałeś już dawno temu, poznając dzisiejszą wersję CSS. Teraz co zrobić, by uzyskać zaokrąglenie? Sprawa jest całkiem prosta. Do stylu wpisujemy:

border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;

by uzyskać zaokrąglenie o promieniu 15 pikseli:

Koło na stronie

Aby uzyskać idealne i skalowalne koło nie wykorzystując do tego grafiki wektorowej czy co gorsza ogromnej bitmapy, można użyć innego niż pikseli jednostek. Bardzo przydatną może się okazać podawanie promienia w procentach.

Gdy Twój div ma szerokość i wysokość 200 pikseli, to po wpisaniu do border-radius 50% będzie on całkowicie okrągły, ponieważ podany przez nas procent odnosi się do długości krótszego boku (w tym przypadku oba są takie same), więc promień będzie miał 100 pikseli, czyli zaokrąglenie pokryje całe obramowanie.

border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;

A gdzie to jest przydatne? Chociażby wtedy, gdy nasz div podczas najechaniu kursorem itp. będzie zmieniał swoją wielkość. Na przykład zdecydowanie lepiej napisać

div {
width:200px;
height:200px;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
}
div:hover {
width:300px;
height:300px;
}

niż

div {
width:200px;
height:200px;
border-radius: 100px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
}
div:hover {
width:300px;
height:300px;
border-radius: 150px;
-moz-border-radius: 150px;
-webkit-border-radius: 150px;
}

gdy chcemy zawsze mieć koło, tyle że o zmienionej wielkości.

Innym przykładem wykorzystania procentów będą poziome buttony w kształcie “kapsułek”, na przykład

Jedynym patentem na to jest ustawienie mniejszego height od width.

Modyfikując trochę stworzony przycisk oraz dodając do tego cień i gradient oczywiście używając CSS3, możemy uzyskać coś takiego

co prawda nie jest to zbyt “piękny” przycisk, ale pokazuje możliwości tworzonego CSS3.

Nie tylko w każdym rogu

Dzięki użyciu dodatkowych parametrów możemy ustawić tak, by róg był zaokrąglony w wyznaczonych przez nas miejscach. Jeśli chcemy tylko wygładzić 1 róg, wpisujemy

border-radius-typkąta: 30px;
-moz-border-radius-typkąta: 30px;
-webkit-border-radius-typkąta: 30px;

Gdzie typem kąta może być:

topleft – lewy górny
topright – prawy górny
bottomleft – lewy dolny
bottomright – prawy dolny

Przykład:

Gdy chcemy zaokrąglić dwa lub trzy rogi po prostu wpisujemy więcej parametrów, tyle że zmieniamy typ kąta.

border-radius-topleft: 30px;
-moz-border-radius-topleft: 30px;
-webkit-border-radius-topleft: 30px;
border-radius-bottomright: 50%;
-moz-border-radius-bottomright: 50%;
-webkit-border-radius-bottomright: 50%;

Bardziej zaawansowane zaokrąglenia

CSS3 może sobie poradzić nie tylko z takimi “prostymi” okrągłościami. Można podać dwie liczby oddzielając je ukośnikiem. Jako pierwszą podajemy promień w osi X, natomiast jako drugą oś Y. Na przykład:

border-radius: 60px / 20px;
-moz-border-radius: 60px / 20px;
-webkit-border-radius: 60px / 20px;

Da nam zaokrąglenie bardziej poziome:

Oczywiście można korzystać z wartości procentowych. Podawanie dwóch wartości mniej więcej polega na tym:

Prosty schemat

Może to mieć zastosowanie na przykład przy tworzeniu elips oraz innych okrągłych figur, jednak w praktyce, podczas tworzenia stron internetowych nie będzie to tak bardzo przydatne.

Krótkie ćwiczenie

Stwórz, nie używając żadnej grafiki wzory znaków drogowych, na przykład takich jak B-1, B-2, B-32-44, a może nawet F-8 oraz pamiętając, że CSS3 to nie tylko zaokrąglenia. Wszystkie znaki są dostępne na Wikipedii. Miłej zabawy ;-)

50%k

IT-Maniak