Membuat kotak banner menggunakan CSS

Kamis, 17 Mei 2012 13.21 | Posted by Nanang Gunawan
Pada tutorial kali ini kita akan membahas tentang bagaimana membuat kotak banner menggunakan css.
Pada posting sebelumnya saya telah membahas tentang Mendesain Layout Website dengan HTML dan CSS pada tutorial tersebut telah saya jelaskan mengenai dasar-dasar css dan html, nah pada tutorial sekarang ini kita akan mengembangkan teknik-teknik dasar tersebut, saya anjurkan untuk mempelajari dahulu tentang dasar css dan html sebelum masuk ke tutorial ini :)

Langsung saja kita masuk pada cara pembuatannya:
Pertama kita harus mempunyai sebuah gambar yang akan kita gunakan nantinya untuk mengisi kotak banner dan kita beri nama gambar tersebut image.jpg selanjutnya kita letakkan ke dalam folder images, kemudian kita buat sebuah file html misalnya index.html dengan isi sebagai berikut:


<style type="text/css">  
/*membuat bentuk untuk banner pertama pada keadaan normal atau mouse tidak berada di atas banner*/
.frame1 a{     
    width:100px;
    height:125px;
    display:block;
    background:#10c707;/*membuat backgroud kotak menjadi hijau*/
    padding:5px;
    margin-bottom:5px;
    margin-left: 3px;
    margin-right: 3px;      
    float:left;
    /*untuk membuat lengkungan pada kotak banner*/
    -moz-border-radius-topleft:40px;
    -moz-border-radius-topright:0px;
    -moz-border-radius-bottomleft:0px;
    -moz-border-radius-bottomright:40px;
    -webkit-border-top-left-radius:40px;
    -webkit-border-top-right-radius:0px;
    -webkit-border-bottom-left-radius:0px;
    -webkit-border-bottom-right-radius:40px;
}
/*membuat bentuk untuk banner pertama pada keadaan mouse berada di atas banner*/
.frame1 a:hover{
    -moz-border-radius-topleft:0px;    
    -moz-border-radius-bottomright:0px;
    -webkit-border-top-left-radius:0px;      
    -webkit-border-bottom-right-radius:0px;      
}                   
</style>
<div class="frame1">
    <a href="#"><img alt="" height="125" src="images/image.jpg" title="" width="100" /></a>
</div>


Nah jika file index.html tersebut di run atau di buka di browser maka akan hasilnya adalah seperti kotak di bawah ini:











Nah sekarang kotak banner pertama telah jadi, lalu bagaimana caranya jika kita hendak membuat banyak kotak banner?

Berikut saya sertakan contoh untuk mebuat empat kotak banner, silahkan download disini

Hasil dari empat kotak banner tersebut adalah seperti gambar dibawah ini:


Selamat Bereksperimen!

9 Comments to Membuat kotak banner menggunakan CSS

Wahhh Gitu Caranya :D Thanks Infonya Gan :D

thank's gan udah share, lumayan buat nambah ilmu.

Nice Share sob. Keep Update ya !

keren follow back gan

asyik2,, keren,,
mantab gan

"Pedagang Pulsa"

Siiip
Masbro..
Ini yang saya cari2 juga :D
xD

Komentar Balik Ditunggu :)

Makasih infonya, mas...kalau sempet mampir untuk gabung dgn teman lain yang udah submit url blognya di Direktori Weblog Indonesia :)

Poskan Komentar