Stínování objektů
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>
Mohlo by vás také zajímat
-
Jak zvýšit CTR vašeho e-mail marketingu
9. září 2024 -
ZONER Webmail jako první v Česku přináší BIMI s VMC
11. července 2024 -
AI a internetové podvody
29. října 2024 -
Nejnovější
-
Apple jde naproti práci s HDR monitory!
17. ledna 2025 -
Jak využít AI potenciál svého Macu?
9. ledna 2025 -
NIS2: Verifikace údajů vlastníků domén
6. ledna 2025 -
Dostali jste k vánocům PC? Využijte jeho AI potenciál!
3. ledna 2025