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:

1
2
3
4
5
6

<div id="pojemnik">
	<img src="gora_l.png" class="gora_l">
	<img src="gora_p.png" class="gora_p">
	<img src="dol_l.png" class="dol_l">
	<img src="dol_p.png" class="dol_p">
</div>

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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

#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.:

1

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:

1

-moz-border-radius: 10px

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

1

-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:

1

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:

1

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:

1

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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<?xml version="1.0" standalone="no"?>
 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 
<svg width="100%" height="100%" version="1.1"
 
xmlns="http://www.w3.org/2000/svg">
 
	<rect fill="white"  x="0" y="0" width="100%" height="100%" />
 
	<rect fill="#737568"  x="0" y="0" width="100%" height="100%" rx="10px"/>
 
</svg>

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

1
2
3
4
5
6
7
8

#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:

Może Cię zainteresować:

1. HTML: układ stałej szerokości
2. Jaki mogę uzyskać transfer danych?
3. 7 porad dla mistrzów CSS