20/12/11

Code Tutorial | CSS Border-radius



code border-radius ni adalah untuk efek rounded corner.. penulisan code ni boleh dibaca oleh web browser mozila firepox dan gogel chrome...

sebelum ni aku cuma tau buat rounded corner untuk 4 penjuru sahaja tapi baru tadi aku jumpa cara buat rounded corner yang anda boleh setkan penjuru mana anda hendak bulatkan...

Tutorial code ni bukan sahaja untuk mereka yang hendak belajar code ia juga merupakan rujukkan aku sendiri.. almaklum la.. aku ni pelupa sikit...

disini aku berikan contoh dan live demo jadi kalau tidak faham.. jangan segan mau tanya

rounded corner yang sama pada setiap penjuru



border-radius:15px;
perhatikan setiap bucu kotak ni.. semuanya sama ja




border-radius:15px 60px;
yang ni pula bersilang.. yang terlebih bulat tu 60px dan yang kurang bulat tu 15px




border-radius:15px 60px 0px;
yang ni pula bersilang.. yang terlebih bulat tu 60px dan yang kurang bulat tu 15px manakala yang langsung tidak bulat tu 0px




border-radius:33px 33px 0px 0px;
berdasar code css,live demo kotak ni serta 3 peneranga di atas... rasanya tidak perlu la aku buat penerangan kan.. hehehe hahaha huhuhuhu lalalala ...


code css ni lebih efisyen dari -moz-border-radius.. sebab code -moz-border-radius tu efek dia tidak menjadik pada googel cherome

Faham atau tidak .. ...................................... BOLOS SAJA DINDING ITU ............

Sekian

4 ulasan:

Cik Kay Jue berkata...

coding ni ni nak ltk kat ne?

Polskahackrew berkata...

@Cik Kay Jue
terpulang dari awak nak letak kat mana.. biasanya diletakkan pada background berwarna atau berborder.. macam dalam contoh di atas.. kalau saya tidak setkan warna background mmg x boleh nampak efek tu..

kalau x ada warna background tapi ada border yang berwarna.. efek tu nampak jugak..

contoh penggunaan coding tu dalam template blogspot..

sebelum

#main-wrapper{background:#ff3366;}



selepas

#main-wrapper{background:#ff3366;border-radius:15px;}


macam tu.. ('',)

Cik Kay Jue berkata...

owh.. ok thnks..

Polskahackrew berkata...

@Cik Kay Jueur welcome.. ('',)

entri ja

Related Posts Plugin for WordPress, Blogger...