Select Language



Followers

IT Programmer. Powered by Blogger.

27 September 2012

Membuat Rounded Corner Dengan CSS3

"OM Swastyastu"

Setelah sekian lama akhirnya malam ini sempat posting juga. Lama tidak posting di blog rasanya ada yang kurang. :D Kebetulan sebelumnya blog ini ada masalah di tampilan rounded corner jika di buka dengan mozilla firefox. Mungkin ada beberapa dari kalian sadar kalau sebelum ini tampilan rounded corner tidak jalan dan tampilannya pun jadi standar alias tidak ada roundednya. Jadi kali ini saya akan posting cara membuat Rounded Corner dengan CSS3.

Border Radius Rounded Corner memudahkan para web programmer memanfaatkan sudut bulat (Round Corner) di desain mereka. Kalau dulunya saya sering membuat desain yang rounded corner menggunakan gambar yang di edit di photoshop tapi saat ini sudah tidak :D. Sejak pertama kali muncul pada tahun 2005 CSS rounded Corner sudah bisa digunakan
di hampir semua browser walau masih ada bedanya dari tiap browser. Ok, langsung saja kita ke contoh-contoh rounded corner..

implementasinya sangat sederhana:
#contoh {
border-radius: 20px;
} 
namun agar bisa jalan di brwoser firefox kalian perlu menambahkan prefix -moz-
#contoh {
-moz-border-radius: 20px;
border-radius: 20px;
} 
Box ini menggunakan Rounded Corner yang jalan di Firefox, Safari/Chrome, Opera and IE9.

Rounded Corner juga dapat dibuat dengan 4 batasan sudut (border-bottom-left-radius, border-bottom-right-radius, border-top-left-radius, border-top-right-radius) dan jika agar ke empat sudut rounded menggunakan border-radius saja.

contoh syntax-nya:
border-*-*-radius: [ <panjang> | <px> ] [ <panjang> | <px> ]; 
contoh implementasinya:
border-top-left-radius: 15px 5px;
border-top-right-radius: 20px;
border-bottom-right-radius: 10px 5px;
border-top-right-radius: 50 100px;
keempat rounded di atas akan mengahasilkan sudut bulat berbeda dari tiap sudutnya.

Dari berbagai artikel yang saya baca, untuk firefox versi 3.5 ke atas saat ini mengikuti spesifikasi W3C.
Mozilla ImplementationW3C Specification

-moz-border-radius

border-radius
-moz-border-radius-topleft border-top-left-radius
-moz-border-radius-topright border-top-right-radius
-moz-border-radius-bottomright border-bottom-right-radius
-moz-border-radius-bottomleft border-bottom-left-radius
Karena dulu saya hanya menggunakan prefix -moz- jadinya tampilan blog ini sempat menjadi standar(tanpa raounded). tapi saat ini sudah saya tambahkan border-radius sehingga tampilan Blog IT Programmer bisa seperti semula.

Rounded Corner ini juga bisa di tambahkan box shadow agar tampilan web lebih menarik. Sekian dulu dari saya sampai jumpa di postingan berikutnya. Selamat belajar :)

"OM Santhi, Santhi, Santhi OM"



Comments:

Ada 2 comments pada “Membuat Rounded Corner Dengan CSS3”
Rudy Hartono said...
pada hari 

nice sahre sob, kunjungan malam

markjoseph gabane said...
pada hari 

do you have english translation or character,so that I can understand it says

Social Media


Facebook Page

Programming Tutorial


Info


Tips
Downloads
Friends
 
This Blog is proudly powered by Blogger.com | Template by Bali Web Development | Privacy Policy | Rise Up!!