Desain unik Dengan CSS3

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

Komentar

Posting Komentar

"Maaf komentar anda tidak akan dibalas, karena blog ini sudah tidak aktif. Terima kasih"

"Sorry your comment will not be replied, because this blog has been inactive. Thank you"

Postingan populer dari blog ini

K-ON!! Blogger Template

Shiroi Blogger Template

Unbreakable Machine Doll Blogger template