Tutorial Web Design

Membuat Efek Tumpukan Kertas Dengan CSS3 mempunyai banyak kegunaan, tidak salah untuk dipelajari karena teknik ini cukup terpakai di dunia web desain, contoh beberapa bulan yang lalu saya pernah mendapatkan project untuk membuat website untuk sebuah kontes menulis artikel singkat, dan yang meminta ingin layout nya itu seperti kertas, bagaimana pun designer harus mencari akal agar sebisa mungkin mirip kertas, ada banyak cara, tapi yang sederhana ini menjadi pilihan mereka karena dianggap lebih simpel dan enak untuk membaca.

Waktu itu project tersebut saya buat juga dengan trik Membatasi Input Text Dengan Jquery agar artikel hanya bisa ditulis sebanyak 500 karakter saja, dari situ banyak hal yang bisa dipelajari dan bisa ditulis dalam beberapa trik. Salah satunya tampilan efek kerta dengan css3 ini.

Struktur HTML

Oke kita langsung saja mulai dengan struktur HTML yang diperlukan, buat sebuah file HTML dan beri nama efek-kertas.html.

Buat struktur html seperti biasanya, dan di body kita cukup membuat sebuah div dengan class kertas.

	<div class="kertas">
		<p><strong>Demo: Tumpukan Kertas</strong></p>
		<p><a href="http://www.Tutorial-Webdesign.com">Tutorial-Webdesign.com</a></p>
		<p><a href="http://www.tutorial-webdesign.com/efek-tumpukan-kertas-css/">Back to tutorial</a></p>
	</div>

CSS

Untuk mempercantik kita menggunakan CSS, disini yang perlu dipelajari adalah CSS Box Shadow karena untuk membuat efek tumpukan itu sebenarnya menggunakan beberapa kali efek shadow dengan jarak yang berbeda-beda, disini kita buat demo bayangan nya semakin jauh, dan jauh lagi, sehingga terbentuk seperti kertas yang bertumpuk.

format penulisan box shadow css itu seperti berikut ini

box-shadow: 1px 2px 3px 4px #555;

1px = Horizontal Offset

2px = Vertical Offset

3px = Blur Radius (optional)

4px = Spread Radius (optional)

#555 = Color

Dan berikut ini adalah kode css selengkapnya dari demo yang kita buat.

	body{background:#555;}
	a{text-decoration: none; color: #333;}
	.kertas {
		background-color:#FFF;
		height:280px;
		width:200px;
		padding:20px;
		margin:20px auto;

		-webkit-box-shadow:
			1px 1px 0 rgba(0,0,0,0.100),
			3px 3px 0 rgba(255,255,255,1.0),
			4px 4px 0 rgba(0,0,0,0.125),
			6px 6px 0 rgba(255,255,255,1.0),
			7px 7px 0 rgba(0,0,0,0.150),
			9px 9px 0 rgba(255,255,255,1.0),
			10px 10px 0 rgba(0,0,0,0.175);

		box-shadow:
			1px 1px 0 rgba(0,0,0,0.100),
			3px 3px 0 rgba(255,255,255,1.0),
			4px 4px 0 rgba(0,0,0,0.125),
			6px 6px 0 rgba(255,255,255,1.0),
			7px 7px 0 rgba(0,0,0,0.150),
			9px 9px 0 rgba(255,255,255,1.0),
			10px 10px 0 rgba(0,0,0,0.175);

	}

Terlihat disitu nilai 1 sampai dengan 10 pada bagian horizontal dan vertical, dan warna hitam hitam dan putih yang tertulis di rgba(0,0,0,..) dan rgba(255,255,255,..)

disitu menggunakan rgba agar bisa ditentukan ketebalan warnanya, atau bisa kita bilang opacity warnanya.

Untuk lebar dan panjang nya bisa ditentukan sendiri sesuai kebutuhan kamu.

Support Browser

Efek ini bisa dijalankan disemua browser terbaru, tapi tidak berfungsi di Opera Mini.

Hasil

Berikut hasil yang telah dibuat

Demo | Download Code

Sekian

Sekian tutorial kali ini, semoga bermanfaat untuk anda semua,

Salam web design indonesia.

Image by: rmkoske