web design,

Membuat Circle Image dengan CSS3

Hangga Aji Sayekti Hangga Aji Sayekti Follow Feb 24, 2013 · 1 min read
Membuat Circle Image dengan CSS3
Share this

</head><body><div class="circular"></div>1. Langkah pertama, sisipkan style seperti contoh berikut ini :

<pre class="brush:css">.circular {  margin:auto;  
width: 199px;  
height: 199px;  
border-radius: 150px;  
-webkit-border-radius: 150px;  
-moz-border-radius: 150px;  
box-shadow: 5px 5px 10px #000000; 
background: url(http://hangga.github.io/blog/wp-content/uploads/2014/02/101120123227.png) no-repeat; }

Dalam contoh diatas, saya membuat kelas bernama circular.
Kemudian, pilih baground Image Anda, misalnya : background: url(http://hangga.github.io/blog/wp-content/uploads/2014/02/101120123227.png.

2. Buat area div dengan nama kelas circular (sesuai dg nama kelas yg anda buat si style)

<pre class="brush:css"><div class="circular"></div>
Hangga Aji Sayekti
Written by Hangga Aji Sayekti
A passionate Software Engineer from Indonesia with experience since 2008. Bachelor's degree in Mathematics and loves Science and Computers.