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
mari kita mulai ber eksperimen dengan css rounded corner
OK
untuk css nya sbb
mari kita coba lagi eksperimen lain dan kembangkanlah sesuai kemampuan masing masing
diary alerga
css nya sbb
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
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
border-top-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
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;
mari kita coba lagi eksperimen lain dan kembangkanlah sesuai kemampuan masing masing
css nya sbb
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.border-top-left-radius:
33px
;
border-bottom-right-radius: 33
px
;
-moz-border-radius-topleft:
33px
;
-moz-border-radius-bottomright:
33px
;
-webkit-border-top-left-radius:
33px
;
-webkit-border-bottom-right-radius:
33px
;
bagaimana sudah terbayang dengan css rounded corner ini :d mari saya akan berikan lagi eksperimen selanjut nya
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