Cataloged Autobiography
BERKENAAN SAYA
Hello. Saya adalah self-taught web designer yang banyak menghabiskan masa meneroka penggunaan CSS dan HTML. Blogging hanyalah hobi. Teruskan membaca..
The Readable Journal
MENEROKA ARTIKEL
Teroka artikel berhubung dengan tutorial, contoh dan penggunaan CSS dan HTML dalam web design di ruang ini. Web design menyeronokan. Ke tutorial...Klik sini
Astrolab Tool
KATEGORI ARTIKEL
Suatu sistem yang berfungsi untuk membantu menjelajahi topik-topik terkait dan menyenaraikan pelbagai sub-bahagian artikel...Klik sini



BINA POCKET CARD DENGAN CSS
November 30, 2010
Posted by: Fauzie


C SS membolehkan kita membuat "effect" dan "feature" yang hebat bagi  mencantikkan dan memberi nilai lebih kepada sesuatu website itu.  Salah satu perkara yang menarik berkenaan CSS, terutama CSS3 ialah "transition effect" ke atas elemen dengan hanya beberapa baris kod yang mana sebelum ini dibina menggunakan javaScript.

Dalam tutorial ini saya akan cuba tunjukkan bagaimana membuat "web pocket card" dengan menggunakan teknik CSS3. Versi ini adalah versi yang telah dibuat perubahan ke atas versi asalnya. Sila lihat versi asal di sini dan kemudian lihat pula dua versi yang saya buat seperti yang ditunjukkan dalam "live demo" di bawah ini.

Terdapat dua perbezaan jika dibandingkan versi asal dengan versi yang saya sediakan ini:
  • saya menggunakan image berbanding versi asal menggunakan "container".
  • container "terlompat-lompat" bila dihover pada versi asal, tetapi image pada versi saya naik dan turun dengan "cantik" dan "smooth". Effect ini terjadi dengan menambah kod -webkit-transition-duration: 1s.


"Live Demo" : Contoh pertama

Nota: hanya sesuai dengan browser Safari atau Chrome
Nota terbaru: contoh ini juga sesuai dilihat melalui versi Firefox baru ia itu Firefox 4





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.

"Live Demo" : Contoh kedua


Bagi contoh kedua ini, saya telah membuat sedikit lagi perubahan. Pertama, image disusun secara "vertical" dan kedua, menggunakan image sebagai "poket" (dalam contoh pertama, garisan bawah image tersebut dibuat dengan kod ini border-bottom: 1px solid #C5C5C8;)

Di bawah ini ialah kod lengkap HTML dan CSS bagi contoh di atas. Jika anda ingin mencubanya, copy & paste semua kod ini dalam Notepad. Sila lihat tutorial-tutorial sebelum ini cara dan langkah-langkah untuk save dan upload. Begitu juga untuk membina dalam website atau blog, anda boleh lihat tutorial-tutorial ini.

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

/***pocket card with image-transition and translateY--contoh No. 2***/
#imageCARD {
margin: 180px 150px 10px 100px;
float: left;
}

.imageCARD-container {
width: 560px;
height: 58px;
float:left;
clear: left;
background: url(http://www.zulsdesign.com/images/pemisah.png) no-repeat;
}

.foto {
width: 200px;
height: 22px;
float: left;
overflow: hidden;
margin-left: 140px;
-moz-box-shadow: 5px 0px 10px grey;
-webkit-box-shadow: 5px 0px 10px grey;
-moz-transition-duration: 1s;
-webkit-transition-duration: 1s;
-o-transition-duration: 1s;
margin-top:-23px;
}

.foto-one {
background-color: transparent;
}

.foto-two {
background-color: transparent;
}

/* ======== Animations ======== */

.imageCARD-container a:hover {
height: 170px;
-webkit-transform: translateY(-147px);
-moz-transform: translateY(-147px);
text-decoration: none;
}

</style>
</head>
<body>

<div id="imageCARD">
<div class="imageCARD-container">
<a class="foto foto-one" href="http://www.blogger.com/post-edit.g?

blogID=6477671071252691471&amp;postID=5110459751877438509"><img

src="http://t1.gstatic.com/images?

q=tbn:ANd9GcRNgfQueGf2QTlnf0ACRoZVNmCf2K013x-V3qXuSdMkt5hsGym9BQ"

float="center" width="203" height="200" border="none" /></a>
</div>
<div class="imageCARD-container">
<a class="foto foto-two" href="http://www.blogger.com/post-edit.g?

blogID=6477671071252691471&amp;postID=5110459751877438509"><img

src="http://t2.gstatic.com/images?

q=tbn:ANd9GcRTIsP1y9ac47Av5wzmvurKvatZz1Rk4xOPsR1r2h6_tKhk_xhN"

float="center" width="203" height="200" border="none" /> </a>
</div>
</div>
</body>
</html>


Nota: Sila perhatikan kod-kod di bawah ini terutama kod ini margin: 180px 150px 10px 100px;. Kod ini ialah untuk menentukan kedudukan atau posisi "pocket card" ini terutama jika anda ingin letakkannya dalam blog:

180px ialah jarak atau margin dari atas
150px jarak margin sebelah kanan
10px jarak margin dari bawah
100px pula ialah jarak margin disebelah kiri

#imageCARD {
margin: 180px 150px 10px 100px;
float: left;

Anda hanya perlu tukarkan nombor pixel ini bagi mendapatka kedudukan yang sesuai bagi "pocket card" ini.


Kembali kepada | Archives →

Sebarang komen dan pertanyaan, sila klik butang di bawah ini: