Mempercantik Tampilan Gambar Dengan Css

Hai teman-teman semua, di posting pertama ini saya memberikan beberapa koding mempercantik gambar dengan css. Saya memberikan sedikit kode dan mungkin kalian bisa menambahkan kode sesuai keinginan kamu.Berikut kodenya :

Contoh 1 :

Kode Html

<div id="myDivExpFotoSatu">
<img src="gambarmu.jpg"/>
</div>

Kode Css

#myDivExpFotoSatu img{width:100px;border: 1px solid #ccc;padding:5px;}

Keterangan :
width : 100px; adalah panjang gambar.
border:1px solid #ccc; adalah lebar garis 1px, type garis solid, warna #ccc
padding : 5px; adalah lebar dalam border 5px.

Contoh 2 :

Kode Html

<div id="myDivExpFotoDua">
<img src="gambarmu.jpg"/>
</div>

Kode Css

#myDivExpFotoDua img{width:100px;border: 1px solid #ccc;padding:5px;-webkit-border-radius:20px 20px 20px 20px;-moz-border-radius:20px 20px 20px 20px;-o-border-radius:20px 20px 20px 20px;-ms-border-radius:20px 20px 20px 20px;border-radius:20px 20px 20px 20px;}

Keterangan :
border-radius:20px 20px 20px; adalah bergaris lengkung seperti di gambar.
-webkit-, -o-, -ms-, -moz- adalah jenis-jenis browser agar dapat menampilkan seperti yang diperintahkan di border-radius..

Contoh 3 :

Kode Html

<div id="myDivExpFotoTiga">
<img src="gambarmu.jpg"/>
</div>

Kode Css

#myDivExpFotoTiga{width:112px;}
#myDivExpFotoTiga img{width:100px;border: 1px solid #ccc;padding:5px;
-webkit-border-radius:50% 50% 50% 50%;-moz-border-radius:50% 50% 50% 50%;-o-border-radius:50% 50% 50% 50%;-ms-border-radius:50% 50% 50% 50%;border-radius:50% 50% 50% 50%;
}

Untuk contoh ketiga pada dasarnya sama hanya pada border radius di ganti 50%.tapi jangan lupa kotak luar diatur panjang lebarnya agar lingkaran gambar seimbang.


Demikian tutorial mempercantik tampilan gambar dengan css.
Terimakasih sudah membaca.
Mohon tulis komentarmu.