Kumpulan Tips Dan Trik Menarik: Cara Membuat Gambar Bulat dengan CSS

Wednesday, May 21, 2014

Cara Membuat Gambar Bulat dengan CSS

Beberapa waktu yang lalu saya merubah template blog ini, dengan bermodal template sederhana saya sedikit melakukan modifikasi, salah satu nya adalah modifikasi pada tampilan gambar thumbnail di halaman awal seperti ini.

Sebenarnya modifikasi yang saya lakukan sangatlah sederhana namun ternyata banyak diantara sobat yang bertanya bagaimana cara membuat gambar menjadi bulat seperti itu.

Sebenarnya caranya sangatlah mudah, hanya dengan membuat beberapa baris Code CSS saja, seperti di bawah ini.

Mengunakan Border warna warni


.bulat{
border-radius:100em;
opacity:0.5;
border-top:2px solid #cf2031;
border-right:2px solid #0f7dc8;
border-bottom:2px solid #2eb31a;
border-left:2px solid #eab823;
width:160px;
height:160px;
}

Tanpa Menggunakan Border


.bulat{
border-radius:100em;
opacity:0.5;
width:160px;
height:160px;
}

Menggunakan Border 1 Warna


.bulat{
border-radius:100em;
opacity:0.5;
border:2px solid #ddd;
width:160px;
height:160px;
}

Jika sobat ingin menerapkannya di blogger, begini caranya

Masuk ke Blogger => Template => Edit HTML
Kemudian pastekan salah satu code CSS di atas sebelum tag </style>
Kemudian save template.

Dan setiap sobat menampilkan gambar maka cukup tambahkan class bulat, contohnya seperti ini


<img class="bulat" src="LINK GAMBAR SOBAT" />

Catatan :

Untuk merubah ukuran gambar sobat tinggal mengganti value pada bagian width dan height namun ukurannya harus sama, jika width="120px" maka height juga harus 120px

Selamat Mencoba...!!!