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 KOTAK TEASER DENGAN CSS
August 7, 2009
Posted by: Fauzie


Kotak teaser atau "teaser box" adalah merupakan satu bentuk kotak yang selalu digunakan dalam banyak website. Ia digunakan untuk menunjukkan ringkasan rencana atau "excerpt" sesuatu artikel atau dokumen.

Di bawah ini ialah screen shot contoh "teaser box" yang telah dibuat menggunakan image yang mempunyai "rounded corner". Ianya mudah untuk dibuat dengan CSS tanpa banyak menggunakan "extra mark up code". Boleh memanjang ke bawah ("vertically") bagi menampung maklumat yang dimuatkan. Walaubagaimana pun lebarnya atau "width" adalah terbatas (fixed).

Penggunaan "teaser box" ini diperkenalkan oleh Roger Johansson. Pada peringkat awalnya, beliau menggunakan 2 image bagi mendapatkan bentuk kotak dan kemudian berjaya membuat perubahan kepada kod dengan menggunakan satu image sahaja.

Contoh yang ditunjukkan di bawah ini menggunakan satu image sahaja. Untuk melihat bagaimana ia digunakan, sila klik "Live Demo".



Di bawah ini ialah image yang telah digunakan untuk membuat "background image" teaser box ini. Image perlu diupload terlebih dahulu untuk mendapatkan URL nya. Bagi contoh di atas saya telah upload image melalui Photobucket.



Kod-kod CSS dan HTML adalah seperti di bawah ini.

<html>
<body>
<style type="text/css" media="screen,print">
html,
body {
margin:0;
padding:0;
color:#000;
background:#fff;
}
body {
padding:20px;
font:76%/140% "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
}
#labfooter {
text-align:center;
clear:both;
}
.adwrap {
margin:30px auto 10px;
padding:10px 0;
width:468px;
border:1px solid #ccc;
border-width:1px 0;
}
.adwrap object {
width:468px;
height:60px;
}
.teaser {
width:430px;
padding:0 0 14px 0;
margin:10px auto;
background:url("http://i425.photobucket.com/albums/pp331/fauzi6009/tsr-1.gif") bottom left no-repeat;
}
.teaser h3 {
margin:0;
padding:7px 10px 3px 10px;
background:url("http://i425.photobucket.com/albums/pp331/fauzi6009/tsr-1.gif") top left no-repeat;
}
.teaser p, .teaser a.more {
margin:0;
padding:0 10px 3px;
border:1px solid #d8d8d8;
border-width:0 1px;
background:#fff;
}
.teaser a.more {
display:block;
text-align:right;
background:url("tsr-a.gif") 410px 50% no-repeat;
padding:0 24px 0 0;
text-decoration:none;
color:#44a;
}
.teaser a.more:hover {
text-decoration:underline;
}
</style>
</head>
<body>
<div class="teaser">
<h3>Mega Menu</h3>
<p>Ini adalah contoh teaser box. Lebar atau width kotak adalah "fixed" dan ini membolehkan ia dibuat dengan menggunakan satu "background image" sahaja yang mana ke empat-empat bucunya mempunyai "rounded corner".</p>

</div>
<div id="labfooter">
<p>Dapatkan kod di bawah ini</p>
</div>
</body>
</html>


Teks yang terdapat pada kod CSS di atas hanyalah contoh sahaja. Anda boleh mencubanya dengan copy & paste kod-kod di atas dalam notepad dan kemudian browse dalam browser (sila lihat artikel sebelum untuk mengetahui bagaimana hendak save dalam notepad dan lihat dalam browser).

Kod-kod berwarna maroon ialah kod CSS dan kod-kod berwarna biru adalah kod HTML.