Mendesain halaman Gallery dengan CSS3

Membuat halaman Profile atau halaman Team work dalam sebuah website perusahaan itu penting, halaman itu biasanya berisi foto anggota tim dan jabatannya pekerjaannya.

Dalam tutorial ini kita akan mencoba membuat halaman tersebut agar terlihat lebih menarik. Idenya yaitu membuat biodata muncul ketika mouse berada diatas gambar dan disaat itu juga gambar yang lain akan ikut meredup. Seperti gambar berikut. Kita gunakan CSS Transition dan bantuan Opacity :D

Bahan-Bahan

Rebel Background Pattern dari subtlepattern

2 Buah Font Doppio One dan Noticia Text yang diembed dari Google Webfonts

Foto Avatar dari Sarah Parmenter

Struktur HTML


   <ul class="profiles">

<li class="maurice">
<a href="#">
<div class="bio">
<div class="name">Maurice</div>
<div class="position">Co-Founder</div>
<div class="description">Vivamus ornare massa in nisl posuere sit amet interdum nisl accumsan. Cras accumsan viverra justo sit amet faucibus.</div>
</div>
</a>
</li>

<li class="adrian">
<a href="#">
<div class="bio">
<div class="name">Adrian</div>
<div class="position">Manager</div>
<div class="description">Fusce ornare quam ut leo aliquam et dignissim urna pulvinar</div>
</div>
</a>
</li>

<!-- Next Member Thumbnail -->
</ul>


     
disitu bisa kita lihat bahwah ada unordered list (ul), dan setiap list anggota disertai dengan biodata singkat.


CSS

Untuk mempercantik struktur HTML dan membuatnya lebih animatif kita akan banyak menggunakan css transition

Halaman akan kita buat selebar 660px, karena kita butuh 3 kolom untuk gambar yang berukuran 200px * 6 dan margin 10px * 6


.profiles{
overflow:hidden;
list-style:none;
width:660px;
margin:40px auto;
padding:10px 20px;
}



Untuk membuat list foto yang dibuat menjadi 3 kolom kita akan butuhkan float:left


.profiles li{
display:inline;
float:left;
margin:10px;
transition: opacity 500ms ease-in-out;
box-shadow: inset 0 0 1px 0px #000;
}


Untuk membuat biodata meredup yaitu background:rgba(0,0,0,0.8);


.profiles li a .bio{
color:#fff;
height:90%;
width:90%;
background:rgba(0,0,0,0.8);
opacity:0;
padding:5%;
box-shadow: inset 0 0 5px 5px #000;
}



Untuk mempercantik elemen-elemen biodata menggunakan font yang telah ditentukan



name{font-size:20px;font-weight:bold;font-family: 'Doppio One', sans-serif;color:#fff000}
.position{font-size:18px;font-family: 'Noticia Text', serif;}
.description{padding-top:10px;font-size:13px;font-family: 'Noticia Text', serif;}



Untuk memunculkan foto kita jadikan background



li.maurice{background-image:url(img/Maurice.jpeg)}
li.sarah{background-image:url(img/Sarah.png)}
li.adrian{background-image:url(img/Adrian.png)}
li.amber{background-image:url(img/Amber.jpg)}
li.giles{background-image:url(img/Giles.jpg)}
li.petra{background-image:url(img/Petra1.png)}
li.shane{background-image:url(img/Shane.jpg)}


Oke cukup sekian tutorial kali ini, perlu diperhatikan bahwa browser yang bisa menjalankan halaman ini dengan baik hanya yang sudah support CSS Transition.




SUMBER = http://www.tutorial-webdesign.com/animasi-hover-dengan-css3/