Home » » Cara membuat sudut melengkung di blog

14 Cara membuat sudut melengkung di blog

Cara membuat sudut melengkung di blog
Selamat malam sobat mas uwah, sepulangnya ngaji saya kok kepikiran Cara membuat sudut melengkung di blog itu gimana ya contohnya kaya gini:


Nah setelah mondar-mandir tanya sana sini akhirnya nemu juga dan saya sudah coba n berhasil, trik Sudut melengkung  ini bisa diterapkan di sidebar, content, atau footer. cara membuatnya kita hanya membutuhkan sedikit kode yang akan ditambah kan pada CSS tamplate kita. mau tahu kode nya seperti apa? berikut ini kode yang harus ditambahkan tersebut:

Moz-border-radius => ini akan membuat segala sudut jadi melengkung, baik itu kiri atas, kiri bawah, kanan atas dan kanan bawah
Moz-border-radius-bottomright => ini membuat garis melengkung kanan bawah
Moz-border-radius-bottomleft => ini di gunakan untuk membuat garis kiri bawah melengkung
Moz-border-radius-topright => ini untuk garis melengkung kanan atas
Moz-border-radius-topleft => ini untuk garis melengkung bagian kiriatas

Nah untuk membuat sudut nya melengkung anda harus menambahkan nilai pada ujung kode tersebut, ini untuk menentukan seberapa melengkungkah sudut yang kita mau. berikut ini cara penambahannya.

-moz-border-radius:10px;

10px tersebut itu lah nilai lengkung yang akan di tambahkan. nilainya tidaklah mutlak seperti itu. anda bisa merubahnya dengan nilai yang lain. tergantung keperluan anda. setelah nilai tersebut sudah di tentukan anda tinggal memasukkannya pada kode CSS template yang ingin anda berikan sudut melengkung. disini saya akan mengambil contoh garis melengkung kiri bawah dan kanan bawah pada footer, berikut ini caranya:

#footer{
-moz-border-radius-bottomright:10px;
-moz-border-radius-bottomleft:10px;
background:#005094;
}

Kode tersebut hasil nya lebih kurang seperti gambar di atas atau pada footer blog ini. semoga artikel ini bermanfaat untuk anda semua dan jangan lupa kembali lagi untuk membaca update terupdate saya setiap hari nya ya. salam sukses.... Jika mau pake toolsnya bisa anda pakain disini
Anda suka atau merasa artikel ini bermanfaat? Jika ya, mohon kesediaannya untuk meng-klik tombol Plus One yang ada di samping ya. Terima kasih
related post :

14 Testimonial:

Taufik Nurrohman :

Tapi ada beberapa lagi yang kurang, soalnya embel-embel -moz itu hanya berfungsi untuk browser mozila firefox saja. Ada lagi yang lain seperti -webkit-border-radius untuk browser Safari (kalo nggak salah) atau border-radius saja untuk standarnya.

Mas uwah :

Wew,, kapa tulisanya dipertebal sob,, heheh!! iya btul,, mungkin sobat bisa berkreasi sndiri

Naufal Aminur Rahman :

wuihhh klo ada rounded corner nya kok jadi keren y :D

Mas uwah :

@Naufal: yups mas,, tpi tergantung peronalnua juga sih ada yg suka ada jga yg nggak,,

Tips dan Trik Blog dan Komputer :

lebih mudahnya menggunakan tools ini : CSS Border Radius Generator

Mas uwah :

@Tips dan Trik Blog: thnkyu gan ane update dah postingnya!!

Anonymous :

met kenal mas...heheh

Medicine Of Herbal :

thx buad sharingnya mas...heheheh

nature-pills :

ijin praktekin mas....hehehe

mainelyequal :

boleh z praktek tapi asal jgn jadi malpraktek...joke

Mas uwah :

@SuwandiChen13 : oke met kenal juga

Mas uwah :

@Medicine Of Herbal : oke brooo

Mas uwah :

@nature-pills : monggo .. heheheh bemner kata maas mainelyequal asal jngna mal praktek...xixixix

Lanonadio :

alhamdulilah udah saya coba dan berhasil tq ya gan

SILAHKAN KOMENTAR

Maturnuwun sampeyan sudah mampir di Blog Mas uwah, tinggalkan komentar untuk menjalin persahabatan ingat NO SPAM.

 

Copyright © 2011 Mas Uwah is proudly powered by Blogger.com | Return to top

Grab this blog to mobile version on http://trikbloggers.blogspot.com/?m=1

Mas uwah | Trik blogger | Optimasi seo