Halo teman-teman bertemu lagi dalam artikel saya, kali ini kita akan belajar cara membuat gambar berbentuk lingkaran dengan css, dengan membuat gambar menjadi lingkaran kita tidak terpaku lagi dengan dengan gambar yang bisanya berbentuk kotak, pasti akan tiba saatnya kita ingin membuat gambar berbentuk lingkaran, oke simak terus ya teman-teman.
Untuk belajar cara membuat gambar berbentuk lingkaran dengan css, kita bisa menggunakan kode CSS dengan sedikit menstyle CSS kita bisa merubah gambar menjadi berbentuk lingkaran. Yang pertama yang harus kita lakukan siapkan gamabarnya (ya itu pasti ya hehe), dan selanjutnya kita buat kode seperti ini. Perhatikan kode HTML di bawah ini:
<!DOCTYPE html>
<html>
<head>
<title>Cara membuat gambar berbentuk lingkaran dengan CSS</title>
<style type="text/css">
.container{
width: 900px;
margin: auto;
background: #1abc9c;
text-align: center;
border-radius: 5px;
padding: 5px;
}
hr{
width: 800px;
color: #e74c3c;
}
h2{
color: green;
}
h1{
color: red;
}
/*KODE CSS MEMBUAT GAMBAR BERBENTUK LINGKARAN*/
.lingkaran{
border-radius: 50%;
width: 400px;
height: 400px;
}
</style>
</head>
<body>
<div class="container">
<h2>gambar sebelum di style, masih berbentuk persegi panjang</h2>
<img src="Cara membuat gambar berbentuk lingkaran dengan CSS.jpg">
<hr>
<h1>Setelah di style sekarang berbentuk lingkaran</h1>
<img src="Cara membuat gambar berbentuk lingkaran dengan CSS.jpg" class="lingkaran">
</div>
</body>
</html>
seperti yang teman lihat di atas, saya membuat contoh dua gambar supaya biar ada perbandingan, gambar yang pertama adalah gambar aslinya yaitu berbentuk persegi panjang, dan tidak saya style sama sekali, dan yang kedua hasil style yang saya buat dengan border-radius: 50%; dan yang perlu teman-teman lihat untuk belajar cara membuat gambar berbentuk lingkaran dengan css, dengan style CSS border-radius: 50% berarti gambar yang kita perlukan harus persegi, dengan panjang yang sama. seperti yang teman-teman lihat di atas, di kode CSSnya gambar saya rubah width dan heightnya sama, yaitu: width: 400px dan height 400px; dan akan menghasilkan gambar di atas. bagaimana menarik bukan.
Jika teman-teman ingin menambahkan bordernya juga bisa, dan nanti border tersebut akan mengikuti lingkaran tersebut berbentuk lingkaran juga, untuk kodenya saya tambahkan sedikit bisa teman-teman lihat di bawah:
<!DOCTYPE html>
<html>
<head>
<title>Cara membuat gambar berbentuk lingkaran dengan CSS</title>
<style type="text/css">
.container{
width: 900px;
margin: auto;
background: #1abc9c;
text-align: center;
border-radius: 5px;
padding: 5px;
}
hr{
width: 800px;
color: #e74c3c;
}
h1{
color: red;
}
/*KODE CSS MEMBUAT GAMBAR BERBENTUK LINGKARAN*/
.lingkaran{
border-radius: 50%;
border: 5px solid red;
width: 400px;
height: 400px;
}
</style>
</head>
<body>
<div class="container">
<h1>Setelah di style sekarang berbentuk lingkaran dengan border</h1>
<img src="Cara membuat gambar berbentuk lingkaran dengan CSS.jpg" class="lingkaran">
</div>
</body>
</html>Jika teman-teman lihat di atas saya menambahkan border: 5px solid red; yang artinya tebal 5px bergais merah, dan hasilnya sebagai berikut:
dan sekarang border berwarna merah mengikuti gambar tersebut, bagaimana teman-teman sangan menarik ya, dan saya kira cukup sekian untuk belajar hari ini yaitu cara membuat gambar berbentuk lingkaran dengan css, semoga artikel ini bermanfaat dan sampai jumpa lagi di artikel selanjutnya, terimakasih.
The post Cara Membuat Gambar Berbentuk Lingkaran Dengan CSS appeared first on Kursus Website Terbaik.