Beranda CSS Desain unik Dengan CSS3
Sabtu, Desember 19, 2009
A+ A-

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