Cara membuat Round Corner dan Shadow Border (Sudut melengkung dan Bayangan) dengan CSS3

Kini membuat round corner dan shadow border (border bulat dan bayangan) sangat mudah dengan bantuan CSS3. Tidak hanya saya akan memberikan syntax CSS nya, tapi semoga penjelasan syntax nya juga dapat membantu teman-teman lebih memahami fungsi CSS dalam membuat round corner dan shadow border, sehingga design website akan terlihat lebih cantik dan dinamis.

CSS 3 walaupun masih eksperimental, tetapi memberikan banyak fitur-fitur syntax yang memudahkan kita dalam membuat tampilan website yang dinamis, contohnya round corner dan shadow border yang akan saya coba jelaskan berikut ini.
 1. Browser support

Berikut adalah list kompatibilitas masing-masing browser dalam menangani syntax CSS untuk round corner dan shadow border.





2. Round Corner

div{
border:2px #fff solid;
border-radius:25px;
-moz-border-radius:25px;
}




3. Shadow Border

Untuk membuat Shadow Border silakan copykan skrip dibawah ini ke dalam file css.
hasil nya bisa dilihat seperti gambar dibawah ini..

contoh A: offset di kiri dan atas sebanyak 5px
#contoh_A {
-moz-box-shadow: -5px -5px #888;
-webkit-box-shadow: -5px -5px #888;
box-shadow: -5px -5px #888;
}
   
contoh B: offset di kiri dan atas dengan blur sebanyak 5px
#contoh_B {
-moz-box-shadow: -5px -5px 5px #888;
-webkit-box-shadow: -5px -5px 5px #888;
box-shadow: -5px -5px 5px #888;
}

contoh C: offset di kiri dan atas dengan spread sebanyak 5px
#contoh_C {
-moz-box-shadow: -5px -5px 0 5px #888;
-webkit-box-shadow: -5px -5px 0 5px#888;
box-shadow: -5px -5px 0 5px #888;
}

contoh D: offset di kiri dan atas dengan blur dan spread sebanyak 5px
#contoh_D {
-moz-box-shadow: -5px -5px 5px 5px #888;
-webkit-box-shadow: -5px -5px 5px 5px#888;
box-shadow: -5px -5px 5px 5px #888;
}
   
contoh E: tanpa offset tetapi dengan blur 5px
#contoh_E {
-moz-box-shadow: 0 0 5px #888;
-webkit-box-shadow: 0 0 5px#888;
box-shadow: 0 0 5px #888;
}

contoh F: tanpa offset tetapi dengan blur dan spread 5px
#contoh_F {
-moz-box-shadow: 0 0 5px 5px #888;
-webkit-box-shadow: 0 0 5px 5px#888;
box-shadow: 0 0 5px 5px #888;
}

Selamat bereksperimen dengan CSS 3!

Artikel ini di ambil dari:

http://orangorangan.com/membuat-round-corner-dan-shadow-border-dengan-css/

Posted in: CSS,pemrograman web