Membuat Gambar Menjadi Lingkaran dan Berkelas menggunakan CSS


July 13, 2017

Kali ini Saya akan sharing cara membuat gambar menjadi lingkaran dengan memainan element <img>, kemudian kita tambahkan CSS properti yaitu border-radius

Meskipun mudah untuk menerapkannya pada gambar yang berbanding 1:1 atau persegi, tetapi untuk gambar persegi panjang memerlukan kerja ekstra agar effek lingkaran menjadi sempurna

Pada Gambar Persegi

Untuk pemakaian properti csss pada elemen <img>, gambar persegi sebenarnya cukup mudah, hanya menggunakan 1 baris kode. Teknik ini sangat power full untuk gambar persegi.

Pertama buatlah kode HTML

<img class="buletin" src="stania.jpg" />

Kemudian tambahkan CSS

<style>
.buletin {
  border-radius: 50%;
}
</style>

Kode di atas tersebut sama saja jika kalian menuliskan pada elemen <style>

border-top-left-radius: 50%;
border-top-right-radius: 50%;
border-bottom-right-radius: 50%;
border-bottom-left-radius: 50%;

Maka jadilah gambar seperti ini.

Pada Gambar Persegi Panjang

Paad gambar persegi panjang caranya memang sedikit rumit, untuk membuatnya menjadi lingkran kita harus merubahnya menjadi kotak terlebih dahulu

Untuk mengatasi hal tersebut kita bisa membungkus elemen img dalam elemen div persegi. Bagian img yang melampaui elemen div kita tambahkan properti oveflow: hidden

Agar gambar sepeti terlihat terpotong. Ingat menggunakan gambar persegi panjang yang horizontal (yang persegi panjangnya berorientasi horizontal) berbeda dari gambar yang panjang kebawah (yang merupakan persegi panjang yang berorientasi vertikal).

Jadi gini cetitanya, pertama elemen div kita buat sizenya jadi kotak, misal saya kasih 200px X 200px, Kemudian kita buat elemen img mengikuti sizenya div dengan menambahkan properti width: auto; height: 100%;, terus pada elemen img pasti gambarnya bakal keluar atau ke scroll, nah kita akalin itu pakai CSS properti overflow: hidden;.

Nah gambarnya sudah jadi kotak kan, tapi belum berada di tengah jadi kita beri properti position: relative; pada element div, karena dia pembungkus img, kemudian pada element img kita beri properti margin-left: -50px;, kita menggeser ke kiri sebesar 50px, karena 50px = 25% dari element div tadi.

Kita buat kode HTML dulu

<div class="buletin-nih-gan">
  <img src="images/gintoki.jpg" />
</div>

Kemudian kita beri style CSS.

.buletin-nih-gan {
  height: 200px;
  width: 200px;
  overflow: hidden;
  position: relative;
  border-radius: 50%;
}
.buletin-nih-gan img {
  width: auto;
  height: 100%;
  margin-left: -50px;
}

Maka jadinya akan seperti ini.

Note : Untuk gambar yang persegi panjang vertikal sebenarnya sama seperti Horizontal cukup hilangkan saja margin-left, kemudian balik properti pada img ganti width menjadi 100%; kemudian height menjadi auto. Sekian tutorial dari Saya semoga membantu.

25 comments:

  1. anjir jadi gitu caranya gan,,, ane coba gan praktekin,,,

    ReplyDelete
  2. Wahhhh ngebantu banget info nya gan

    ReplyDelete
  3. Thanks infonya gan..ijin bookmark, karena bermanfaat nih bagi ane kedepannya.

    ReplyDelete
  4. Thanks infonya gan..ijin bookmark, karena bermanfaat nih bagi ane kedepannya.

    ReplyDelete
  5. makasih infonya ane jadi tau caranya gan

    ReplyDelete
  6. KEREN mas nanti saya coba, ijin sedot :D

    ReplyDelete
  7. Wih baru tau ternyata di blogspot bisa kyk gini gan

    ReplyDelete
  8. Mantap gan triknya,, membantu bangat

    ReplyDelete
  9. Makasih infonya min, entar ane coba terapin.

    ReplyDelete
  10. wih keren gan izin bookmark nanti di coba praktekin

    ReplyDelete
  11. setau saya caranya pake css border radius

    ReplyDelete
    Replies
    1. Iya gan, tapi kalau gambarnya persegi panjangkan harus ada tambahannya, hehehe

      Delete
  12. Walaupun ane udah ngerti but thanks lah udah share hehe

    ReplyDelete
  13. weh mudah gitu ternyata wwkkw. nice inpoh

    ReplyDelete
  14. thanks tutor nya gan, kebetulan ane lagi perlu untuk poto profil.

    ReplyDelete
  15. apa bisa untuk semua gambar min?

    ReplyDelete
  16. buta kalo main css tapi pas baca artikel ini jadi agak ngerti sedikit

    ReplyDelete
  17. ah,, mau coba ah,,hehe thanks gan tutornya ditunggu yg lainnya gan,,

    ReplyDelete
  18. mantap informasi tentang css sekarang jadi nambah ++

    ReplyDelete
  19. Thanks gan infonya bisa di coba nih ijin gan

    ReplyDelete
  20. lebih sederahana ini caranya.. ijin praktek ke blog ane gan

    ReplyDelete