NEWS
Loading...
  • Posted by : Johanes Djogan 19 Des 2009

    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

    { 2 comments... read them below or Comment }

    "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"

  • Translate

    Thank you for choosing Blogger Template from Blog Johanes! (*≧∇≦*)

    - Copyright ©DJogzs 2009-2013 - Some Right Reserve. - DJogzs - Powered by Blogger - Designed by Johanes Djogan -