membuat efek kertas menggunakan CSS3
Maret 03, 2017
asalamualaiku.wr.wb
hai teman teman saya ingin membagi sedikit tentang bagaimana sih memberikan efek kertas pada website kita
1.pendahuluan
Untuk sebuah website yang berbentuk post bisa kita tampilkan seperti kertas yang saling tumpang menumpang antar satu kertas dg yg lainnya
2.latar belakang
Memper indah suatu post jika di tampilkan di layar dan mempunyai aura hidup pada website post yang kita buat dan banyak lagi.
3.Alat dan bahan
- PC / Laptop
- browser
- Sublime text
- kita tuliskan sintak html terlebih dahulu
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="kertas">
<h2>Tutorial Web Design Dengan CSS3 | WWW.MALASNGODING.COM</h2>
<h3>Membuat Efek Kertas dengan CSS3</h3>
<br/>
<p>Tutorial pemrograman web, mobile dan web design di www.malasngoding.com. ini adalah tutorial membuat efek kertas dengan css3.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod porta tempor. Donec pulvinar turpis nec velit pellentesque
quis rhoncus sapien facilisis. Mauris quis massa dui, rhoncus viverra quam. Nulla tempus, augue ut consectetur facilisis, arcu elit pellentesque arcu, sed rutrum orci turpis pulvinar augue. Donec eget arcu mauris. Vestibulum tristique consequat lacus
eget laoreet. Integer sed nisl sed nibh pulvinar ornare quis nec quam. Aenean rhoncus ligula ut lectus placerat a commodo quam vulputate. In eu metus turpis.</p>
<p>Malasngoding.com adalah website yang menyediakan tutorial-tutorial tentang pemrograman. memiliki penjelasan yang lengkap dan berbagi source code. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus facilisis
erat in nibh auctor at aliquet velit vestibulum. Curabitur turpis diam, malesuada eu consequat eget, ultricies sed nunc. Aenean sed odio massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ornare vulputate congue. Quisque leo
metus, condimentum nec molestie et, egestas luctus libero.</p>
<p>Mauris porta odio augue. Nam turpis dui, volutpat id feugiat vitae, sagittis a justo. Nam iaculis aliquet erat non varius. Suspendisse justo arcu, tincidunt sed auctor sit amet, fermentum id turpis. Suspendisse sed enim quis lorem vestibulum fermentum
a ut nulla.</p>
<p>Nullam tincidunt elit quis nibh blandit interdum. Duis ullamcorper pellentesque pretium. Nulla facilisi. Morbi semper nisi et justo varius non fermentum metus ornare. Proin vehicula, mi vel volutpat accumsan, libero lacus euismod massa, id feugiat velit
enim nec ligula. Aliquam ipsum est, volutpat aliquam tincidunt id, sagittis et velit. Nunc vitae massa vel dui facilisis consectetur vel id sem.</p>
<p>Aenean pulvinar, lacus ultrices euismod viverra, nulla diam interdum ligula, id mollis mi erat quis lectus. Morbi quis felis ut turpis condimentum dictum porttitor id mauris. Nam non tincidunt mauris. Donec viverra eleifend pharetra. Nulla eu ipsum
et elit consectetur rutrum. Integer lorem purus, ultricies ac laoreet quis, feugiat vel dolor. Donec eu turpis neque. Nullam molestie sapien eu nibh semper sed convallis est pretium.</p>
</div>
</body>
</html>
- setelah selesai kita tulis sintak html kita tuliskan css.nya seperti ini
body {
background: #f2f5f7;
font: 14px sans-serif;
padding: 20px;
}
h2,
h3 {
text-align: center;
}
.kertas {
background: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
margin: 26px auto 0;
max-width: 550px;
min-height: 300px;
padding: 24px;
position: relative;
width: 80%;
}
.kertas:before,
.kertas:after {
content: "";
height: 98%;
position: absolute;
width: 100%;
z-index: -1;
}
.kertas:before {
background: #fafafa;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
left: -5px;
top: 4px;
transform: rotate(-2.5deg);
}
.kertas:after {
background: #f6f6f6;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
right: -3px;
top: 1px;
transform: rotate(1.4deg);
}
- dan hasilnya seperti ini
5.kesimpulan
ternyata css3 lebih menampilkan banyak fitur fitu yang memperindah tampilan website yang kita buat
6.referensi
- http://www.malasngoding.com
wasalamualikum.wr.wb
0 comments