Thiết kế Form theo phong cách thời học sinh với CSS

Có thể vào thời điểm này, chắc đã không còn ai viết thư tay mà gửi thông điệp cho nhau bằng Facebook hoặc email. Vì thế mà những mẫu form với kiểu viết tay và đính kèm như một bao thư thì ắt hẳn sẽ thu hút không ít người dùng. Hôm nay mình sẽ chia sẻ cho các bạn một mẫu thiết kế form theo phong cách cổ điển thời học sinh của mình.

Xem Demo | Download

HTML

Các bạn tạo form theo đoạn html mô phỏng bên dưới.

<div id="container">
	
	<h1>Send a Letter</h1>
	
	<form action="" method="post">
		<fieldset>
			<label for="name">Name:</label>
			<input type="text" id="name" name="name" />
			
			<label for="email">Email:</label>
			<input type="email" id="email" name="email" />
			
			<label for="message">Message:</label>
			<textarea id="message" name="message"></textarea>
			
			<input type="submit" id="send" value="Send" />
			
		</fieldset>
	</form>
</div>  

CSS

Và sủ dụng đoạn css này để định dạng cho form.

body, div, h1, form, fieldset, input, textarea {
	margin: 0; padding: 0; border: 0; outline: none;
}

body {
	background: #abb5cb url(blue-bg.png);
	font-family: Helvetica, Sans-Serif; color: #525c73;
	line-height: 40px; text-transform: uppercase;
}


#container {
	awidth: 560px; margin: 100px auto; padding: 51px 0 0 0;
	background: url(lines.png); position: relative;
}
	#container:before {
		content: ""; awidth: 19px; height: 365px; position: absolute; left: -19px; top: 0;
		background: url(shadow.png); 
	}

h1 {
	font-size: 30px;
	text-align: center; letter-spacing: 5px;
	margin: 0 0 44px 0;
}

label {
	awidth: 150px; display: block;
	text-align: right; float: left;
	font-size: 18px; letter-spacing: 3px;
	margin: 0 10px 40px 0; clear: left;
}

input {
	awidth: 300px; height: 40px; float: left; margin: -14px 0 0 0;
	background: url(dots.png); 
	font-family: 'Shadows Into Light', cursive;
	font-size: 24px; color: #18326d; letter-spacing: 3px;
}

textarea {
	awidth: 300px; height: 200px; float: left; margin: -14px 0 40px 0;
	background: url(dots.png); 
	font-family: 'Shadows Into Light', cursive;
	font-size: 24px; color: #18326d; letter-spacing: 3px;
}

input#send {
	awidth: 202px; height: 84px; float: right;
	margin: 0 70px 36px 0; padding: 0 0 0 77px;
	background: url(post-mark.png);
	font: bold 30px Helvetica, Sans-Serif; text-transform: uppercase; color: #525c73;
	cursor: pointer;
	
}

jQuery

Chúng ta cũng cần chèn jQuery plugin để khi người dùng nhập ở phần message quá dài, nó sẽ tự động mở rộng form.

<script src="jquery.min.js"></script>
<script src="autoResize.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
	   $('textarea#message').autoResize();
});	
</script>  

Mình tin chắc là các bạn có thể sử dụng mẫu thiết kế này cho những trang web/blog sắp tới của các bạn.

Chuyên Mục: Css

Bài viết được đăng bởi webmaster