Cara Ubah HTML Image menjadi Circular Seperti Profile Picture pada Social Media

Belajar HTML Image Circular - Ubah Foto Seperti Profile Picture Socmed

Foto profile yang berbentuk bulat (circular) sekarang banyak digunakan diberbagai situs sosial media maupun blog. Dengan mendesain HTML image menjadi circular kita dapat mempercantik website khususnya foto menjadi lebih elegan dan keren.

Tutorial belajar css kali ini akan membahas bagaimana cara membuat foto profile yang bulat (circular image) seperti di situs sosial media. Mari kita mulai mengubah gaya html image dengan css.

Langkah 1: Buat File HTML dan Elemen HTML Image

Silakan buat gambar yang akan kita ubah menjadi circular. Pastikan gambar kamu berbentuk square, yang artinya ukuran width dan height nya sama.

Kode HTML:

<!DOCTYPE html>
<html>
<head>
   <title>HTML Image</title>
</head>
<body>
   <img src="https://placehold.it/150x150" />
</body>
</html>

Simpan dan hasilnya akan seperti berikut.

HTML Image

Langkah 2: Styling dengan CSS

Sekarang kita buat sebuah class sebagai tempat untuk membuat gambar menjadi bulat. Kita buat dulu file css dan beri nama style.css.

Kode CSS:

.circular-image {
     border: 1px solid #000000;
     width: 150px;
     height: 150px;
     overflow: hidden;
}

Simpan dan panggil file style.css tersebut dan tempatkan di file html yang sebelumnya kita buat. Lihat contoh berikut.

Kode HTML:

<!DOCTYPE html>
<html>
<head>
   <title>HTML Image</title>
   <link rel="stylesheet" href="style.css" />
</head>
<body>
   <img src="https://placehold.it/150x150" />
</body>
</html>

Langkah 3: Edit Elemen HTML Image

Buka file html dan edit elemen html image yang telah kita buat sebelumnya seperti dibawah ini:

Kode HTML:

<div class="circular-image">
     <img src="http://placehold.it/150x150" />
</div>

Simpan dan lihat hasilnya akan seperti berikut ini.

Langkah 4: Buat Radius (Lengkungan)

Setelah langkah diatas berhasil, namun masih belum berbentuk bulat (circular). Bagaimana caranya? Sekarang kita edit kembali style.css yang telah kita buat.

Kode CSS:

.circular-image {
     border: 1px solid #000000;
     width: 150px;
     height: 150px;
     overflow: hidden;
     border-radius: 50%; /* Tambahkan baris berikut */
}

Dan voila! Kita berhasil mengubah HTML image menjadi bentuk bulat seperti pada profil picture di social media kita.

Tutorial diatas adalah sedikit cara mengubah gaya gambar atau foto sehingga lebih menarik dan terlihat profesional.

Bagi teman-teman yang ingin belajar html dari nol, aku menulis materi belajar html khusus untuk pemula. Penjelasan materi disertai gambar dan contoh kode html.

Materi belajar html antara lain:

  • Struktur HTML Dasar
  • Cara Memasukan Video Youtube di Website
  • Cara Memasukan Musik Spotifiy di web dengan html
  • Cara Memasukan Twitter Timeline dan Instagram Posts
  • Cara Membuat Daftar List Item
  • Cara Membuat Paragraf Teks
  • dan materi lainnya

Semua materi belajar html diatas manual menggunakan notepad. Disini aku akan sharing rahasia agar menguasai html dengan cepat dan gampang sesuai pengalaman ku.

Baca materi nya disini ya: Belajar HTML Gampang Banget! – HTML Warrior #1.

Demikian tutorial css cara ubah html image menjadi bulat (circular). Semoga tulisan ini bermanfaat untuk teman-teman. Jangan lupa share untuk berbagi ilmu dengan teman-teman lainnya ya!

Leave a Comment

Your email address will not be published. Required fields are marked *

Pin It on Pinterest

Shares
Scroll to Top