samedi 5 mai 2012

Beautiful Polaroid Gallery With CSS3

We are come back with a awesome tutorial is how to create Beautiful Polaroid Gallery With CSS3. Yes  i'm very busy because of this much taking absence in blog the main reason was exam, so now my F4 exam is over and i scored good mark. Also I creating theme for onlinetrick, anyway after the exam i just decide to create polaroid gallery and i selected CSS3 properties for adding effects such as scale property and transition property. This CSS3 properties is compatible only with modern browsers such us WebKit-based (Safari, Chrome), Firefox and Opera. Here have two polaroid gallery, first one using CSS3 scale property and title are visible, second one using CSS3 transition property and title are hidden when mouseover it will be visible. 
DEMO 1
HTML 
The div id="gallery" act as a wrapper and other boxes with div class="gallery-image" as a containers. Gallery-image are in position: relative.. The Image tilte will show under the images in container class "gallery-image".
<div id="gallery"><div class="gallery-image"><img src="/files/Cristiano Ronaldo.jpg" /><a href="http://c-lien.blogspot.com/?Iw==">Cristiano Ronaldo</a></div><div class="gallery-image"><img src="/files/Neymar.jpg" /><a href="http://c-lien.blogspot.com/?Iw==">Neymar</a></div><div class="gallery-image"><img src="/files/Lionel Messi.jpg" /><a href="http://c-lien.blogspot.com/?Iw==">Lionel Messi</a></div><div class="gallery-image"><img src="/files/Ronaldinho.jpg" /><a href="http://c-lien.blogspot.com/?Iw==">Ronaldinho</a></div><div class="gallery-image"><img src="/files/David Beckham.jpg" /><a href="http://c-lien.blogspot.com/?Iw=="> David Beckham</a></div><div class="gallery-image"><img src="/files/Kaka.jpg" /><a href="http://c-lien.blogspot.com/?Iw==">Kaka</a></div><div class="gallery-image"><img src="/svn/demo/image/Fernando-Torres.jpg" /><a href="http://c-lien.blogspot.com/?Iw==">Fernando Torres</a></div><div class="gallery-image"><img src="/files/Robinho.jpg" /><a href="http://c-lien.blogspot.com/?Iw==">Robinho</a></div></div> 
CSS 
Now it's time for css and we want add background, margin, padding, effects and etc.. 
#gallery{        width:878px;        display: block;        margin: 40px 135px;}.gallery-image{        width:150px;        background-color: #fff;        border: 1px solid #c2c2c2;        -moz-box-shadow:0 0 20px #292929;        -webkit-box-shadow:2px 5px 8px #292929;        box-shadow:2px 3px 8px #292929;        padding: 10px 10px 30px 10px;        float: left;        position: relative;        margin-right: 20px;        margin-bottom: 20px;        -webkit-transition: all 0.4s ease-in-out;        -moz-transition: all 0.4s ease-in-out;        -o-transition: all 0.4s ease-in-out;}.gallery-image img{        background: #000;        width: 150px;        height: 150px;}.gallery-image a{        position: absolute;        bottom: 10px;        left: 10px;        font-family: arial;        font-weight:bold;        font-size: 15px;        color: orange;        text-decoration:none;        text-align: center;}.gallery-image:hover{        transform: skew(5deg,5deg);        -ms-transform: skew(5deg,5deg); /* IE 9 */        -webkit-transform: skew(5deg,5deg); /* Safari and Chrome */        -o-transform: skew(5deg,5deg); /* Opera */        -moz-transform: skew(5deg,5deg); /* Firefox */}
DEMO 2
HTML
<div id="gallery"><div class="gallery-image"><a href="http://c-lien.blogspot.com/?Iw==">Cristiano Ronaldo</a><img src="/files/Cristiano%20Ronaldo.jpg" /></div><div class="gallery-image"><a href="http://c-lien.blogspot.com/?Iw==">Neymar</a><img src="/files/Neymar.jpg" /></div><div class="gallery-image"><a href="http://c-lien.blogspot.com/?Iw==">Lionel Messi</a><img src="/files/Lionel Messi.jpg" /></div><div class="gallery-image"><a href="http://c-lien.blogspot.com/?Iw==">Ronaldinho</a><img src="/files/Ronaldinho.jpg" /></div><div class="gallery-image"><a href="http://c-lien.blogspot.com/?Iw==">David Beckham</a><img src="/files/David Beckham.jpg" /></div><div class="gallery-image"><a href="http://c-lien.blogspot.com/?Iw==">Kaka</a><img src="/files/Kaka.jpg" /></div><div class="gallery-image"><a href="http://c-lien.blogspot.com/?Iw==">Fernando Torres</a><img src="/svn/demo/image/Fernando-Torres.jpg" /></div><div class="gallery-image"><a href="http://c-lien.blogspot.com/?Iw==">Robinho</a><img src="/files/Robinho.jpg" /></div></div>
CSS
#gallery{ width:878px; display: block; margin: 50px 135px;}.gallery-image{ width:150px; background-color: #fff; border: 1px solid #c2c2c2;   -moz-box-shadow:0 0 20px #292929; -webkit-box-shadow:2px 5px 8px #292929; box-shadow:2px 3px 8px #292929;   padding: 10px 10px 10px 10px; float: left; position: relative;        margin-right: 20px;        margin-bottom: 20px;   -webkit-transition: all 0.5s ease-in-out;     -moz-transition: all 0.5s ease-in-out;     -o-transition: all 0.5s ease-in-out;}.gallery-image img{ background: #000; width: 150px; height: 150px;}.gallery-image:hover{ }.gallery-image a{ display: block; background: #000; color: #fff; font-weight: bold;        font-size: 15px; text-decoration:none; position: absolute; padding-top:5px; bottom: 10px; left: 10px; width: 150px; height: 0px; overflow: hidden; opacity: 0; text-align: center; text-shadow: 1px 1px 1px #303857; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;}.gallery-image:hover a{ height: 25px; opacity: 0.75;}

Aucun commentaire:

Enregistrer un commentaire