bermain dengan si cantik css rounded corner

 Akhir ini entah kenapa malah sering utak atik css dari pada php nya ckckckck soalnya tampilan blog saya masih kaku alias belum menjadi harapan saya dalam hal tampilan nya dikarena kan memang sedikit waktu sekali buat yang gitu gituan xixixi sutralah sekarang ini mau nulis saja tentang yang lagi saya utak atik dan saya kurang sekali dalam hal kreasi juga alias monoton hahaha dah lewat kali masa produktif nya.
 balik ke judul saya akan sedikit menjelaskan mengenai css rounded corner dan sebelum nya saya akan kilas balik dari jauh tentang saya sering melihat gambar gambar atau sudut sudut css yang tidak membentuk siku malah membentuk bulat diujung nya nah itu dia yang dinamakan css rounded corner.
 dalam penerapan css rounded corner ini ditambahkannya radius dalam setiap perintah pemanggilan batas atas bawah dan pinggir dimana radius ini sudah didukung oleh IE9+, Firefox 4+, Chrome, Safari 5+, dan Opera.
 sebelum menerapkan css nya kita harus mengenal beberapa browser yang saya sebutkan diatas dimana setiap browser tidak menampilkan css yang sesuai kita harapkan, setelah saya mengunjungi web resmi nya dari masing masing browser akhir nya saya mendapatkan beberapa fungsi untuk diterapkan di css
 untuk penerapan css agar terbaca oleh beberapa browser yang saya sebutkan diatas kita harus menambahkan fungsi seperti ini
-moz- yang hanya berjalan di browser Mozilla,  juga -webkit- untuk Safari dan -o- untuk Opera.

 mari kita mulai ber eksperimen dengan  css rounded corner

OK
untuk css nya sbb
border-top-left-radius: 33px;
border-top-right-radius: 33px;
border-bottom-left-radius: 33px;
-moz-border-radius-topleft: 33px;
-moz-border-radius-topright: 33px;
-moz-border-radius-bottomleft: 33px;
-webkit-border-top-left-radius: 33px;
-webkit-border-top-right-radius: 33px;
-webkit-border-bottom-left-radius: 33px;
penjelasan css border-top-left-radius yaitu dikiri atas kita beri radius atau garis kelengkungan sebesar 33px , border-top-right-radius juga sama kalo yang ini atas kanan . dan untuk bottom bagian batas bawah tentunya




 mari kita coba lagi eksperimen lain dan kembangkanlah sesuai kemampuan masing masing

diary alerga

css nya sbb
border-top-left-radius: 33px;
border-bottom-right-radius: 33px;
-moz-border-radius-topleft: 33px;
-moz-border-radius-bottomright: 33px;
-webkit-border-top-left-radius: 33px;
-webkit-border-bottom-right-radius: 33px;
untuk eksperimen diatas saya hanya memberikan batasan atau radius pada top-left dan bottom-right dan tuk top-right dan bottom-left saya biarkan lancip artinya saya tidak memberikan radius terhadapnya.

 bagaimana sudah terbayang dengan css rounded corner ini :d mari saya akan berikan lagi eksperimen selanjut nya




sip






disetiap siku baik di top maupun di bottom dan baik di right maupun di left saya berikan radius sebesar 90 dan hasilnya jadi bulat :d


 bagaimana sekarang sudah ada dan mempunyai gambaran untuk mengutak atik css nya dengan memasukkan  css rounded corner :d jadi silahkan bereksperimenlah

jangan berkomentar berbau SARA dan SPAM

Komentar disqus
Komentar Facebook