Selamat Datang

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

Css3 Hover Animation

Css3 Hover Animation

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

DEMO | DOWNLOAD

Semoga tulisan ini bisa menginspirasi anda dalam membuat website.

Salama Wakaka Design :D

Jangan lupa Follow Twitter kami @tut_web





Comments

Leave a Comment

XHTML: You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>


Klik Tombol Like / Suka ya kawan..

Klik tombol "Like" atau "Suka" untuk mendapatkan update tutorial, tips & tricks serta info terbaru seputar dunia web design & development