Stínování obrázků
Stínované obrázky prokládající delší text jej zajímavě oživují. Obrázky mohou být vlevo i vpravo, ale deklarace pro obrázek se musí zabalit do obalového DIVu a až potom nechat odplavat.
Hodnota width u třídy .obrazek je dána šířkou vlastního obrázku (240px) + paddingem třídy .karticka po obou stranách (2*5=10px) + rámečkem 2*2=4px (součet border třídy .stin a border třídy .karticka). Třída .obrazek deklarací vlastnosti width kontroluje roztahování stínu za obrázkem. Se zvětšováním její šířky se zvětšuje pravý okraj se stínem.
Zdrojový kód je možné prohlédnout si »tady«
Zdrojový kód stínování obrázků
<!--podle tridy VLEVO nebo VPRAVO se pak nastavi zarovnani ke stranam okna-->
<div class="vlevo">
<div class="stin obrazek">
<div class="karticka">
<img src="<?php echo '/obrazky/1.jpg';?>" width="240" height="180">
</div>
</div>
</div>
<style type="text/css">
.vlevo {float: left; margin: 70px 40px;}
.vpravo {float: right; margin: 70px 40px;}
.stin {padding: 0; position: relative; background: #bbb; border: solid #ddd 1px;}
.karticka {position: relative; top: -5px; left: -5px; background: white;
border: solid #555 1px; padding: 5px;}
.karticka img {border: solid #bbb 1px;}
.obrazek {width: 254px;}
</style>
