od zera do webmastera

Zaokrąglone narożniki

Jak mieć zaokrąglone narożniki bez używania bitmapy?

Jak chce się mieć ramkę z zaokrąglonymi narożnikami, to na ogól trzeba użyć jakiegoś edytora graficznego np. Photoshop i przygotować tam bitmapę. Jest opisanych w internecie kilka sposobów jak zrobić jedną bitmapę, ale móc zmieniać wielkość ramki, to jest użyteczne, ale jakby tak jeszcze prościej. Móc mieć ładne narożniki, ale bez modyfikacji bitmapy, zmieniać prosto i wielkość i kolor. (niestety nie promień zaokrąglenia)

Oto moje rozwiązanie w samym CSS

Oto zaokrąglone narożniki

I jak widać dało się. Sztuczka polega na tym, że do tego niewielkiego zaokrąglenia potrzeba stosunkowo dużo kodu HTML i CSS, gdyż zaokrąglony różek został "narysowany" DIVami często o wysokości (height) 1 piksela.

Kodu HTML mam tyle:

<div class="zaokr-box1">
<div class="za1a"></div>
<div class="za2a"><div class="za2b"></div></div>
<div class="za3a"><div class="za3b"></div></div>
<div class="za4a"></div>
<div class="za5a"></div>
<div class="za6a"></div>
<div class="znaokr-tresc">
<p>Oto zaokrąglone narożniki</p>
</div>
<div class="za6a"></div>
<div class="za5a"></div>
<div class="za4a"></div>
<div class="za3a"><div class="za3b"></div></div>
<div class="za2a"><div class="za2b"></div></div>
<div class="za1a"></div>
</div>

Jest to taki DIV który mieści wszystko "zaokr-box1" i by nadać wielkość zaokrąglonej ramce wystarczy zmieniać w CSS tylko jego wielkość "width" reszta się dostosuje sama, a wysokość "height" dostosuje się do treści. Potem są warstwami poukładane DIVy rysujące ramkę. W środku DIV z treścią "znaokr-tresc". I powtórzone te DIVy co na górze, tylko tym razem w odwróconej kolejności.

Teraz przed przejściem do stylów CSS pokażę powiększony szczegół narożnika.
detal zaokrąglonego narożnika
Jak widać czarny obrys, czasem nie jest całkiem czarny, tylko stosuję kolor pośredni między tłem a kolorem obrysu "broder" daje to lepszy efekt i narożnik wydaje się gładszy. Czy można by jeszcze ładniej to narysować dając więcej kolorów pośrednich? Zapewne tak, ale miałem tez na względzie wygodę użytkowania tego rozwiązania. Dla wygody wyliczania koloru pośredniego zapisałem kolory w RGB

CSS wygląda tak:

.zaokr-box1 { width:400px; height:auto; font-size: 0.01em; background-color: transparent; margin:18px;}
.za1a {margin:0px 5px; height:1px; background-color:rgb(0, 0, 0); border-left:2px solid rgb(111, 111, 102); border-right:2px solid rgb(111, 111, 102);}
.za2a {margin:0px 3px; height:1px; background-color:rgb(0, 0, 0); border-left:1px solid rgb(111, 111, 102); border-right:1px solid rgb(111, 111, 102);}
.za2b {margin:0px 1px; height:1px; background-color:rgb(255, 255, 255); border-left:1px solid rgb(111, 111, 102); border-right:1px solid rgb(111, 111, 102);}
.za3a {margin:0px 2px; height:1px; background-color:rgb(0, 0, 0); border-left:1px solid rgb(0, 0, 0); border-right:1px solid rgb(0, 0, 0);}
.za3b {margin:0px 1px; height:1px; background-color:rgb(255, 255, 255);}
.za4a {margin:0px 1px; height:1px; background-color:rgb(255, 255, 255); border-left:2px solid rgb(111, 111, 102); border-right:2px solid rgb(111, 111, 102);}
.za5a {margin:0px 1px; height:1px; background-color:rgb(255, 255, 255); border-left:1px solid rgb(0, 0, 0); border-right:1px solid rgb(0, 0, 0);}
.za6a {margin:0px 0px; height:1px; background-color:rgb(255, 255, 255); border-left:2px solid rgb(111, 111, 102); border-right:2px solid rgb(111, 111, 102);}
.znaokr-tresc { height:auto; background-color:rgb(255, 255, 255); border-left:1px solid #000; border-right:1px solid #000; text-align: center; }
.znaokr-tresc p{ margin:0 auto; font-size: 15px; }

Mamy użyte 3 kolory
Białe tło, tutaj rgb(255, 255, 255)
Czarny obrys, tutaj rgb(0, 0, 0)
Kolor pośredni między obrysem a zewnętrznym tłem rgb(111, 111, 102)
Tło zewnętrzne to tutaj rgb(221, 221, 204)

Jeżeli chcemy mieć inne kolory to wystarczy zrobić podmiankę tych 3 kolorów. I jak już wspomniałem parametrem "width" dla "zaokr-box1" regulujemy szerokość. Jeżeli skopiujesz sobie kod to to cała obsługa jaka trzeba robić.

Zróbmy próbę zmiany kolorów... ramka może być np. taka...

Oto zaokrąglone narożniki
w innych kolorach
...fajne?