Jak uzyskać zaokrąglone rogi?

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. <div id="pojemnik">
2.         <img src="gora_l.png" class="gora_l">
3.         <img src="gora_p.png" class="gora_p">
4.         <img src="dol_l.png" class="dol_l">
5.         <img src="dol_p.png" class="dol_p">
6. </div>

Listing zwinięty - 6 linii

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ę pozycjonowaniem absolutnym w CSS). Spójrzmy najpierw na gotowy kod:

[+]

[-]

 

 

 

 1. #pojemnik {
 2.         position: relative;
 3.         width: 300px;
 4.         height: 150px;
 5.         background: #737568
 6. }
 7.  
 8. .gora_l {
 9.         position: absolute;
10.         top: 0;
11.         left: 0
12. }
13.  
14. .gora_p {
15.         position: absolute;
16.         top: 0;
17.         right: 0
18. }
19.  
20. .dol_l {
21.         position: absolute;
22.         bottom: 0;
23.         left: 0
24. }
25.  
26. .dol_p {
27.         position: absolute;
28.         bottom: 0;
29.         right: 0
30. }

Listing zwinięty - 30 linii

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

Listing zwinięty - 2 linii

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/curve.... 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)

Listing zwinięty - 2 linii

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/ar...). Wystarczy odpowiednia struktura pliku oraz dwa polecenia, aby uzyskać zaokrąglone rogi. Plik narozniki.svg zawiera więc następujący kod:

[+]

[-]

 

 

 

 1. <?xml version="1.0" standalone="no"?>
 2.  
 3. <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 4.  
 5. "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 6.  
 7. <svg width="100%" height="100%" version="1.1"
 8.  
 9. xmlns="http://www.w3.org/2000/svg">
10.  
11.         <rect fill="white"  x="0" y="0" width="100%" height="100%" />
12.  
13.         <rect fill="#737568"  x="0" y="0" width="100%" height="100%" rx="10px"/>
14.  
15. </svg>

Listing zwinięty - 15 linii

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

[+]

[-]

 

 

 

1. #pojemnik {
2.         width: 300px;
3.         height: 150px;
4.         background: #737568 url(narozniki.svg);
5.         -moz-border-radius: 10px;
6.         -webikt-border-radius: 10px;
7.         behavior:url(border-radius-ie8.htc)
8. }

Listing zwinięty - 8 linii

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: