Desain unik Dengan CSS3

Contoh gambar di samping adalah contoh box yang sudut-sudutnya,dibuat

bulat dengan CSS 3.bagaimana cara menerapkanya di blog kita???

okeh,langsung aja saya kasih tw caranya…

but,saya selalu mengingatkan anda,selalu backup template anda

sebelum mencoba ^^

1.Copy paste css dibawah ini..

#rounded-box {

-moz-border-radius-topleft: 15px;

-moz-border-radius-topright: 0px;

-moz-border-radius-bottomright: 15px;

-moz-border-radius-bottomleft: 0px;

-webkit-border-top-left-radius: 15px;

-webkit-border-top-right-radius: 0px;

-webkit-border-bottom-left-radius: 0px;

-webkit-border-bottom-right-radius: 15px;

2.bila template anda,berdesain dengan border/kotak,maka akan lebih mudah membuatnya,tekan Ctrl+f…lalu cari kata moz
Contoh:

.post {

-moz-border-radius:6px;

-webkit-border-radius:6px;

background:$postbgcolor;

border:1px solid #C0C0C0;

margin:0 0 10px;

padding:10px;}

3.lalu ganti moz,dan webkit menjadi seperti ini:

.post {

-moz-border-radius-topleft: 15px;

-moz-border-radius-topright: 0px;

-moz-border-radius-bottomright: 15px;

-moz-border-radius-bottomleft: 0px;

-webkit-border-top-left-radius: 15px;

-webkit-border-top-right-radius: 0px;

-webkit-border-bottom-left-radius: 0px;

-webkit-border-bottom-right-radius: 15px;

background:$postbgcolor;

border:1px solid #C0C0C0;

margin:0 0 10px;

padding:10px;}

nah…yang templatenya ingin menggunakan border,dapat ditambahkan juga,di tiap posting,header,footer,sidebar,tabbar

contoh:

#main-wrapper {

    width:470px;

    background:#ffffff none repeat scroll 0 0;

    border:1px solid #000000;

    color:#000000;

    display:inline;

    float:right;

    min-height:500px;

    overflow:visible;

    padding:5px 15px 15px;

    position:relative;

    min-height:500px; }

menjadi seperti ini

#main-wrapper {

width:470px;

-moz-border-radius-topleft: 15px;

-moz-border-radius-topright: 0px;

-moz-border-radius-bottomright: 15px;

-moz-border-radius-bottomleft: 0px;

-webkit-border-top-left-radius: 15px;

-webkit-border-top-right-radius: 0px;

-webkit-border-bottom-left-radius: 0px;

-webkit-border-bottom-right-radius: 15px;

    background:#ffffff none repeat scroll 0 0;

    border:1px solid #000000;

    color:#000000;

    display:inline;

    float:right;

    min-height:500px;

    overflow:visible;

    padding:5px 15px 15px;

    position:relative;

    min-height:500px; }

note:besar kecilnya border/sudut bulat,dapat anda atur ,sesuai denga keinginan anda!!

Selamat mencoba!!!!

Contoh blog yang menggunakan css3

Http://www.akbhome.co.cc