Chuyển đổi Contact Form từ file PSD sang HTML và CSS3

07/02/2014

Nếu các bạn mới bắt đầu học thiết kế web, chắc hẳn là sẽ chưa biết nhiều về cách chuyển đổi những mẫu thiết kế từ file PSD sang html và css. Đây là một trong những kỹ năng mà các bạn cần phải thông thạo nếu muốn có một công việc tốt sau khi ra trường. Hôm nay mình sẽ hướng dẫn các bạn từng bước  code html và css cho  file PSD đơn giản, là mẫu form liên hệ mà mình đã giới thiệu trong bài viết Tự tay thiết kế Form đăng nhập tuyệt đẹp với Photoshop. Qua bài viết này, các bạn sẽ có thêm kinh nghiệm trong việc chuyển đổi những file thiết kế từ Photoshop sang định dạng HTMLCSS.

coding-beautiful-form-into-html-and-css

Bước 1 : Đầu tiên chúng ta sẽ tạo thư mục và các file như sau :

coding-beautiful-form-into-html-and-css-01

Từ file PSD các bạn tách riêng ra các file hình ảnh background và icons rồi bỏ vào folder images như sau:

coding-beautiful-form-into-html-and-css-02

Bước 2 : HTML

Các bạn mở file index.html sau đó copy toàn bộ đoạn code sau và dán (paste) nó vào bên trong file này.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<link rel="stylesheet" type="text/css" href="style.css" media="all" />
	<title>Form</title>
</head>
<body>
	<div id="wrapper">
		<form action="#" id="form">
			<label for="name">Name</label>
			<input type="text" id="name" />
			<label for="email">Email</label>
			<input type="text" id="email" />
			<label for="telephone">Telephone</label>
			<input type="text" id="telephone" />
			<label for="message">Message</label>
			<textarea name="message" id="message" cols="30" rows="10"></textarea>
			<input type="submit" value="Send" name="submit" id="submit" />
		</form>
	</div>

</body>
</html>

Bước 3 : CSS

Bây giờ các bạn mở file style.css rồi copy toàn bộ đoạn css sau vào bên trong file này :

* {
	margin:0;
	padding:0;
}

body {
	background: #59799e url(images/bg.jpg) no-repeat top center;
	color: #444;
	font-size: 14px;
}

#wrapper {
	margin: 30px auto 0;
	width: 400px;
}

label {
	display: block;
	font-size: 24px;
	padding: 13px 0;
	color: #fff;
	text-shadow: 1px 1px 1px #666;
}

input {
	height: 20px;
	padding: 15px;
	width: 330px;
	-webkit-border-radius: 6px;
	-khtml-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	-webkit-box-shadow: 0 0 10px #444;
	-moz-box-shadow: 0 0 10px #444;
	box-shadow: 0 0 10px #444;
	border: 1px solid #fff;
}

textarea {
	height: 220px;
	width: 330px;
	padding: 15px;
	border: 1px solid #fff;
	-webkit-border-radius: 6px;
	-khtml-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	-webkit-box-shadow: 0 0 10px #444;
	-moz-box-shadow: 0 0 10px #444;
	box-shadow: 0 0 10px #444;
}

input[type="text"]:hover, textarea:hover {
	border: 1px solid #fff;
	-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.25) inset, 0 0 5px rgba(255, 255, 255, 0.4);
	-moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.25) inset, 0 0 5px rgba(255, 255, 255, 0.4);
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.25) inset, 0 0 5px rgba(255, 255, 255, 0.4);
}

input#submit {
	width: 150px;
	text-align: center;
	color: #fff;
	height: 50px;
	padding: 0;
	text-shadow: 1px 1px 1px #000;
	font-size: 18px;
	text-transform: uppercase;
	margin-top: 50px;
	float: right;
	border: 1px solid #000;
	background: #000;
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3b3b3b), color-stop(100%, #000000));
	background: -webkit-linear-gradient(top, #3b3b3b 0%,#000000 100%);
	background: -moz-linear-gradient(top, #3b3b3b 0%,#000000 100%);
	background: -o-linear-gradient(top, #3b3b3b 0%,#000000 100%);
	background: -ms-linear-gradient(top, #3b3b3b 0%,#000000 100%);
	background: linear-gradient(top, #3b3b3b 0%,#000000 100%);
	opacity: 0.5;
}

input#submit:hover {
	color: #ccc;
	cursor: pointer;
	opacity: 0.8;
}

#name {
	background: #f0f0f0 url(images/name.png) 10px center no-repeat;
	padding-left: 50px;
}

#email {
	background: #f0f0f0 url(images/email.png) 10px center no-repeat;
	padding-left: 50px;
}

#telephone {
	background: #f0f0f0 url(images/telephone.png) 10px center no-repeat;
	padding-left: 50px;
}

#message {
	background: #f0f0f0 url(images/message.png) 10px 10px no-repeat;
	padding-left: 50px;
}

Bây giờ các bạn có thể tự kiểm tra bằng cách bật file index.html bằng các trình duyệt web . Các bạn thấy đó, việc chuyển từ file PSD sang html và css thì thật không khó chút nào, quan trọng là các bạn cần phải nắm vững những thẻ html cũng như định dạng css cơ bản là được. Nếu trong bài viết có điều gì gây khó hiểu cho các bạn, thì đừng ngần ngại để lại lời nhắn dưới dạng comments nhé, mình sẽ giúp các bạn hoàn thành bài viết này.

Chúc các bạn thành công !

Chuyên Mục:

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

Nếu các bạn thấy bài viết hữu ích thì giúp mình Like cái nhé !