Jumat, Mei 14, 2010

Modifikasi Header Blog Dengan CSS3





setelah beberapa lama menjelajah berbagai macam blog ahirnya ketemu juga, bagai mana
cara agar header blogkita bergaya rounder tampa menggukan image yang bergaya rounder separti blog saya ini hehe......

langsung aja baca tutorialnya di bawah ini:

W3C telah menawarkan beberapa opsi baru untuk perbatasan di CSS3, yang satu adalah border-radius . Kedua Mozila / Firefox dan Safari 3 telah mengimplementasikan fungsi ini, yang memungkinkan Anda untuk membuat sudut bulat pada kotak-item. Ini adalah suatu contoh.

Mozilla / Firefox dan Safari 3 pengguna harus melihat kotak baik yang bulat, dengan perbatasan baik bulat.

Contoh di atas sebenarnya sangat sederhana:

 

-moz-border-radius: 5px; -Moz-border-radius: 5px;
-webkit-border-radius: 5px; -WebKit-perbatasan-radius: 5px;
border: 1px solid #000; border: 1px solid # 000;
padding: 10px;" > padding: 10px; ">

Ini sudut yang berbeda juga dapat masing-masing ditangani sendiri, Mozilla memiliki beberapa nama lain untuk fitur daripada spec mengatakan harus ada walaupun, seperti yang telah fi -moz-border-radius-topright sebagai lawan -webkit-border-top-right-radius :

Mozilla / Firefox dan Safari 3 pengguna akan melihat sebuah kotak dengan pojok kiri atas bulat.
Mozilla / Firefox dan Safari 3 pengguna akan melihat sebuah kotak dengan sudut kanan atas bulat.
Mozilla/Firefox and Safari 3 users should see a box with a rounded left lower corner. Mozilla / Firefox dan Safari 3 pengguna akan melihat kotak dengan bulat sudut kiri bawah.
Mozilla / Firefox, dan Safari 3 pengguna akan melihat sebuah kotak dengan pojok kanan bawah bulat.

Di atas ada beberapa contoh:

dan di bawah ini adalah code CSS3 untuk Contoh di atas :

-moz-border-radius-topleft / -webkit-border-top-left-radius
-moz-border-radius-topright / -webkit-border-top-right-radius
-moz-border-radius-bottomleft / -webkit-border-bottom-left-radius
-moz-border-radius-bottomright / -webkit-border-bottom-right-radius


so.......... Jadi bagaimana caranya ????

Lihat dintoh Di bawah ini :

/* Header
=======================================
*/
#header-wrapper{
width:960px;
height:150px;
margin:0;
padding:0;
text-align:left;
background:#50504f;
border-top:6px solid #222
}

Agar heder menjadi rounder maka tinggal tambahkan code:

-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;

Contoh:

#header-wrapper{
width:960px;
height:150px;
margin:0;
padding:0;
text-align:left;
background:#50504f;
border-top:6px solid #222
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
}

keterangan: 10px adalah radius roundernya, semakin tinggi PX maka akan semakin rounder.

Sebaiknya gunakan Mozilla FireFox v3.6 Karena Trik ini menggunakan CSS3

Modifikasi Header Blog Dengan CSS3 Rating: 4.5 Diposkan Oleh: Edi Z

10 comments:

  1. tp sayangnya Rounded corner hanya support browsr mozilla

    BalasHapus
  2. Wah bagus nih sob......

    Salam kenal.........n sukses selalu....

    Oh ya anda sudah saya folow...follow balik ya??hehe......

    BalasHapus
  3. wah.. mantab nih.
    tapi postingannya harus di koreksi.

    blogkita bergaya rounder tampa menggukan

    BalasHapus
  4. @ Rizky2009: OPERA 10 DAN GOOGLE CHROME 4 JUGA SUPORT SOB BEGITU JUGA DENGAN SFARI 4.
    @ wowewuck : MAKASIH SOB
    @ Eko Priyanto: THANKS
    @ Najibblog2010: OK
    @ danuakbar.com: IYA SOB, MUNGKIN PENYAJELASAN SAYA KURANG BISA BEGITU DI PAHAMI OLEH BLOG PEMULA HEHE....
    MAKLUM SOB SAYA JUGA BLOG PEMULA.
    OCE NTAR SYA KOREKSI SOB

    BalasHapus
  5. Lok software buat bikin css gtu ada nggak sich??

    BalasHapus
  6. @ agues: Maksudnya Gimana Bro ?
    klow CSS generator Mah Ada.

    BalasHapus
  7. rounded corner seperti di blog ini ya gan

    BalasHapus