[CSS] Zaokrąglone rogi bez używania obrazków

Bez kategorii Opublikowano: 20/05/2009

O autorze

Jestem webmasterem/webdeveloperem
z pasji. Lubię to co robię i chcę dzielić się wiedzą z innymi osobami.
Specjalizuję się w technologiach związanymi z CSS, JS, PHP.

Aby uzyskać efekt zaokrąglonych rogów w danym elemencie strony, nie używając obrazków, można wykorzystać poniższy kod CSS:

.rog1, .rog2, .rog3, .rog4, .rog22, .rog32, .rog42{font-size:1px; overflow:hidden; display:block;}
.rog1 {height:1px; background:#aaa; margin:0 5px;}
.rog2, .rog22 {height:1px; background:#aaa; border-right:2px solid #aaa; border-left:2px solid #aaa; margin:0 3px;}
.rog3, .rog32 {height:1px; background:#aaa; border-right:1px solid #aaa; border-left:1px solid #aaa; margin:0 2px;}
.rog4, .rog42 {height:2px; background:#aaa; border-right:1px solid #aaa; border-left:1px solid #aaa; margin:0 1px;}
.rog22, .rog32, .rog42 {background: #ddd;}
.headh {background: #aaa; border-right:1px solid #aaa; border-left:1px solid #aaa;}
.headh h3 {margin: 0px 10px 0px 10px; padding-bottom: 3px;}
.contenth {background: #ddd; border-right:1px solid #aaa; border-left:1px solid #aaa;}
.contenth div {margin-left: 12px; padding-top: 5px;}

A następnie kodowanie w pliku HTML dla danego elementu:

<b class="rog1"></b><b class="rog2"></b><b class="rog3"></b><b class="rog4"></b>
<div class="headh">
<h3>Tekst na górze</h3>
</div>
<div class="contenth">
<div>Tekst na dole</div>
</div>
 
<b class="rog42"></b><b class="rog32"></b><b class="rog22"></b><b class="rog1"></b>

Tutaj znajduje się demo z tego artykułu: ZAOKRAGLONE ROGI – DEMO

9 komentarze/y

zdenek
22/05/2009 o 12:17
mogłeś pokazać efekt końcowy jak to wygląda
Piotr Nalepa
22/05/2009 o 15:18
wstawiłem demo z tego artykułu
Mariusz
09/11/2009 o 12:34
Denerwują mnie takie porady typu, a następnie kodowanie w pliku html dla danego elementu. Nigdzie nie mam pliku html w joomla, mam tylko php, xml, i css. Plików css jest conajmniej kilka i skąd mam wiedzieć do którego wkleić kod? Jeśli już udzielasz porad, to bierz pod uwagę, że amatorzy też mogą czytać Twój blog.
Porady typu wklejasz i gotowe są nieskuteczne w moim przypadku, tylko nie odsyłaj mnie do zgłębienia wiedzy o hatml i joomla, bo robię to sukcesywnie i myślałem, że z Twojej strony też się czegoś dowiem, ale widzę, że za wysokie progi.
Piotr Nalepa
10/11/2009 o 17:54
Zaskakuje mnie Twój post. W tej poradzie nie poruszałem tematu Joomla!
Ponadto, jeżeli chcesz zastosować tą metodę w systemie CMS Joomla! to musisz wiedzieć jak się tworzy szablony do tego systemu.
Jeśli już znasz podstawy to bez najmniejszego problemu powinieneś sobie dać radę.
Taka mała podpowiedź:
Szablony dla Joomla! szukaj w folderze templates/ na serwerze i w nich najczęściej edytujesz plik o nazwie template.css
Marcin
17/11/2009 o 14:28
Mariusz polecam dodatek do firefoxa zwany firebug, gdzie możesz sprawdzić jaki dany element strony ma styl i w jakim pliku dany atrybut css się znajduje.
mm
30/01/2010 o 18:14
@Mariusz: ten artykuł jest bardzo dobry.
To, że nie rozumiesz i nie chcesz się dowiedzieć jak działa joomla nie jest winą autora.
Mihau
02/02/2010 o 11:44
Ciekawy pomysł
dosc prymitywny ale jednak zaskakujący
„Mariusz” – no niezły z Ciebie kozak
czytanie ze zrozumieniem się kłania
f055
08/10/2010 o 22:56
e? ten kod wygląda jakby był robiony pod IE6. Nie lepiej po prostu użyć „border-radius” (i specyficznych dla FF i Safari „-moz-border-radius” i „-webkit-border-radius”) na divie niż rysować tak rogi ręcznie?
blues
11/06/2011 o 23:42
kolego F055 „border-radius” nie jest interpretowane przez IE, a to to wciąż jedna z najpopularniejszych przeglądarek, wiec warto o niej pomysleć; choć nie wiem jak pod IE9…