Jumat, 02 Juli 2010

Rounded Corner (Sudut melengkung)

| Jumat, 02 Juli 2010 | 14 komentar
Selamat membaca artikel diblog ini semoga bermanfaat :)

Apakah anda sering menemui blog yang kelihatan melengkung seperti blog ini?
Itu namanya Rounded Corner
Sebagai contoh:











Berikut cara membuatnya:

  1. Tentukan bagian yang akan anda ubah menjadi melengkung
  2. Misalnya bagian post maka cari kode cssnya
  3. Edit seperti berikut:
Full rounded corner :
.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px; }
Rounded corner di atas :
.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
-webkit-border-radius-topleft: 10px;
-webkit-border-radius-topright: 10px;
-khtml-border-radius-topleft: 10px;
-khtml-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px; }
Rounded corner di kiri atas :
.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
-moz-border-radius-topleft: 10px;
-webkit-border-radius-topleft: 10px;
-khtml-border-radius-topleft: 10px;
border-top-left-radius: 10px; }
Rounded corner di bawah :
.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
-moz-border-radius-bottomleft: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-radius-bottomleft: 10px;
-webkit-border-radius-bottomright: 10px;
-khtml-border-radius-bottomleft: 10px;
-khtml-border-radius-bottomright: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px; }

Catatan:
  1. Kode warna merah adalah Kode yang harus ditambahkan
  2. Kode -moz-border-radius digunakan untuk FF, -webkit-border-radius untuk Chrome dan Safari, -khtml-border-radius untuk browser-browser lama yang mendukung kode ini, serta border-bottom-left untuk pengecekan terhadap browser-browser baru yang mungkin mendukung kode ini.
Referensi:http://optimasi-blog.blogspot.com/
Ditulis : Sendiri

    14 komentar :

    Lutfi Setiyawan mengatakan...

    ini kan border radius . . .
    hhehehehe , sama aja deh, tapi good job broo . . . . :D

    MODIFIKASI XP mengatakan...

    wa keren bisa melengkung melengkung hehehe

    Prian Jaya mengatakan...

    Baru tau tuhh...
    coba akkkhh..

    Unknown mengatakan...

    Kayak Border Radius kan nih ?? Okelah ^^

    GIeterror mengatakan...

    tutor yang menarik mas. thank's ya............

    bankmoel.com mengatakan...

    wow... ilmulagi nich..
    ntar bisa buat blogku yang templatenya sudut melengkung..mantap sob

    Akhyar's Blog mengatakan...

    wah...kerenn nih...
    saya udh coba diblogku...

    KangTiar mengatakan...

    Wah,...iya Trik ini Sep,..Tapi saya sudah lama Menggunakannya ,.Tapi pasti banyak blogger yang belum mengetahui bagaimana cara membuat Sudut border melengkung., Artikel Sangat Bermanfaat ,.Seep

    Terima Kasih

    Irfansyah mengatakan...

    Mantaaap kang...! ane coba praktekin dulu yah....!

    Naruto Manga Komik Bahasa Indonesia mengatakan...

    hmm ternyata begitu

    Manchester United Tech mengatakan...

    wah keren sob makasih tipsnya..ane juga gunain round corner di komentarku...

    Imoel mengatakan...

    tips yang sangat bermanfaat sob..

    Adminjoz mengatakan...

    oh jadi gitu
    hmm bagus jadinya
    keren sob!

    Spasi | Insanitis 37 mengatakan...

    Terimakasih banyak atas tutorialnnya..mantabs gan!!! izin follow y :))

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

    Posting Komentar

     

    Blogroll

    Flagcounter

    free counters
    © Copyright 2010. K-blogger . All rights reserved | K-blogger is proudly powered by Blogger.com | Template by o-om.com - zoomtemplate.com
    Pasang Iklan Gratis Sebagai Awal Mulai Bisnis Online