Stínování objektů
05. 12. 2005 | Redakce Interval.cz | Pro CSS | Komentáře: 0
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>
Další aktuální články na interval.cz
- Chamurappiho Webylon: čtyři články s kritikou W3C
- Nenápadný cloud: synchronizace dat z prohlížečů
- Pozvánka: Random Hacks of Kindness 2012
- Zajímavost o češtině pro redakční systém WordPress
- Pozvánka na konferenci o vyhledávačích zboží 2012
Tematicky související články
Dejte vědět i ostatním o článku
Diskuse (počet komentářů: 0)
Buďte prvním návštěvníkem, který přidá nový komentář.
