Popis zde .... Popis zde .... Popis zde .... Popis zde ....

Htlm kód

[html]</pre>
<ul id="css3_img">
<li><a href="#"><span class="title">Nasycení</span><img class="saturate" title="Obrazové efekty pomocí CSS3" src="http://thecodeplayer.com/uploads/media/forest.jpg" alt="" width="225" height="150" /></a></li>
<li><a href="#"><span class="title">Stupně šedi</span><img class="grayscale" src="http://thecodeplayer.com/uploads/media/lake.jpg" alt="" width="225" height="150" /></a></li>
<li><a href="#"><span class="title">Kontrast</span><img class="contrast" src="http://thecodeplayer.com/uploads/media/tree.jpg" alt="" width="225" height="150" /></a></li>
<li><a href="#"><span class="title">Jas</span><img class="brightness" src="http://thecodeplayer.com/uploads/media/leaves.jpg" alt="" width="225" height="150" /></a></li>
<li><a href="#"><span class="title">Rozmazání</span><img class="blur" src="http://thecodeplayer.com/uploads/media/redflower.jpg" alt="" width="225" height="150" /></a></li>
<li><a href="#"><span class="title">Převrácení</span><img class="invert" src="http://thecodeplayer.com/uploads/media/zebra.jpg" alt="" width="225" height="150" /></a></li>
<li><a href="#"><span class="title">Sepie</span><img class="sepia" src="http://thecodeplayer.com/uploads/media/tree2.jpg" alt="" width="225" height="150" /></a></li>
<li><a href="#"><span class="title">Barevná sytost</span><img class="huerotate" src="http://thecodeplayer.com/uploads/media/landscape.jpg" alt="" width="225" height="150" /></a></li>
<li><a href="#"><span class="title">Průhlednost</span><img class="opacity" src="http://thecodeplayer.com/uploads/media/mountain.jpg" alt="" /></a></li>
</ul>
<pre>
[/html]

CSS kód

[css]ul#css3_img {width: 725px;margin: 25px auto;}
#css3_img li {margin: 5px;list-style: none;display: inline-block;}
#css3_img a {position: relative;display: inline-block;}
#css3_img,#css3_img a,#css3_img img{margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;box-shadow: none;}
#css3_img a {display: block;float: left;margin-bottom: 25px;position: relative;-webkit-box-shadow: 0 2px 15px 1px rgba(0, 0, 0, 0.5);-moz-box-shadow: 0 2px 15px 1px rgba(0, 0, 0, 0.5);box-shadow: 0 2px 15px 1px rgba(0, 0, 0, 0.5);width: 225px; height: 150px}
#css3_img a:nth-child(3n+2) {margin: 0 25px 25px 25px;}
#css3_img a img {display: block;-webkit-transition: all 0.5s; width: 225px; height: 150px}
#css3_img a img:hover {-webkit-filter: none;}
#css3_img a img.brightness:hover {-webkit-filter: brightness(0);}
#css3_img span.title {color: #fff;font-size: 13px;font-weight: bold;position: absolute;right: 0;bottom: 15px;z-index: 1;padding: 5px 7px;background: rgba(0, 0, 0, 0.6);}
.saturate {-webkit-filter: saturate(3);}
.grayscale {-webkit-filter: grayscale(100%);}
.contrast {-webkit-filter: contrast(160%);}
.brightness {-webkit-filter: brightness(0.25);}
.blur {-webkit-filter: blur(3px);}
.invert {-webkit-filter: invert(100%);}
.sepia {-webkit-filter: sepia(100%);}
.huerotate {-webkit-filter: hue-rotate(180deg);}
.opacity {-webkit-filter: opacity(50%);}[/css]

Zde můžete vložit Váš komentář