Mengubah Gambar Persegi Menjadi Lingkaran Dengan CSS3

Salah satu property CSS3 dapat mengubah gambar persegi menjadi lingkaran. Sudah tau property itu apa? jika belum silakan baca disini. Property border-radius dapat melakukannya.

Bagaimana caranya? simak penjelasan berikut.


Pertama, buat dua file; index.html dan style.css. File index.html digunakan untuk memasukkan gambar, sedangkan file style.css digunakan untuk styling gambar tersebut.

Letakkan kedua file tersebut kedalam satu folder.


Kedua, siapkan gambar yang akan diubah. Letakkan gambar tersebut kedalam folder tadi (folder yang berisi file index.html dan style.css).

mengubah gambar persegi menjadi lingkaran dengan css3

mengubah gambar persegi menjadi lingkaran dengan css3

Baca juga ya..
Mengenal HEX Color pada CSS
Ini Psikologi Warna yang Harus Ente Tahu
Mengenal Color Names

Ketiga, isi file index.html dengan code HTML seperti berikut:
<!DOCTYPE html>
<html>
 <head>
  <title>Rounded Image</title>
  <link href="style.css" rel="stylesheet" /> 
 </head>

 <body>
  <section>
   <img src="image.png" />
  </section>
 </body>
</html>

Code diatas hanya code sederhana, hanya berisi gambar yang diletakkan pada tag <section>. Tag <section> merupakan salah satu dari tag HTML5.

Untuk memasukkan gambar gunakan tag <img> ditambah dengan atribut src yang berisi url/lokasi gambar.

Keempat, isi file style.css dengan code CSS seperti berikut:
*{ 
 margin: 0;
 padding: 0;
}

body{
 background: #ff4700;
 text-align: center;
}

section{
 margin: 100px auto;
}

section img{
 border-radius: 100%;
 border: 10px solid #fff;
}

Selector * pada baris pertama merupakan CSS reset, selengkapnya bisa baca disini. Code CSS reset ini sesuai selera, apa saja yang ingin diatur ulang.

Code diatas hanya mengatur ulang margin dan padding antara browser dengan elemen HTML terluar agar bernilai nol dan lebih pas dalam styling jarak. Atau lebih lengkap bisa menggunakan CSS reset meyerweb.

Dari code CSS diatas terlihat border-radius diberi value atau nilai sebesar 100%. Artinya, keempat sudut pada gambar memiliki radius sebesar 100%.

mengubah gambar persegi menjadi lingkaran dengan css3

mengubah gambar persegi menjadi lingkaran dengan css3

Agar gambar berbentuk lingkaran, resolusi panjang dan lebar harus sama. Karena jika tidak, akan berbentuk oval.


Tag : Web Desain
0 Komentar untuk "Mengubah Gambar Persegi Menjadi Lingkaran Dengan CSS3"