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 nainstalovat šablonu ve WordPressu
23. července 2024 -
INNOCN monitory: špičková kvalita za zlomek ceny
5. června 2025 -
Monitory OLED: klíčové pojmy a funkce
13. května 2024 -
AI v programování: Jak používat GitHub Copilot (část 1)
12. února 2024
Nejnovější
-
Jak vytvořit web zdarma?
5. srpna 2025 -
10 nejčastějších chyb při tvorbě webu na WordPressu
28. července 2025 -
Co je to neuronová síť
21. července 2025 -
Elektronický podpis – má dnes ještě uplatnění?
16. července 2025