Magazyn T3
newsy, felietony, testy i tutoriale



Internet Maker

07/10/2009

Jak uzyskać zaokrąglone rogi?

Więcej artykułów autorstwa »
Napisane przez: Bartłomiej Dymecki
Tagi:
30-jak_uzyskac_zaokraglone_rogi.png

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


O autorze

Bartłomiej Dymecki
Prowadzący bloga poświęconego użyteczności oraz właściciel firmy realizującej audyty serwisów internetowych.




7 komentarze


  1. Świetne! Tego szukałem! Do tej pory męczyłem się z narożnikami, bo wstawiałem je jako tło dla danego elementu. A tu tak można to fajnie rozwiązać! Dzięki! Zaraz poprawiam stronkę.


  2. Ifcio

    Ale zaraz zaraz, jeśli użyjemy pliku png, gdzie jest przeźroczystość, to taki div z wypełnieniem koloru zamaskuje nasze narożniki. Co zrobić w tym przypadku?

    Druga sprawa, przygotowany plik narożników ma białe tło, to jakim sposobem przy takiej stylizacji „position: absolute;top: 0;left: 0″ na screenach nie ma tego białego tła pozostałych rogów? Natomiast zrozumiały byłby dla mnie zapis „position: absolute;top: 0;left: 0;width:[sz.rogu];height:[w.rogu];background-position:[left/top/right/bottom]” lecz tego nie ma… czemu więc użyto pierwszego zapisu?

    Pozdro


  3. Znacznika Img nie powinno się w stawiać jako fragment tła, to zupełnie niezgodne z semantyką kodu.


  4. faja

    samo radius wystarczy i czyta go FF i chrome


  5. Miło, że CSS daje takie możliwości.
    Bardzo się ciesze, że zapominam już boje jak kiedyś osiągałem takie efekty przez gify czy png.

    Dzięki za wpis.



Zostaw odpowiedź

Twój adres nie zostanie opublikowany. Wymagane pola są oznaczone *

*

Możesz używać tych tagów i atrybutów HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" highlight="">