Home » Tutorial Blogger » Tutorial Blog - Efek Page-Fold/Lipatan Kertas dengan CSS

21 September 2012

Diposting oleh Yandi Mulyadi // Pada Jumat, September 21, 2012 //

Tutorial Blog - Efek Page-Fold/Lipatan Kertas dengan CSS

efek lipat kertas CSS/page fold effect


CSS

/*
--------------------------
Standar tampilan
--------------------------
*/

.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 */
}

/*
--------------------------
Opsi untuk memberikan efek rounded corner
dengan menambahkan class "rounded"
--------------------------
*/

.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;
}


Elemen Objek

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

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




CSS Pseudo-Element :before




Ditulis Oleh : Yandi Mulyadi ~ Semua Artikel Menarik Ada Disini

Yandi Mulyadi Sobat sedang membaca artikel tentang Tutorial Blog - Efek Page-Fold/Lipatan Kertas dengan CSS. Yang diketik tangan Oleh Admin Yandi Mulyadi, Sobat diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya ya?
Artikel tersebut bisa Anda akses via mobile, klik disini.
Share this post :
Related Posts :

Posting Komentar

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( :-q =))

Berkomentarlah di blog ini dengan Etika yang Baik dan Cerdas
✗ Jangan berkomentar yang mengandung SARA atau hal yang NEGATIF lainnya !!
✗ Jangan sampai komentarmu masuk ke dalam SPAM !!
✗ Berkomentarlah yang Masuk di Akal
✗ Usahakan Jangan Menggunakan Kata Kasar
✗ Tolong Jangan Membuat Link Porno dan Sebagainya

(◕‿-) TERIMA KASIH SUDAH BERKUNJUNG (-‿◕)

Next → ← Prev