Jak uzyskać zaokrąglone rogi?

Zaokrąglone rogi to charakterystyczny element wielu współczesnych projektów stron. Wbrew pozorom ich zastosowanie nie jest szczególnie skomplikowane i nie wymaga zaawansowanej wiedzy technicznej.

Rozważmy dwie najprostsze metody implementacji zaokrąglonych rogów w pojemniku div lub innym elemencie blokowym. Założeniem przedstawionych przykładów jest sytuacja, gdy mamy do czynienia z prostymi, jednokolorowymi elementami. Projekty bardziej skomplikowane graficznie będą wymagać użycia innych technik CSS.

Dołączenie plików graficznych

Najbardziej oczywistą metodą zaokrąglenia rogów pojemnika div jest stworzenie czterech plikół graficznych i umieszczenie ich wewnątrz pojemnika. W pierwszym etapie należy utworzyć kod HTML zawierający element div oraz 4 pliki graficzne z odpowiednimi klasami:

Użyte pliki graficzne wyglądają następująco:

To oczywiście powiększenie. Utworzenie takich narożników jest bardzo proste w każdym popularnym programie graficznym, np. Gimpie lub Photoshopie. Możesz także pobrać mniejszą wersję umieszczoną poniżej. Wystarczy, że klikniesz prawym przyciskiem myszy i zapiszesz plik na dysku, a następnie wytniesz poszczególne narożniki:

Możesz dowolnie wykorzystywać ten plik graficzny, zarówno w projektach komercyjnych, jak i niekomercyjnych.

Aby z czterech narożników stworzyć prostokąt z zaokrąglonymi rogami musisz posłużyć się {link_wew 5159}pozycjonowaniem absolutnym w CSS{/link_wew}). Spójrzmy najpierw na gotowy kod:

#pojemnik {
	position: relative;
	width: 300px;
	height: 150px;
	background: #737568
}

.gora_l {
	position: absolute;
	top: 0;
	left: 0
}

.gora_p {
	position: absolute;
	top: 0;
	right: 0
}

.dol_l {
	position: absolute;
	bottom: 0;
	left: 0
}

.dol_p {
	position: absolute;
	bottom: 0;
	right: 0
}

Kod powinien być prosty do zrozumienia. Pojemnik div ma nadaną właściwość position: relative. Kolejne klasy odpowiadające poszczególnym plikom graficznym są pozycjonowane absolutnie wewnątrz pojemnika w jego 4 rogach przy użyciu właściwości top, right, bottom i left. To rozwiązanie zadziała w każdej przeglądarce, a efekt przedstawia się następująco:

Jeśli potrafisz programować w JavaScript, to możesz także pokusić się o dynamiczne wstawianie plików graficznych do pojemnika div. Przedstawiona metoda może być również modyfikowana, aby do kontenera były wstawiane jedynie dwa pliki graficzne – na górze i na dole lub po obu bokach. Wtedy należy przygotować pliki graficzne odpowiadające szerokości lub wysokości pojemnika. Warto to zrobić, jeśli pojemnik posiada bardziej skomplikowany projekt graficzny.

Zaokrąglone rogi i CSS 3

Zaokrąglone rogi możesz również uzyskać dzięki właściwości border-radius będącej częścią CSS 3. Wielkość zaokrąglenia podaje się w pikselach, np.:

border-radius: 10px

Właściwość obsługują przeglądarki oparte na silniku Gecko oraz Webkit. Jednak w obu przypadkach mamy do czynienia z inną formą właściwości border-radius. Firefox i inne przeglądarki oparte na Gecko wymagają dodania przedrostka -moz:

-moz-border-radius: 10px

Z kolei silnik Webkit wymaga użycia przedrostka -webkit:

-webkit-border-radius: 10px

Osobną kwestią jest obsługa zaokrąglonych rogów w Internet Explorerze oraz Operze. W pierwszy przypadku możesz posłużyć się specjalnym plikiem .htc dostępnym na na stronie http://code.google.com/p/curved-corner/. Do stylów CSS dołączysz go kodem:

behavior:url(border-radius-ie8.htc)

Kod działa w Internet Explorerze od wersji 5.5 w górę. Jeśli pojemnik div objęty tym kodem przesuwa się na środek ekranu, to w pliku .htc z linijki rozpoczynającej się od this.outerHTML usuń kod:

margin: ' + margin + '

Ostatnim problemem, jaki trzeba rozwiązać jest obsługa zaokrąglonych rogów w Operze. Rozwiązaniem jest użycie pliku SVG, jako tła dla pojemnika div:

background: #737568 url(narozniki.svg)

Warto przy tym przypomnieć, że format SVG funkcjonuje na bazie XML-a i umożliwia bardzo szybkie tworzenie grafik zarówno przy pomocy programów graficznych (np. Inkscape) oraz przez ręczne wpisywanie kodu (szerszy opis składni języka:http://www.internetmaker.pl/artykul/3899,1,zrob_wektory.html). Wystarczy odpowiednia struktura pliku oraz dwa polecenia, aby uzyskać zaokrąglone rogi. Plik narozniki.svg zawiera więc następujący kod:

Gotowy kod CSS dla kontenera prezentuje się następująco:

#pojemnik {
	width: 300px;
	height: 150px;
	background: #737568 url(narozniki.svg);
	-moz-border-radius: 10px;
	-webikt-border-radius: 10px;
	behavior:url(border-radius-ie8.htc)
}

Efekt w przeglądarce Firefox:

Oraz w Internet Explorerze:

Czy są inne sposoby?

Z pewnością istnieją inne sposoby uzyskania zaokrąglonych rogów. Większość z nich nie jest jednak tak prosta, jak wyżej opisane metody. Będą one wystarczające dla większości projektów w których zaistnieje potrzeba implementacji zaokrąglonych rogów.

Pobierz przykłady z tego artykułu: