Mendesain halaman dengan css3

Berikut langkah-langkah nya 

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,semoga bermanfaat