Membuat kotak banner menggunakan CSS

Pada tutorial kali ini kita akan membahas tentang bagaimana membuat kotak banner menggunakan css.

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: