Mas Uya

Halo sobat blogger,di hari yang cerah ini saya akan share Gallery Foto Dengan CSS3.

Sudah lama saya tidak share gallery,Nah dipost ini akan saya share Gallery sederhana.

Buat kalian yang tidak sabar ingin membuatnya silahkan ikuti tutorial berikut.

CSS

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video{margin:0; padding:0; border:0; font-size:100%; font:inherit; vertical-align:baseline}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section{display:block}
body{line-height:1}
ol, ul{list-style:none}
blockquote, q{quotes:none}
blockquote:before, blockquote:after, q:before, q:after{content:''; content:none}
table{border-collapse:collapse; border-spacing:0}
.galerie{ margin:10% auto}
.galerie li{float:left; margin:0 10px; padding:10px; list-style:none; border:1px solid #ddd}
.galerie img{float:left; width:200px; -webkit-transition:-webkit-transform 0.2s ease-in-out; -moz-transition:-moz-transform 0.2s ease-in-out; transition:transform 0.2s ease-in-out}
ul.galerie li a:hover img{-webkit-transform-origin:center; -moz-transform-origin:center; -o-transform-origin:center; transform-origin:center; -webkit-transform:scale(1.5); -moz-transform:scale(1.5); -o-transform:scale(1.5); transform:scale(1.5); -webkit-box-shadow:4px 4px 10px rgba(0,0,0,0.5); -moz-box-shadow:4px 4px 10px rgba(0,0,0,0.5); box-shadow:4px 4px 10px rgba(0,0,0,0.5)}
h2{ font-size:2em;  color:#fff;  margin-bottom:15px}
h4{ text-align:center;  margin:5% auto;  font-size:1em;  color:#000;  margin-bottom:25px}
a{ text-decoration:none}

HTML

<ul class="galerie">
<li><a href="#"><img src="#IMAGE1" /></a></li>
<li><a href="#"><img src="#IMAGE2" /></a></li>
<li><a href="#"><img src="IMAGE3" /></a></li>
</ul>

Nah itu dia CSS dan HTML,dari Gallery Foto Dengan CSS3
Untuk kalian yang ingin mengguanakannya diblog,silahkan lihat caranya dlu disini
Kalo sudah,copy code berikut kedalamnya

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<HTML>
<head>
<style type='text/css'>
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video{margin:0; padding:0; border:0; font-size:100%; font:inherit; vertical-align:baseline}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section{display:block}
body{line-height:1}
ol, ul{list-style:none}
blockquote, q{quotes:none}
blockquote:before, blockquote:after, q:before, q:after{content:''; content:none}
table{border-collapse:collapse; border-spacing:0}
.galerie{ margin:10% auto}
.galerie li{float:left; margin:0 10px; padding:10px; list-style:none; border:1px solid #ddd}
.galerie img{float:left; width:200px; -webkit-transition:-webkit-transform 0.2s ease-in-out; -moz-transition:-moz-transform 0.2s ease-in-out; transition:transform 0.2s ease-in-out}
ul.galerie li a:hover img{-webkit-transform-origin:center; -moz-transform-origin:center; -o-transform-origin:center; transform-origin:center; -webkit-transform:scale(1.5); -moz-transform:scale(1.5); -o-transform:scale(1.5); transform:scale(1.5); -webkit-box-shadow:4px 4px 10px rgba(0,0,0,0.5); -moz-box-shadow:4px 4px 10px rgba(0,0,0,0.5); box-shadow:4px 4px 10px rgba(0,0,0,0.5)}
h2{ font-size:2em;  color:#fff;  margin-bottom:15px}
h4{ text-align:center;  margin:5% auto;  font-size:1em;  color:#000;  margin-bottom:25px}
a{ text-decoration:none}
</style>
</head>
<body>
<ul class="galerie">
<li><a href="#"><img src="#Image1" /></a></li>
<li><a href="#"><img src="#Image2" /></a></li>
<li><a href="#"><img src="#Image3" /></a></li>
</ul>
</body>
</HTML>


1.Ganti #Image-#Image3 dengan gambar kalian
2.Untuk menambah ganbar cukup gunakan <li><a href="#"><img src="URL Gambar Kalian" /></a></li>

Oke itu dia Gallery Foto Dengan CSS3,Untuk selebihnya silahkan kreasikan sendiri ya,Salam blogger

Demo