Membuat Gallery Foto Dengan CSS3

Live Demo

Cara membuat gallery foto keren dengan CSS3
Tutorial ini adalah tentang membuat gallery foto dengan css3, sobat dapat mencobanya sendiri, hanya dengan css dan html gallery foto CSS3 ini tanpa javascript.

Tutorial membuat gallery foto dengan css3
Login akun blogger
Buka menu tab template-> Edit template

Step 1 : CSS
Masukan kode css berikut di atas ]]></b:skin> template blog sobat.

/* Photo Gallery styles */
.gallery {
margin: 100px auto 0;
width: 800px;
}
.gallery a {
display: inline-block;
height: 135px;
position: relative;
width: 180px;
/* CSS3 Prevent selections */
-moz-user-select: none;
-webkit-user-select: none;
-khtml-user-select: none;
user-select: none;
}
.gallery a img {
border: 8px solid #fff;
border-bottom: 20px solid #fff;
cursor: pointer;
display: block;
left: 0px;
position: absolute;
top: 0px;
width: 100%;
z-index: 1;
/* CSS3 Box sizing property */
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
/* CSS3 transition rules */
-webkit-transition: all 1.0s ease;
-moz-transition: all 1.0s ease;
-o-transition: all 1.0s ease;
transition: all 1.0s ease;
/* CSS3 Box Shadow */
-moz-box-shadow: 2px 2px 4px #444;
-webkit-box-shadow: 2px 2px 4px #444;
-o-box-shadow: 2px 2px 4px #444;
box-shadow: 2px 2px 4px #444;
}

/* Custom CSS3 rotate transformation */
.gallery a:nth-child(1) img {
-moz-transform: rotate(-25deg);
-webkit-transform: rotate(-25deg);
transform: rotate(-25deg);
}
.gallery a:nth-child(2) img {
-moz-transform: rotate(-20deg);
-webkit-transform: rotate(-20deg);
transform: rotate(-20deg);
}

.gallery a:nth-child(3) img {
-moz-transform: rotate(-15deg);
-webkit-transform: rotate(-15deg);
transform: rotate(-15deg);
}

.gallery a:nth-child(4) img {
-moz-transform: rotate(-10deg);
-webkit-transform: rotate(-10deg);
transform: rotate(-10deg);
}

.gallery a:nth-child(5) img {
-moz-transform: rotate(-5deg);
-webkit-transform: rotate(-5deg);
transform: rotate(-5deg);
}

.gallery a:nth-child(6) img {
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}

.gallery a:nth-child(7) img {
-moz-transform: rotate(5deg);
-webkit-transform: rotate(5deg);
transform: rotate(5deg);
}

.gallery a:nth-child(8) img {
-moz-transform: rotate(10deg);
-webkit-transform: rotate(10deg);
transform: rotate(10deg);
}

.gallery a:nth-child(9) img {
-moz-transform: rotate(15deg);
-webkit-transform: rotate(15deg);
transform: rotate(15deg);
}

.gallery a:nth-child(10) img {
-moz-transform: rotate(20deg);
-webkit-transform: rotate(20deg);
transform: rotate(20deg);
}

.gallery a:nth-child(11) img {
-moz-transform: rotate(25deg);
-webkit-transform: rotate(25deg);
transform: rotate(25deg);
}

.gallery a:nth-child(12) img {
-moz-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
}

.gallery a:focus img {
cursor: default;
height: 250%;
left: -150px;
top: -100px;
position: absolute;
width: 250%;
z-index: 25;
/* CSS3 transition rules */
-webkit-transition: all 1.0s ease;
    -moz-transition: all 1.0s ease;
-o-transition: all 1.0s ease;
    /* CSS3 transform rules */
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}

Step 2 : HTML
Kode berikut di letakan di HTML dalam post ataupun di laman blog sobat.

<div class="gallery">
<a tabindex="1"><img src="URL Gambar" /></a>
<a tabindex="1"><img src="URL Gambar" /></a>
<a tabindex="1"><img src="URL Gambar" /></a>
<a tabindex="1"><img src="URL Gambar" /></a>
<a tabindex="1"><img src="URL Gambar" /></a>
<a tabindex="1"><img src="URL Gambar" /></a>
<a tabindex="1"><img src="URL Gambar" /></a>
<a tabindex="1"><img src="URL Gambar" /></a>
<a tabindex="1"><img src="URL Gambar" /></a>
<a tabindex="1"><img src="URL Gambar" /></a>
<a tabindex="1"><img src="URL Gambar" /></a>
<a tabindex="1"><img src="URL Gambar" /></a>
</div>

URL Gambar silahkan sobat ganti dengan alamat gambar sobat. Demikianlah tentang cara Membuat Gallery Foto Dengan CSS3.

Ditulis Oleh : Robby Armansyah

Anda baru saja membaca artikel dengan judul Membuat Gallery Foto Dengan CSS3. Di tulis oleh Robby Armansyah. Hak cipta di lindungi DMCA dan UUD
URL laman ini.

https://blogtuz.blogspot.com/2014/12/membuat-gallery-foto-dengan-css3.html

✚

BlogTuz

Membuat Gallery Foto Dengan CSS3

Ditulis Oleh : Robby Armansyah

Related Post