Make Paper Effect used CSS3 - Hallo friend Cara Mudah Posting Gratisan, In the article you read this time with the title Make Paper Effect used CSS3, we have prepared well for this article you read and download the information therein. hopefully fill posts Article Coded, Article CSS, Article HTML, Article Snippet, Article Trik dan Tips, we write this you can understand. Well, happy reading.

Title : Make Paper Effect used CSS3
link : Make Paper Effect used CSS3

Make Paper Effect used CSS3

Di mana ada tutorial, di sana langkah gue tertuju :d Apalagi bila konten yang ada berbicara seputaran tutorial blogger b-) Bisa anteung baca-baca and korek-korek apa ada yg unik untuk di share ;) Teman kita @blogsdaddy selaku owner dari Blogs Daddy mempunyai artikel seputaran all about the blogger :) Sok dikunjungin biar nambah² perbendaharaan ilmu blog.
Melihat punya perhatian Koben tertarik melihat dengan tampilan GetIn Touch facebook page like box yg ada disana! Basicly efek seperti itu bisa kita buat dengan memakai variabel CSS3 Pseudo-Elements. Lihat ke sini untuk melihat kreasi @tkenny mengenai hal Create the Stacked Elements with CSS3 Pseudo-Elements Keren kan :-/ Kembali pada kepunyaan daddy ternyata mempunyai trik berbeda dalam menampilkan efek tersebut.

DEMO

Konten bisa di isi sesuai dengan keperluan, kalau memang mau diisikan frame like-box facebook, silahkan buat dulu framenya Social Plugins Facebook Ini bumbunya
Kode CSS

.likebox {
width: 292px;
height: 175px;
padding: 0;
margin:0 auto;
position: relative;
background: #f4f4f4
}
.likebox, .likebox:before, .likebox:after {
border:1px solid #ccc;
background: #f4f4f4
}
.likebox:before, .likebox:after {
content:"";
position: absolute;
height: 1px;
bottom: -3px;
left: 2px;
right: 2px;
}
.likebox:after {
left: 4px;
right: 4px;
bottom: -5px;
box-shadow: 0 0 2px #ccc
}

Markup HTML<div class="likebox">

----------- ADD YOUR CONTENT HERE -----------

</div>Tinggal diatur-atur saja lebar & tinggi sesuai kebutuhan.
Apakah hanya itu kode yg bisa kita pakai dalam menampilkan efek bertingkat seperti kertas? Ada lagi dong bos...

Come from by master Kougi Tambo with article css3 Paper Pile effect Memakai variable box-shadow ternyata dapat menghasilkan efek serupa!
Demo

A4

Coded

#paper-pile {
border: 1px solid silver;
overflow: hidden;
background: #fff;
width: 150px;
height: 190px;
-khtml-box-shadow: 0px 5px 0px -4px white, 0px 5px 0px -3px #CCC, 0px 11px 0px -8px white, 0px 11px 0px -7px #CCC,0px 22px 0px -7px rgba(200,200,200,0.1);
-webkit-box-shadow: 0px 5px 0px -4px white, 0px 5px 0px -3px #CCC, 0px 11px 0px -8px white, 0px 11px 0px -7px #CCC,0px 22px 0px -7px rgba(200,200,200,0.1);
-moz-box-shadow: 0px 5px 0px -4px white, 0px 5px 0px -3px #CCC, 0px 11px 0px -8px white, 0px 11px 0px -7px #CCC,0px 22px 0px -7px rgba(200,200,200,0.1);
-ms-box-shadow: 0px 5px 0px -4px white, 0px 5px 0px -3px #CCC, 0px 11px 0px -8px white, 0px 11px 0px -7px #CCC,0px 22px 0px -7px rgba(200,200,200,0.1);
-o-box-shadow: 0px 5px 0px -4px white, 0px 5px 0px -3px #CCC, 0px 11px 0px -8px white, 0px 11px 0px -7px #CCC,0px 22px 0px -7px rgba(200,200,200,0.1); 
box-shadow: 0px 5px 0px -4px white, 0px 5px 0px -3px #CCC, 0px 11px 0px -8px white, 0px 11px 0px -7px #CCC,0px 22px 0px -7px rgba(200,200,200,0.1);
}

Hehehe :P
Bonus: http://redactorjs.com/
Happy coding \m/

Thus articles Make Paper Effect used CSS3

that is all articles Make Paper Effect used CSS3 This time, hopefully can provide benefits to all of you. Okay, see you in another article posting.

You now read the article Make Paper Effect used CSS3 with the link address https://autopostingblogspot.blogspot.com/2012/06/make-paper-effect-used-css3.html