Zakulacené rámečky

1. října 2005

•

Zakulacení rámečků u blokových elementů.

Pro správnou funkci si vytvořte obrázky podobné těmto. Zde si můžete prohlédnout výsledek.

Toto řešení publikoval Russ Weakley. Bližší popis najdete v článku Grafické rámčeky.

CSS

.ramecek
{
width:70%;
background-color:#dddddd;
}
.ramecek .t
{
background-image: url(t.gif);
background-repeat: repeat-x;
background-position: top;
}
.ramecek .r
{
background-image: url(r.gif);
background-repeat: repeat-y;
background-position: right;
}
.ramecek .b
{
background-image: url(b.gif);
background-repeat: repeat-x;
background-position: bottom;
}
.ramecek .l
{
background-image: url(l.gif);
background-repeat: repeat-y;
background-position: left;
}
.ramecek .tl
{
background-image: url(tl.gif);
background-repeat: no-repeat;
background-position: top left;
}
.ramecek .tr
{
background-image: url(tr.gif);
background-repeat: no-repeat;
background-position: top right;
}
.ramecek .bl
{
background-image: url(bl.gif);
background-repeat: no-repeat;
background-position: bottom left;
}
.ramecek .br
{
background-image: url(br.gif);
background-repeat: no-repeat;
background-position: bottom right;
}
.ramecek .obsah
{
padding:5px;
}

XHTML

<html>
<body>
<div class=“ramecek“>
<div class=“t“>
<div class=“r“>
<div class=“l“>
<div class=“b“>
<div class=“tl“>
<div class=“tr“>
<div class=“bl“>
<div class=“br“>
<div class=“obsah“>
Obsah, který bude uvnitř rámečku…
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>