Ticker

6/recent/ticker-posts

Bina poket card untuk blog

Abe Nick Disember 28, 2010


CSS membolehkan kita membuat "effect" yang hebat bagi mencantikkan lagi website atau blog.
Dalam tutorial ini saya akan cuba tunjukkan bagaimana membuat "web pocket card" dengan menggunakan teknik CSS3.

Nota: hanya sesuai dengan browser Safari atau Chrome

Bagi contoh pertama ini, image telah disusun secara "horizontal" dan ini dibina dengan menggunakan "table". Walaupun ia boleh disusun secara "listed item" <li>, cara meletakan image dalam table saya rasa lebih mudah.

Kod-kod Markup dan CSS untuk contoh "pocket card" di atas adalah seperti berikut.

<html>
<head>
<style type="text/css">

#poket {
float: left;
margin-top:50px;
margin-bottom:10px;
margin-left:10px;
}
.poket-container {
width: 110px;
height: 58px;
float:left;
clear: left;
border-bottom: 1px solid #C5C5C8;

}
.kad {
width: 100px;
height: 22px;
float: left;
overflow: hidden;
margin-left: 28px;
margin-top: 35px;
-moz-transition-duration: 1s;
-webkit-transition-duration: 1s;
-o-transition-duration: 1s;
}
.kad-satu {

background-color: transparent;
}
.kad-dua {
background-color: transparent;
}
.kad-tiga {
background-color: transparent;
}
.kad-empat {
background-color: transparent;
}

/***kod untuk animasi***/
.poket-container a:hover {
height: 53px;
-webkit-transform: translateY(-30px);
-moz-transform: translateY(-30px);
text-decoration: none;
}

</style>
</head>
<body>
<div id="poket">
<table>
<tbody>
<tr>
<td>
<div class="poket-container">
<a class="kad kad-satu" href=""><img src="http://icondock.com/wp-content/themes/idock/images/featured-origami.png " float="center" border="none"/></a>
</div>
</td>
<td>
<div class="poket-container">
<a class="kad kad-dua" href=""><img src="http://icondock.com/wp-content/themes/idock/images/featured-webpro.png" float="center" border="none"/></a>
</div>
</td>
<td>
<div class="poket-container">
<a class="kad kad-tiga" href=""><img src="http://icondock.com/wp-content/themes/idock/images/featured-higloss.png " float="center" border="none"/></a>
</div>
</td>
<td>
<div class="poket-container">
<a class="kad kad-empat" href=""><img src="http://icondock.com/wp-content/themes/idock/images/featured-simplybold.png " float="center" border="none"/></a>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

Nota: Jika anda ingin membuatnya dalam blog, sila ambil perhatian kepada kod CSS ini:

#poket {
float: left;
margin-top:50px;
margin-bottom:10px;
margin-left:10px;
}

Pixel(px) margin kod-kod berwarna maroon boleh di "adjust" bagi menentukan kedudukan "pocket card" ini. Jika anda mencubanya dengan Notepad, sila tambah atau kurangkan pixel tersebut untuk mengetahui bagaimana ia berfungsi.

Catat Ulasan

8 Ulasan