CSS EFEK KERTAS LIPAT / PAGE FOLD

CSS EFEK KERTAS LIPAT / PAGE FOLD

CSS EFEK KERTAS LIPAT / PAGE FOLD – Bagaimana cara membuat efek kertas lipat di pojok tampilan div? Ada banyak cara untuk membuat tampilan blog menjadi lebih unik dan menarik salah satu contohnya dengan efek kertas lipat ini. Para pengunjung yang pertama melihatnya pasti langsung akan terkesan seperti jatuh cinta pada pandangan pertama.

css efek kertas lipat

TUTORIAL CARA MEMBUAT EFEK KERTAS LIPAT
Berikut ini kode css yang perlu dipasang

.note {
   position:relative;
   width:30%;
   padding:1em 1.5em;
   margin:2em auto;
   color:#fff;
   background:#97C02F;
   overflow:hidden;
}
.note:before {
   content:"";
   position:absolute;
   top:0;
   right:0;
   border-width:0 16px 16px 0;
   border-style:solid;
   border-color:#fff #fff #658E15 #658E15;
   background:#658E15;
   -webkit-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
   -moz-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
   box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
   display:block; width:0; /* Firefox 3.0 damage limitation */
}
.note.rounded {
   -webkit-border-radius:5px 0 5px 5px;
   -moz-border-radius:5px 0 5px 5px;
   border-radius:5px 0 5px 5px;
}
.note.rounded:before {
   border-width:8px;
   border-color:#fff #fff transparent transparent;
   -webkit-border-bottom-left-radius:5px;
   -moz-border-radius:0 0 0 5px;
   border-radius:0 0 0 5px;
}

 Cara menggunakannya menggunakan tag html

<div class='note'>
     ISI
</div>
<div class='note rounded'>
     ISI
</div>

Atau kamu langsung bisa mengganti kode css note sesuai dengan class template blogger terpasang di blog misalkan saja .sidebar atau #sidebar . replace semua kode note dengan .sidebar atau #sidebar

Untuk variasi warna yang berwarna warni kamu bisa menggunakan kode css

.note {
    position:relative;
    width:480px;
    padding:1em 1.5em;
    margin:2em auto;
    color:#fff;
    background:#97C02F;
    overflow:hidden;
}
.note:before {
    content:"";
    position:absolute;
    top:0;
    right:0;
    border-width:0 16px 16px 0; /* This trick side-steps a webkit bug */
    border-style:solid;
    border-color:#fff #fff #658E15 #658E15; /* A bit more verbose to work with .rounded too */
    background:#658E15; /* For when also applying a border-radius */
    display:block; width:0; /* Only for Firefox 3.0 damage limitation */
    /* Optional: shadow */
    -webkit-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
       -moz-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
            box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
}
.note.red {background:#C93213;}
.note.red:before {border-color:#fff #fff #97010A #97010A; background:#97010A;}
.note.blue {background:#53A3B4;}
.note.blue:before {border-color:#fff #fff transparent transparent; background:transparent;}
.note.taupe {background:#999868;}
.note.taupe:before {border-color:#fff #fff #BDBB8B #BDBB8B; background:#BDBB8B;}

.note.rounded {
    -webkit-border-radius:5px 0 5px 5px;
    -moz-border-radius:5px 0 5px 5px;
    border-radius:5px 0 5px 5px;
}
.note.rounded:before {
    border-width:8px; /* Triggers a 1px 'step' along the diagonal in Safari 5 (and Chrome 10) */
    border-color:#fff #fff transparent transparent; /* Avoids the 1px 'step' in webkit. Background colour shows through */
    -webkit-border-bottom-left-radius:5px;
    -moz-border-radius:0 0 0 5px;
    border-radius:0 0 0 5px;
}

 Untuk memakai css diatas gunakan kode html

<div class="note">
ISI KONTENT KAMU
</div>
<div class="note red rounded">
ISI KONTENT KAMU
</div>
<div class="note blue">
ISI KONTENT KAMU
</div>
<div class="note taupe">
ISI KONTENT KAMU
</div>
<div class="container footer">
ISI KONTENT KAMU
</div>

Berikut ini SS dari contoh kode cssnya

css efek folded corner

Demikian tutorial cara membuat CSS EFEK KERTAS LIPAT / PAGE FOLD Semoga bisa menambah cantik tampilan blog kamu.

Sumber: nicolasgallagher