Cara Membuat Shapes Circle Menggunakan CSS Geometric
CSS singkatan dari Cascading Style Sheets, CSS adalah sebuah sebuah kode yang berfungsi bagi mengatur sebuah tampilan atau layout sehingga laman yang kita miliki menjadi lebih menarik. Nah di panduan kali ini kita kita akan membahas mengenai CSS yaitu Cara Merancang Shapes Circle Menggunakan CSS Geometric, bagi merancang Shapes Circle menggunakan CSS teman-teman dapat mengikiti step by step yang terdapat dibawah ini. Shapes Circle ini pun dapat kita gunakan di gambar sehingga gambar yang awal nya berbentuk kotak dapat kita bikin berbentuk bulat atau circle.
Cara Merancang Shapes Circle Menggunakan CSS Geometric, langkah pertama-tama kita akan merancang file html nya terlebih dahulu, teman-teman dapat menyimpan script yang terdapat dibawah ini dengan nama index.html
<html>
<head>
<meta charset=UTF-8>
<title>Cara Merancang Shapes Circle Menggunakan CSS Geometric</title>
<link rel=stylesheet href=style.css>
</head>
<body>
<div class=circle></div>
</body>
</html>
Setelah kita merancang file html nya berikutnya kita akan merancang file CSS bagi mengatur struktur yang terdapat di html diatas menjadi circle atau bulat, bagi file CSS nya teman-teman dapat 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%;
}Di script yang terdapat diatas kita menggunakan border-radius: 50%; bagi merancang object yang kita punya menjadi circle atau bulat, kalau secript diatas kita jalankan di browser karenanya akan terlihat hasilnya seperti dibawah ini.
Apabila kita menggunakan nya di gambar atau iframe karenanya kita lumayan memasukan class di tag yang ingin kita jadikan circle atau bulat, seperti yang terdapat di script dibawah ini
<html>
<head>
<meta charset=UTF-8>
<title>Cara Merancang 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= CSS adalah sebuah sebuah kode yang berfungsi bagi mengatur sebuah tampilan atau layout sehin Cara Merancang Shapes Circle Menggunakan CSS Geometric>
<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 lumayan gampang bukan Cara Merancang Shapes Circle Menggunakan CSS Geometric, demikianlah dulu panduan saya kali ini mengenai Cara Merancang Shapes Circle Menggunakan CSS Geometric, semoga bermanfaat.
Terimakasih.
Sumber https://kursuswebsite.org
