#CSSTuts 1 : Membuat sticky notes paling jelek sedunia

#CSSTuts 1 : Membuat sticky notes paling jelek sedunia

29 September 2013 Tutorial, Web Design 0 Komentar

Setiap seminggu sekali paling endak kita akan mulai rutin publish tutorial-tutorial yang berhubungan dengan web dari level beginner ataupun advance :3 Salah satunya ini nih, #CSSTuts. #CSSTuts tentunya adalah tutorial-tutorial yang berhubungan dengan #demikian.

Di #CSSTuts 1 ini kita akan bersama-sama belajar bagaimana membuat sticky notes sendiri dengan CSS. Harapan saya, setelah temen-temen baca tutorial ini dan praktekin tutorial ini, akan merasakan sebuah penyesalan yang luar biasa karena telah pernah berhasil membuat sticky notes yang paling jelek sedunia. Saya peringatkan sebelumnya, sebelum kita bersama-sama melangkah ke jenjang yang lebih jauh, dan menyesali apa yang akan kita lakukan, alangkah baiknya temen-temen segera menutup tab browser yang mengandung tutorial ini. Jika temen-temen masih bersikeras, maka mari.. akan saya bimbing menuju penyesalan itu 😐

Bisa kita lihat bersama, hasil akhirnya adalah seperti ini :

membuat sticky notes paling jelek sedunia

 

* Foto sengaja di blur untuk meminimalisir kemungkinan-kemungkinan hal buruk yang dapat terjadi, seperti mual-mual bahkan akan muntah, ataupun kejang-kejang..

Kita akan membuat sebuah sticky notes yang nampak berbuku-buku. Yang perlu kita siapkan adalah 4 buah <div> dengan class yang kita tentukan sendiri. 1 <div> digunakan untuk container, 1 <div> lagi digunakan untuk content sticky notes nya, dan 2 <div> yang lain digunakan untuk membuat efek seperti kertas bertumpuk-tumpuk. Seperti ini strukturnya :

 

	<div class="container">
		<div class="box box-content">
			<h1>title</h1>
			<p><span>konten</span></p>
			<small>author</small>
		</div>
 
		<div class="box box-sheet1"></div>
		<div class="box box-sheet2"></div>
	</div>

Setelah itu, kita bikin kode CSS nya seperti di bawah ini :

.container{
	margin: 50px auto 0;
	width: 400px;
	height: auto;		
	position: relative;	
}
 
.box{
	border: 1px solid #2a84ae;
	background: #3f93b9;
	border-radius: 4px;
	-o-border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
}
 
.box-content{
	width: 400px;
	min-height: 200px;
	padding: 20px;
	position: relative;
	z-index: 2;
	color: #ffffff;
}
 
.box-content h1{
	font-size: 30px;
	line-height: 45px;
	font-weight: 300;
	margin: 0 0 10px;
	border-bottom: 1px solid #eee;
	display: inline-block;
	text-align: center;
}
 
.box-content p span{
	border-bottom: 1px solid #eee;
	line-height: 35px;
	padding-bottom: 5px;
	font-size: 18px;
	letter-spacing: 1px;
}
 
.box-content small:before{
	content: "- ";
}
 
.box-sheet1{
	width: 420px;
	height: 10px;
	position: absolute;
	z-index: -2;
	left: 50%;
	margin-left: -190px;
	margin-top: -5px;
}
 
.box-sheet2{
	width: 400px;
	height: 10px;
	position: absolute;
	z-index: -3;
	left: 50%;
	margin-left: -180px;
	margin-top: 0px;
}

Maka akan kita dapatkan hasil sebagai berikut :

membuat sticky notes paling jelek sedunia - step 1

Untuk lebih mempercantik tampilannya, kita gunakan google font yang style font nya handwrite gitu. Kita coba pake ini :

<link href='http://fonts.googleapis.com/css?family=Shadows+Into+Light+Two' rel='stylesheet' type='text/css'>

Dan taraa… hasilnya nantik jadi gini :

membuat sticky notes paling jelek sedunia - step 2

Lumayan ancur kan ? 🙁 Full kode nya bisa dilihat di bawah ini :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
	<title>#CSSTuts 1</title>
    <meta name="description" content="membuat sticky notes paling jelek sedunia - css tutorial kelompok studi web uad">
    <meta name="keywords" content="csstuts, css, css tutorial, tutorial, ksweb, kswebuad">
    <meta name="author" content="afriq yasin ramadhan">
	<link href='http://fonts.googleapis.com/css?family=Shadows+Into+Light+Two' rel='stylesheet' type='text/css'>
	<style type="text/css">
		body {
			background: #ffffff;
			padding: 0;
			margin: 0;
			font-family: 'Shadows Into Light Two', cursive;
		}
 
		.container {
			margin: 50px auto 0;
			width: 400px;
			height: auto;		
			position: relative;	
		}
 
		.box {
			border: 1px solid #2a84ae;
			background: #3f93b9;
			border-radius: 4px;
			-o-border-radius: 4px;
			-moz-border-radius: 4px;
			-webkit-border-radius: 4px;
		}
 
		.box-content {
			width: 400px;
			min-height: 200px;
			padding: 20px;
			position: relative;
			z-index: 2;
			color: #ffffff;
		}
 
		.box-content h1 {
			font-size: 30px;
			line-height: 45px;
			font-weight: 300;
			margin: 0 0 10px;
			border-bottom: 1px solid #eee;
			display: inline-block;
			text-align: center;
		}
 
		.box-content p span {
			border-bottom: 1px solid #eee;
			line-height: 35px;
			padding-bottom: 5px;
			font-size: 18px;
			letter-spacing: 1px;
		}
 
		.box-content small:before {
			content: "- ";
		}
 
		.box-sheet1 {
			width: 420px;
			height: 10px;
			position: absolute;
			z-index: -2;
			left: 50%;
			margin-left: -190px;
			margin-top: -5px;
		}
 
		.box-sheet2 {
			width: 400px;
			height: 10px;
			position: absolute;
			z-index: -3;
			left: 50%;
			margin-left: -180px;
			margin-top: 0px;
		}
	</style>
</head>
<body>
 
	<div class="container">
		<div class="box box-content">
			<h1>Sesederhana itu ?</h1>
			<p><span>Rindu itu sederhana, saat aku mulai mengingatmu (lagi) lalu tiba-tiba rindu datang kembali, padahal aku ingin mengubahnya menjadi sepi...</span></p>
			<small>avriqq</small>
		</div>
 
		<div class="box box-sheet1"></div>
		<div class="box box-sheet2"></div>
	</div>
 
</body>
</html>

Sekian.. Salam #CSSTuts, salam 4 sehat 5 #kode 🙂

Tidak ada komentar.

Tinggalkan Komentar