publikuj: Opublikuj w wykop.pl Opublikuj we flaker.pl Opublikuj na OSnews.pl Opublikuj w delicious wydrukuj
skomentuj »

TAGI: css , zaokrąglony róg

2007-11-09 17:08  |  Adam Golański

Jak zrobić boks z zaokrąglonymi rogami w HTML-u?

Jak zrobić boks z zaokrąglonymi rogami w HTML-u?

Sposób na boks z zaokrąglonymi rogami bez żadnej dodatkowej grafiki

Wszelkie normalnie dostępne komendy HTML, jakie wykorzystujemy do tworzenia bloków tekstu, dają nam w efekcie nudne, prostokątne obiekty. Jednak od wielu lat popularne stało się w interfejsach użytkownika wykorzystywanie zaokrąglonych rogów okienek i boksów.

Dzięki niewielkim manewrom z kaskadowymi arkuszami stylów łatwo możemy stworzyć taki boks bez używania żadnych dodatkowych elementów graficznych:

<html>
<head>
<meta http-equiv="content-type" content="text/html; 
 charset=iso-8859-2">
<style type="text/css">

body{padding: 10px;background-color: #FFF;}
p{margin: 0 10px}

div#boks{margin: 0 10%;background: #B00}
i.gora, i.dol{display:block;background: #FFF}
i.gora i, i.dol i{display:block;height: 1px; 
 overflow: hidden; background: #B00}
i.r1{margin: 0 5px}
i.r2{margin: 0 3px}
i.r3{margin: 0 2px}
i.gora i.r4, i.dol i.r4{margin: 0 1px;height: 2px}

</style>

</head>
<body>
<div id="boks">
<i class="gora"><i class="r1"></i>
<i class="r2"></i>
<i class="r3"></i>
<i class="r4"></i></i>

<-- tu umieścić pożądaną treść -->
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
Suspendisse nec arcu id sapien facilisis mattis. Ut neque lorem, 
feugiat ut, sodales nec, pharetra a, diam. Morbi neque leo, rutrum et,
cursus a, ultricies eu, lorem. Mauris blandit pede sit amet quam. 
Donec mauris nisi, posuere porttitor, congue eget, laoreet eu, leo. 
Nulla lobortis massa semper ligula. Sed vehicula imperdiet libero. 
Nulla facilisi. Vestibulum suscipit, tortor ac eleifend ullamcorper, justo
nulla consequat ante, eget aliquet arcu eros ac tellus. Lorem ipsum dolor
sit amet, consectetuer adipiscing elit. Morbi nec lorem eu erat rhoncus
consectetuer. Praesent quis neque. Cras sodales placerat dui. Quisque 
feugiat. Nullam eu massa a metus sagittis interdum. </p>

<i class="dol"><i class="r4"></i>
<i class="r3"></i>
<i class="r2"></i>
<i class="r1"></i></i>
</div>
</body>
</html>

Tag <i> został wybrany, gdyż jest krótki i nie niesie żadnej semantyki. Zamiast niego możemy użyć oczywiście <b>, <span> i temu podobnych.

publikuj: Opublikuj w wykop.pl Opublikuj we flaker.pl Opublikuj na OSnews.pl Opublikuj w delicious wydrukuj
skomentuj »

Polecane książki

Czytaj Webhosting

Chcesz być na bieżąco z naszymi informacjami? Zapisz się na Newsletter.

Zarejestruj domenę

Sprawdź dostępność swojej domeny:

.pl: 0 zł   .com: 19.90 zł
.com.pl: 0 zł   .eu: 19.90 zł