Stínování objektů

5. prosince 2005

•

Toto řešení umožní snadno zpříjemnit design stránek. Hodí se jak pro formátování obrázků, tak i libovolných jiných řádkových nebo blokových elementů.

Zde si můžete prohlédnout výsledek.

Toto řešení publikoval Stu Nicholls. Bližší popis najdete v článku Simple fluid drop shadows.

CSS

.stin
{
padding: 0;
position: relative;
background: #bbb;
border: solid #ddd 1px;
margin: 2em 1em;
}
.karticka
{
position: relative;
top: -5px;
left: -5px;
background: white;
border: solid #555 1px;
padding: 5px;
}
.karticka img
{
border: solid #bbb 1px;
}
.karticka p
{
border: solid #bbb 1px;
margin: 0;
padding: .2em .5em;
}
.karticka h2
{
margin: 0 0 .2em;
padding: 0;
text-align: center;
font-size: 100%;
font-family: sans-serif;
}
.obrazek
{
width: 315px;
}
.odstavec
{
width: 400px;
text-align: justify;
}

XHTML

<html>
<body>
<div class=“stin obrazek“>
<div class=“karticka“>
<h2>Můžeme formátovat obrázky…</h2>
<img src=“55-1.jpg“ title=“pomeranc“ alt=“pomeranc“ />
</div>
</div>
<div class=“stin odstavec“>
<div class=“karticka“>
<h2>…nebo třeba jen odstavce textu</h2>
<p>Lorem ipsum dolor…</p>
</div>
</div>
</body>
</html>