Efek Page-Fold/Lipatan Kertas dengan CSS

Tabel Konten
  1. CSS 
  2. Kerangka HTML 
efek lipat kertas CSS/page fold effect

CSS 

/* tampilan standar */

.note {
  position:relative;
  width:30%;
  padding:1em 1.5em;
  margin:2em auto;
  color:white;
  background:#97C02F;
  overflow:hidden;
}

.note:before {
  content:"";
  position:absolute;
  top:0;
  right:0;
  border-width:0 16px 16px 0;
  border-style:solid;
  border-color:white white #658E15 #658E15;
  background-color:#658E15;
  -webkit-box-shadow:0 1px 1px rgba(0,0,0,.3),-1px 1px 1px rgba(0,0,0,.2);
  -moz-box-shadow:0 1px 1px rgba(0,0,0,.3),-1px 1px 1px rgba(0,0,0,.2);
  box-shadow:0 1px 1px rgba(0,0,0,.3),-1px 1px 1px rgba(0,0,0,.2);
  display:block;
  width:0; /* Firefox 3.0 damage limitation */
}

/* dengan tepi tumpul */

.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:white white transparent transparent;
  -webkit-border-radius:0 0 0 5px;
  -moz-border-radius:0 0 0 5px;
  border-radius:0 0 0 5px;
}

Kerangka HTML 

<div class='note'>
    Konten di sini...
</div>

<div class='note rounded'>
    Konten di sini...
</div>
CSS Pseudo-Element :before

Lihat Demo


Sumber: http://nicolasgallagher.com

4 Komentar

  • iam

    Kereeen abis mas :D Hmm.. kalau saya sepertinya masih mengandalkan photoshop/coreldraw dulu nih >.<

  • Ivan Niblesim

    senang baca artikel ini. aplikatif, simple, dan termasuk most wanted. cheers!

  • Unknown

    blognya kren.. artikelnya pun juga... :D

  • andri sutikno

    \o/

Komentar telah ditutup.