Membuat Gambar Menjadi Lingkaran Dengan CSS

السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ

Berjumpa lagi dengan saya selaku admin codingpintar.blogspot.com . .
masih semangat kan untuk belajar coding nya heheh ^_^

Sebelumnya saya mau minta maaf karena saya sudah jarang menulis di blog ini, di karenakan saya sibuk di dunia nyata :D, Tapi saya bersyukur masih di beri kesehatan dan kesempatan untuk menulis lagi di blog ini :D
pada kesempatan kali ini saya masih membahas css namun pada kaesempatan kali ini saya tidak membuat animasi maupun karakter. Di sini saya hanya mencoba membuat tutorial yang sangat sederhana yaitu Membuat Gambar Menjadi Lingkaran tutorial kali ini memang sangat sederhana namun karna masih banyak yang belum tau makanya saya share di blog ini.
Pada tutorial kali ini kita membutuhkan 3 buah file yaitu.
1. index.html
2. style.css
3. gambar
letakan ke 3 file tersebut dalam satu folder

jika semua bahan sudah di persiapkan langsung saja ikuti tutorial Cara Membuat Gambar Menjadi Lingkaran Dengan CSS dengan baik dan benar..

1. Membuat File HTML
file html memang sangat penting untuk membuat aplikasi berbasis web, jadi silahkan anda buat file html bernama index.html, lalu ketikkan script di bawah ini :

<!DOCTYPE html>
<head>   
    <title>Tutorial CSS</title>
    <link rel="stylesheet" type="text/css" href="style.css">             
</head>
<body>
 <header>Tutorial CSS</header>
  <div id="menu">
   <ul>
    <li><a href="http://codingpintar.blogspot.com">Membuat Gambar Menjadi Lingkaran</a></li>
   </ul>
  </div>
<section id="tampil">
 
<img src="koala.jpg">
<h1 align="center">KOALA</h1>

</section>
 <footer>&copy; Belajar Coding</footer>
</body>
</html>

Cukup simple kan file HTML nya :D Seperti biasanya sebelum membuat stylenya silahkan anda coba dulu membuka file htmlnya, ya benar hasilnya masih berantakan oleh karna itu silahkan ikuti langkah selanjutnya untuk menambahkan stylenya

2. Membuat File CSS
file css memang sangat penting untuk membuat hal yang menarik di website, ya karena tanpa file css kita tidak akan bisa membuat tampilan web menjadi menarik. silahkan anda buat file bernama style.css setelah itu ketikkan script di bawah ini :

body {
 font-family: Arial, Helvetica, sans-serif;
 margin: 0;
 color: #333333;
}

header {
 background: #4FC1E9;
 text-align:center;
 line-height: 70px; 
 font-size: 3em;
 color: #ffffff;
}


#menu{
 background: #5D9CEC;
}
#menu ul{
 list-style: none;
 margin: 0;
 padding: 0px;
 text-align: center;
}
#menu ul li{
 display: inline-table;
}
#menu ul li a{
 color: #fff;
 display: block;
 text-decoration: none;
 line-height: 40px;
 padding: 0 10px;
}
#menu ul li:hover{
 background-color:#4A89DC;
}

#tampil {
 border: 1px solid #999999;
 margin: 15px;
 padding:15px;
}

footer {
 line-height:40px;
 background: #4FC1E9;
 color: white;
 text-align:center;
 font-size: 0.8em;
}

.controls {
    padding:15px;
}

img {
 width: 300px;
 margin: auto;
 padding-left: 500px;
 padding-right: 500px;
 border-radius: 100%;

}

Lihat scriptnya lebih simple dari tutorial sebelumnya kan . :D jika sudah selesai silahkan anda simpan file cssnya lalu cobalah jalankan file index.html nya, maka akan menghasilkan gambar seperti ini

Demikianlah Cara Membuat Gambar Menjadi Lingkaran Dengan CSS, keren bukan ? :D
Silahkan anda coba dan anda kreasikan sesuka hati anda.
Baiklah mungkin itu saja yang dapat saya sampaikan kurang lebihnya mohon maaf :D Semoga apa yang saya sampaikan disini dapat bermanfaat bagi anda semua.