CSS singkatan dari Cascading Style Sheets, CSS merupakan sebuah kode yang berfungsi untuk mengatur sebuah tampilan atau layout sehingga website yang kita miliki menjadi lebih menarik. Nah pada tutorial kali ini kita kita akan membahas mengenai CSS yaitu Cara Membuat Shapes Circle Menggunakan CSS Geometric, untuk membuat Shapes Circle menggunakan CSS teman-teman bisa mengikiti step by step yang terdapat dibawah ini. Shapes Circle ini juga bisa kita gunakan pada gambar sehingga gambar yang awal nya berbentuk kotak bisa kita buat berbentuk bulat atau circle.
Cara Membuat Shapes Circle Menggunakan CSS Geometric, langkah pertama kita akan membuat file html nya terlebih dahulu, teman-teman bisa menyimpan script yang terdapat dibawah ini dengan nama index.html
<html> <head> <meta charset="UTF-8"> <title>Cara Membuat Shapes Circle Menggunakan CSS Geometric</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="circle"></div> </body> </html>
Setelah kita membuat file html nya selanjutnya kita akan membuat file CSS untuk mengatur struktur yang terdapat pada html diatas menjadi circle atau bulat, untuk file CSS nya teman-teman bisa menyimpan script yang terdapat dibawah ini dengan nama style.css
.circle {
width: 200px;
height: 200px;
background: #2EE713;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}
Pada script yang terdapat diatas kita menggunakan border-radius: 50%; untuk membuat object yang kita punya menjadi circle atau bulat, jika secript diatas kita jalankan pada browser maka akan terlihat hasilnya seperti dibawah ini.
Jika kita menggunakan nya pada gambar atau iframe maka kita cukup memasukan class pada tag yang ingin kita jadikan circle atau bulat, seperti yang terdapat pada script dibawah ini
<html>
<head>
<meta charset="UTF-8">
<title>Cara Membuat Shapes Circle Menggunakan CSS Geometric</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="circle"></div> <br>
<img class="circle" src="nama_gambar.png" alt="">
<iframe class="circle" src="https://www.youtube.com/embed/ioVj9C_G4Bs" frameborder="0" allowfullscreen></iframe>
</body>
</html>
Silahkan klik demo disini.
Bagai nama teman-teman cukup mudah bukan Cara Membuat Shapes Circle Menggunakan CSS Geometric, sekian dulu tutorial saya kali ini tentang Cara Membuat Shapes Circle Menggunakan CSS Geometric, semoga bermanfaat.
Terimakasih.