adsense link 728px X 15px

Tuesday, June 1, 2010, 

Membuat rounded corner (sudut melengkung)Seperti apa yang pernah saya bahas pada postingan saya tentang cara memilih template blog, saya pernah menjelaskan bahwa memanipulasi tampilan Rounded corner dengan CSS lebih baik daripada menggunakan image/gambar. Meskipun antara CSS dan image memiliki kelebihan tersendiri. Setidaknya jika anda menggunakan CSS maka akan sedikit lebih cepat dibanding image. Contoh dalam membuat rounded corner bisa anda lihat di bawah ini.


Perhatikan sudut kolom ini.

     Kolom di atas di bentuk dari kode ini.

<div style="width:250px;
-moz-border-radius-topleft:15px; -moz-border-radius-topright:15px; -moz-border-radius-bottomleft:15px; -moz-border-radius-bottomright:15px; -webkit-border-top-left-radius:15px;
-webkit-border-top-right-radius:15px;
-webkit-border-bottom-left-radius:15px;
-webkit-border-bottom-right-radius:15px;
margin:0; padding:10px; background:#eee; border:1px solid #ccc; height:75px;"> ISI CONTENT </div>

Keterangan:
  • Kode yang berwarna merah ialah kode yang harus ditambahkan


  • Ukuran 15px merupakan ukuran border yang ingin di buat melengkung. Lihat gambar di bawah ini.

    Membuat rounded corner (sudut melengkung)



  •      Berikut ini contoh penerapan rounded corner pada navigasi/menu blog.

    /*-- Misalkan kode navigasi/menu anda seperti ini --*/
    #Nav {
    width: 900px;
    -moz-border-radius-topleft:15px;
    -moz-border-radius-topright:15px;
    -moz-border-radius-bottomleft:15px;
    -moz-border-radius-bottomright:15px;
    -webkit-border-top-left-radius:15px;
    -webkit-border-top-right-radius:15px;
    -webkit-border-bottom-left-radius:15px;
    -webkit-border-bottom-right-radius:15px;

    height: 34px;
    margin: 0px auto;
    position:relative;
    top: 14px;
    text-align: center;
    line-height: normal;
    }

         Untuk lebih jelasnya, silakan anda baca DI SINI. Semoga bermanfaat...







    20 Comments:

    Rock said...  on  June 1, 2010 at 4:36 PM

    Wahhh... keren nich...
    Aku simpan dulu sob...

    ph-internet said...  on  June 1, 2010 at 5:32 PM

    wah sobat pasti jago dreamweaver nya

    hendro-prayitno said...  on  June 1, 2010 at 5:33 PM

    ini memang harus di save,,baru aku liat tutorialnya

    Regi_Adi said...  on  June 1, 2010 at 6:19 PM

    mantap nih, jadi melengkung bordernya...keren Mas tutorialnya

    ph-internet said...  on  June 1, 2010 at 7:39 PM

    untuk virus yang menghilangkan mp3 biasanya penyusupannya di cmd atau comandprompt bisa jadi dari file mp3 itu sendiri..saya sudah banyak up load anti virus sabar ya sob nanti juga beredar dan cara buat virusnya nanti juga ada sekarang lagi fokus assembly..biasa lagi ngumpulin point sob...
    terima kasih sudah mampir,,aku sebenarnya sudah follow blog ini

    imtikhan said...  on  June 1, 2010 at 7:45 PM

    berkunjung mencari info terbaru
    terima kasih

    Sungai Awan said...  on  June 1, 2010 at 8:01 PM

    Sip.
    Save dulu ya

    Masda said...  on  June 1, 2010 at 8:19 PM

    @Rock, hehe,,, selalu terdepan mas, kaya jupiter,wkwkwk
    @Ph-Pnternet, g juga mas, saya cuman seneng aja otak-atik template. iya mas ditunggu updatenya.
    @Hendro-Prayitno, silakan mas,,,
    @Regi_Adi, makasih mas...
    @Imtikhan, sama-sama mas...
    @Tomo, wah cepet banget nyampe sini, saya aja baru pulang dari rumah mas...

    secangkir teh dan sekerat roti said...  on  June 1, 2010 at 8:31 PM

    harus saya kopi nih, buat bikin template baru :)

    Bengkel Sehat said...  on  June 1, 2010 at 10:36 PM

    Good info n triknya..kayak jalanan,bisa nikung ^_^...
    Lam Kenal Sahabat..

    hendarblog said...  on  June 2, 2010 at 2:06 AM

    Kunjungan balik mas,tengkyu postingnya

    admin said...  on  June 2, 2010 at 2:33 AM

    Wah sipp mas,kebetulan aku mau edit menu nav ku biar kayak blog yg Ini

    Masda said...  on  June 2, 2010 at 3:11 AM

    @Secara teh dan sekerat roti, silakan dicopy mas,,,
    @Blog Sehat, sama-sama mas, salam kenal balik,,,
    @Hendarblog, sama-sama mas, makasih juga kunjungan baliknya...
    @Mansuka, selamat mencoba aja mas...hehe...

    Om Rame said...  on  June 2, 2010 at 6:29 AM

    bagi saya sangat-sangat bermanfaat sekaLi sob untuk kaLi ini, kebetuLan saya sedang terkendaLa dengan haL tersebut.
    -----------------
    o ya, kaLo Link/banner bLog ini beLum terpasang di bLog saya, mohon di ingatkan. karena terLaLu banyaknya saya tidak bisa nge-cek satu-persatu, juga bermanfat bagi saya untuk sering-sering mampir ke bLog ini. terima kasih sob.
    ------------
    kaLo Lagi upacara jangan suka ngumpet Lagi yah. hehehehe.....

    om_rame said...  on  June 3, 2010 at 6:08 AM

    kunjung kembaLi untuk membaca tuLisan Lainnya yang dapat bermanfaat bagi saya sebagai orang awam di bidang teknoLogi. saLam persahabatan, seLamat istirahat.

    Gudang Ilmu said...  on  June 3, 2010 at 7:51 AM

    tapi aneh kalau di template blog saya nie kalau di buat radius 15 jadi acak acakan kalau 10 ke bawah masih bagus....

    Refline said...  on  June 3, 2010 at 5:54 PM

    nice info bung. . . Comment balik ya. . .thx

    Masda said...  on  June 3, 2010 at 8:22 PM

    @Om_rame, alhamdulillah udah dapet obatnya, :D, sekarang kan udah g skulah om, saya juga orang awam kog om masalah beginian, cuma sekedar ngerti aja,,,
    @Gudang Ilmu, iya mas diganti aja, kalo kode di ataskan cuman buat contoh biar jelas aja lengkungnya...
    @Arie, siaaap, segera ke TKP

    ami mizuno said...  on  July 6, 2010 at 5:00 PM

    kunjungan balik bro... trims yah infonya. sekarang tinggal nyobain nih border yang pojoknya melengkung hehehehe :D

    Opa Soal said...  on  June 30, 2011 at 2:32 PM

    Gan, kalo bikin pake image tau caranya g? soalnya klo CSS3 g cross browser, IE terbaru aja msh lambat banget jadinya, padahal cuma scrolldown doang..

    :)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

    Post a Comment

     

    It's Me

    My Photo
    Masda
    Seorang blogger "KOTA GADIS" yang selalu penasaran dengan sesuatu hal yang baru. Belajar, belajar, dan terus belajar serta berusaha untuk menerapkannya. Karena menurut saya "Ilmu itu untuk diterapkan bukan untuk dipelajari".

    Facebook Twitter
    View my complete profile

    Exchange Link

    MasdaZine

    Followers