Membuat Gambar Menjadi Lingkaran Dengan CSS

SUBMITTED BY: tommy96

DATE: May 25, 2016, 10:41 p.m.

FORMAT: Text only

SIZE: 3.8 kB

Raw Download

HITS: 2282

Report
  1. Membuat Gambar Menjadi Lingkaran Dengan CSS
  9. السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ
  15. Berjumpa lagi dengan saya selaku admin codingpintar.blogspot.com . .
  16. masih semangat kan untuk belajar coding nya heheh ^_^
  21. 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
  22. 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.
  23. Pada tutorial kali ini kita membutuhkan 3 buah file yaitu.
  24. 1. index.html
  25. 2. style.css
  26. 3. gambar
  27. letakan ke 3 file tersebut dalam satu folder
  30. Membuat Gambar Menjadi Lingkaran Dengan CSS
  32. jika semua bahan sudah di persiapkan langsung saja ikuti tutorial Cara Membuat Gambar Menjadi Lingkaran Dengan CSS dengan baik dan benar..
  34. 1. Membuat File HTML
  35. 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 :
  37. HTML<!DOCTYPE html>
  38. <head>
  39. <title>Tutorial CSS</title>
  40. <link rel="stylesheet" type="text/css" href="style.css">
  41. </head>
  42. <body>
  43. <header>Tutorial CSS</header>
  44. <div id="menu">
  45. <ul>
  46. <li><a href="http://codingpintar.blogspot.com">Membuat Gambar Menjadi Lingkaran</a></li>
  47. </ul>
  48. </div>
  49. <section id="tampil">
  51. <img src="koala.jpg">
  52. <h1 align="center">KOALA</h1>
  54. </section>
  55. <footer>&copy; Belajar Coding</footer>
  56. </body>
  57. </html> Double click to selection
  59. 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
  62. 2. Membuat File CSS
  63. 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 :
  65. CSSbody {
  66. font-family: Arial, Helvetica, sans-serif;
  67. margin: 0;
  68. color: #333333;
  69. }
  71. header {
  72. background: #4FC1E9;
  73. text-align:center;
  74. line-height: 70px;
  75. font-size: 3em;
  76. color: #ffffff;
  77. }
  80. #menu{
  81. background: #5D9CEC;
  82. }
  83. #menu ul{
  84. list-style: none;
  85. margin: 0;
  86. padding: 0px;
  87. text-align: center;
  88. }
  89. #menu ul li{
  90. display: inline-table;
  91. }
  92. #menu ul li a{
  93. color: #fff;
  94. display: block;
  95. text-decoration: none;
  96. line-height: 40px;
  97. padding: 0 10px;
  98. }
  99. #menu ul li:hover{
  100. background-color:#4A89DC;
  101. }
  103. #tampil {
  104. border: 1px solid #999999;
  105. margin: 15px;
  106. padding:15px;
  107. }
  109. footer {
  110. line-height:40px;
  111. background: #4FC1E9;
  112. color: white;
  113. text-align:center;
  114. font-size: 0.8em;
  115. }
  117. .controls {
  118. padding:15px;
  119. }
  121. img {
  122. width: 300px;
  123. margin: auto;
  124. padding-left: 500px;
  125. padding-right: 500px;
  126. border-radius: 100%;
  128. } Double click to selection
  130. 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
  133. Membuat Gambar Menjadi Lingkaran Dengan CSS
  136. Demikianlah Cara Membuat Gambar Menjadi Lingkaran Dengan CSS, keren bukan ? :D
  137. Silahkan anda coba dan anda kreasikan sesuka hati anda.
  138. Baiklah mungkin itu saja yang dapat saya sampaikan kurang lebihnya mohon maaf :D Semoga apa yang saya sampaikan disini dapat bermanfaat bagi anda semua.
comments powered by Disqus