Final Result
Details
- Program: Adobe Dreamweaver or any other text editor
- Technology: HTML 5, CSS 3
- Difficulty: Beginner
Some html5 basics
Lets check some html5 updates before dive into the tutorial to make sure we will be in same page.
- No need to close the empty tags by /> like xHTML, just use >. Example <br /> will now replaced with <br>
- So form element like text input will look like this. <input type=”text”>
HTML5 form attribute that we will be using
- Required:This attribute don’t need any values, if included the html5 form will require that input field before sending data. If any required field is not filled up the browser will show a popup message, you don’t need to specify any javascript validation because html5 will do it for you.
Use: <input type=”text” required> - WAI-ARIA:WAI-ARIA is an incredibly powerful technology that allows developers to easily describe the purpose, state and other functionality of visually rich user interfaces – in a way that can be understood by Assistive Technology. It’s also defines a way to make Web content and Web applications more accessible to people with disabilities. More resources can be found here. How you use WAI-ARIA is using aria-*. The * will be replaced by roles. Check this article for more details and also try
Wai-aria in html5. - Pattern: Regex pattern for validating the input field.
Step 1 : Setting up the environment
Make a folder structure like the image. I usually put a jquery file and blank scripts.js in the js folder. Also add a basic html5 file in root and name it form.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" >
<meta name="author" content="Web Remix">
<title>PSD to html5/css3</title>
</head>
<body>
</body>
</html>
Open the html file in a browser you should see a blank white page. Let’s add scripts and a style sheet inside <head></head>.
<link rel="stylesheet" href="styles.css" type="text/css">
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/scripts.js"></script>
Step 2: Make the plan
When you see a psd file you should have a draft idea about how you many top level div you will use.
Step 3: Start with the conversion
Open the psd file press Shift+Ctrl+Alt+E / Shift+Command+Option+E to have a flatten version of the artwork. Here is a great resource to learn photoshop shortcuts.
We have noise in background lets pick that up. Select the flattened layer and make a squired selection using Marquee squire tool. Size should be around 95-110px. Copy and hit ctrl+n to make a new document. Size of the new document will be automatically adjusted according to you copied area. Now paste the copied image and press Shift+Ctrl+Alt+S / Shift+Command+Option+S to save for web. For this particular pattern I will advice to save it in png24 loss less format.
Now add the pattern as background image with background color of #111 in css.
body{
background:#111 url(images/bg-pattern.png) repeat;
}
Make the containers
Make the container in html.
<div id="form-container">
<div id="form-header"></div>
<form id="form" action="post">
</form>
</div>
Add form elements
Now add form elements and form header. We have two text input field, one password field and a submit button.
<div id="form-container">
<div id="form-header">
<span>Signup</span>
</div>
<form id="form" action="post">
<input type="text" id="username" name="username" value="Username" title="Username" required aria-required="true" pattern="\S{5,}">
<br>
<input type="text" id="email" name="email" value="Email" title="Email" required aria-required="true" pattern="^([0-9a-zA-Z]([-.\w]*[0-9a-zA-Z])*@([0-9a-zA-Z][-\w]*[0-9a-zA-Z]\.)+[a-zA-Z]{2,9})$">
<br>
<input type="password" id="password" name="password" value="Password" title="Password" required aria-required="true" pattern="\S{7,}">
<br>
<input id="submit" type="submit" value="Submit" name="posted">
</form>
</div>
We will require all input fields and also set the aria-required=”true” and for the validation we will use regex pattern. I assume the username should be at least 5 letters and without space and pattern for this is \S{5,} and for email validation use the pattern ^([0-9a-zA-Z]([-.\w]*[0-9a-zA-Z])*@([0-9a-zA-Z][-\w]*[0-9a-zA-Z]\.)+[a-zA-Z]{2,9})$ and pattern for the password I used \S{7,} which means no space and at least 7 character needed for password you can go more complex if you like.
Step 4: Adding CSS
Lets add css to make it prettier and most importantly same as the PSD file. It is always good idea to use some basic resets and common classes that we will need most often.
a img, input{
outline:none;
}
/* common classes */
.float-left{
float:left;
}
.float-right{
float:right;
}
.clear{
margin:0;
padding:0;
clear:both;
}
Styling containers
To find out the width of the form lets go back to photoshop and grab the slice tool and draw a box which cover the full width of the form. Now double click the slice to see the width of the slide. The width is 588px. Also find the form background color (#1d1d1d) by eyedropper tool.
Lets add styles to the container and give it nice border radius with a nice 70% black (#000) glow with rgba. Remember the width 588px and center it using margin:auto;. For vertical centering lets use margin top for now. We will add some javascript later for perfect centering.
#form-container{
width:588px;
margin:auto;
margin-top:10%;
border:1px solid #000;
background:#1d1d1d;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
font-family:'Myriad Pro', Arial, Helvetica, sans-serif;
-moz-box-shadow: 0 0 1px 1px rgba(0, 0, 0, .7);
-webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, .7);
box-shadow: 0 0 1px 1px rgba(0, 0, 0, .7);
}
Styling Header
When we look at the header its simply have a linear gradient and rounded border about 10pixel with top left and top right side. That can easily done by css3
#form-header{
font-size:24px;
color:#e0e0e0;
text-transform:uppercase;
height:30px;
background: #111111;
border-bottom:1px solid #000;
padding: 20px 30px;
border-top-left-radius:10px;
border-top-right-radius:10px;
-moz-border-top-left-radius:10px;
-moz-border-top-right-radius:10px;
-webkit-border-top-left-radius:10px;
-webkit-border-top-right-radius:10px;
-moz-box-shadow: inset 0px 2px 1px #2a2a2a;
-webkit-box-shadow: inset 0px 2px 1px #2a2a2a;
box-shadow: inset 0px 2px 1px #2a2a2a;
/* Firefox 3.6+ */
background: -moz-linear-gradient(100% 100% 90deg, #101010, #181818);
/* Safari 4-5, Chrome 1-9 */
/* -webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*) */
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#181818), to(#101010));
/* Safari 5.1+, Chrome 10+ */
background: -webkit-linear-gradient(#181818, #101010);
/* Opera 11.10+ */
background: -o-linear-gradient(#181818, #101010);
/* for IE */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#181818', endColorstr='#101010');
}
Now we have our nice header same as the photoshop file!
Styling Form Elements – From Input
Before styling the form elements lets add some padding to the form.
form{
padding:30px;
}
Lets style form text and password input field. When looking at the photoshop version we will see inner shadow which can be done by css3 box-shadow property with inset keyword. We also have a white shadow which gives us a nifty 3d look, we also use box-shadow for that. There is also a gradient and 10px of border radius with black border.
form input[type=text], form input[type=password]{
background:#0e0e0e;
border:1px solid #000;
padding: 10px;
color:#444444;
font-size:24px;
margin-bottom:20px;
font-weight:bold;
width:510px;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-moz-box-shadow: 1px 1px #343434, inset 5px 5px 5px black;
-webkit-box-shadow: 1px 1px #343434, inset 5px 5px 5px black;
box-shadow: 1px 1px #343434, inset 5px 5px 5px black;
/* Firefox 3.6+ */
background: -moz-linear-gradient(100% 100% 90deg, #171717, #0d0d0d);
/* Safari 4-5, Chrome 1-9 */
/* -webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*) */
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0d0d0d), to(#171717));
/* Safari 5.1+, Chrome 10+ */
background: -webkit-linear-gradient(#0d0d0d, #171717);
/* Opera 11.10+ */
background: -o-linear-gradient(#0d0d0d, #171717);
/* for IE */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0d0d0d', endColorstr='#171717');
}
The form will look like this.
Styling Submit Button
Referring to the PSD file we have two state for the submit button. Normal and the mouse down state. For most of the effects we will use css3. But we will need to use images for Color ovals. Lets save those color ovals as image first. Select both submit button groups and align center and Align both button state so they overlap exactly.
Now rasterize the button layers and save the color ovals with same image dimension. Now we can add css and add those ovals as background image.
Lets start syling. We need to float the button right according to design. After floating we also need to add a blank div to html and set its css clear property both. I have made a class called .clear for frequent use. Add the blank div after the submit button.
<input id="submit" type="submit" value="Submit" name="posted"> <div class="clear"></div>
Now add these css.
form #submit{
float:right;
background:#111 url(images/submit-bubble.png) center left no-repeat;
color:#e0e0e0;
border:1px solid #000;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
padding:8px 25px;
font-family:'Myriad Pro', Arial, Helvetica, sans-serif;
font-size: 24px;
padding-left: 40px;
-moz-box-shadow: inset 0px 2px 1px #2a2a2a;
-webkit-box-shadow: inset 0px 2px 1px #2a2a2a;
box-shadow: inset 0px 2px 1px #2a2a2a;
cursor:pointer;
}
form #submit:hover:active{
background:#111 url(images/submit-bubble-click.png) center left no-repeat;
color:#FFF;
-moz-box-shadow: 1px 1px #343434, inset 2px 2px 1px #000;
-webkit-box-shadow: 1px 1px #343434, inset 2px 2px 1px #000;
box-shadow: 1px 1px #343434, inset 2px 2px 1px #000;
padding-top:9px;
padding-bottom:7px;
}
Notice how we target the mouse down state, using pseudo class :hover and :active together which should work on all modern browsers. If you don’t like this method you can surely do it via jQuery.
Styling Validation
Html5 and CSS3 you can target the validation pseudo classes :valid, :invalid and style them accordingly. Let us add some red glow when user inputs not validate and green glow when user inputs valid information.
input:focus:invalid {
-moz-box-shadow: 0 0 3px 2px #ff2400, inset 5px 5px 5px black;
-webkit-box-shadow: 0 0 3px 2px #ff2400, inset 5px 5px 5px black;
box-shadow: 0 0 3px 2px #ff2400, inset 5px 5px 5px black;
/* Firefox 3.6+ */
background: -moz-linear-gradient(100% 100% 90deg, #171717, #0d0d0d);
/* Safari 4-5, Chrome 1-9 */
/* -webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*) */
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0d0d0d), to(#171717));
/* Safari 5.1+, Chrome 10+ */
background: -webkit-linear-gradient(#0d0d0d, #171717);
/* Opera 11.10+ */
background: -o-linear-gradient(#0d0d0d, #171717);
}
input:focus:valid {
-moz-box-shadow: 0 0 3px 2px #24a900, inset 5px 5px 5px black;
-webkit-box-shadow: 0 0 3px 2px #24a900, inset 5px 5px 5px black;
box-shadow: 0 0 3px 2px #24a900, inset 5px 5px 5px black;
/* Firefox 3.6+ */
background: -moz-linear-gradient(100% 100% 90deg, #171717, #0d0d0d);
/* Safari 4-5, Chrome 1-9 */
/* -webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*) */
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#171717), to(#0d0d0d));
/* Safari 5.1+, Chrome 10+ */
background: -webkit-linear-gradient(#171717, #0d0d0d);
/* Opera 11.10+ */
background: -o-linear-gradient(#0d0d0d, #171717);
}
Now you should get nice styling green glow when adding valid info and red when adding wrong info.
Step 5: Adding some javascript
At this stage we are done with html and css. Now I will add some javascript that I use most often with form elements. First of all watermark the default text so when user click the input box the text goes away.
$=jQuery.noConflict();
$(document).ready(function(){
//add .hide class to all input field you want the watermark
$(".hide").watermark();
// Center vertically
var div = $("#form-container");
div.css("margin-top" , ( $(window).height() - div.height() ) / 2+$(window).scrollTop() + "px");
});
jQuery.fn.watermark = function(){
var $ = jQuery;
$(this).focus(function() {
$(this).filter(function() {
// Check to see if we have a blank field or the default text
return $(this).val() === "" || $(this).val() === $(this).attr("title") || $(this).val() === "Your message here...";
}).val("")/*.css("color", "#808080")*/;
});
// When we click off of the field, we expect it to replace the watermark,
// unless we have entered text
$(this).blur(function() {
$(this).filter(function() {
// Check to see if the field is blank
return $(this).val() === "";
})/*.css("color", "#d0d0d0")*/.val($(this).attr("title"));
});
}
Final Code
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" >
<meta name="author" content="Web Remix">
<title>PSD to html5/css3</title>
<link rel="stylesheet" href="styles.css" type="text/css">
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/scripts.js"></script>
</head>
<body>
<div id="form-container">
<div id="form-header">
<span>Signup</span>
</div>
<form id="form" action="post">
<input type="text" class="hide" id="username" name="username" value="Username" title="Username" required aria-required="true" pattern="\S{5,}">
<br>
<input class="hide" type="text" id="email" name="email" value="Email" title="Email" required aria-required="true" pattern="^([0-9a-zA-Z]([-.\w]*[0-9a-zA-Z])*@([0-9a-zA-Z][-\w]*[0-9a-zA-Z]\.)+[a-zA-Z]{2,9})$">
<br>
<input class="hide" type="password" id="password" name="password" value="Password" title="Password" required aria-required="true" pattern="\S{7,}">
<br>
<input id="submit" type="submit" value="Submit" name="posted">
<div class="clear"></div>
</form>
</div>
</body>
</html>
CSS
/* CSS Document */
body{
background:#111 url(images/bg-pattern.png) repeat;
}
a img, input{
outline:none;
}
#form-container{
width:588px;
margin:auto;
margin-top:10%;
border:1px solid #000;
background:#1d1d1d;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
font-family:'Myriad Pro', Arial, Helvetica, sans-serif;
font-weight:500;
-moz-box-shadow: 0 0 1px 1px rgba(0, 0, 0, .7);
-webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, .7);
box-shadow: 0 0 1px 1px rgba(0, 0, 0, .7);
}
#form-header{
font-size:24px;
color:#e0e0e0;
text-transform:uppercase;
height:30px;
background: #111111;
border-bottom:1px solid #000;
padding: 20px 30px;
border-top-left-radius:10px;
border-top-right-radius:10px;
-moz-border-top-left-radius:10px;
-moz-border-top-right-radius:10px;
-webkit-border-top-left-radius:10px;
-webkit-border-top-right-radius:10px;
-moz-box-shadow: inset 0px 2px 1px #2a2a2a;
-webkit-box-shadow: inset 0px 2px 1px 2a2a2a;
box-shadow: inset 0px 2px 1px 2a2a2a;
/* Firefox 3.6+ */
background: -moz-linear-gradient(100% 100% 90deg, #101010, #181818);
/* Safari 4-5, Chrome 1-9 */
/* -webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*) */
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#181818), to(#101010));
/* Safari 5.1+, Chrome 10+ */
background: -webkit-linear-gradient(#181818, #101010);
/* Opera 11.10+ */
background: -o-linear-gradient(#101010, #181818);
/* for IE */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#181818', endColorstr='#101010');
}
form{
padding:30px;
}
form input[type=text], form input[type=password]{
background:#0e0e0e;
border:1px solid #000;
padding: 10px;
color:#444444;
font-size:24px;
margin-bottom:20px;
font-weight:bold;
width:510px;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-moz-box-shadow: 1px 1px #343434, inset 5px 5px 5px black;
-webkit-box-shadow: 1px 1px #343434, inset 5px 5px 5px black;
box-shadow: 1px 1px #343434, inset 5px 5px 5px black;
/* Firefox 3.6+ */
background: -moz-linear-gradient(100% 100% 90deg, #171717, #0d0d0d);
/* Safari 4-5, Chrome 1-9 */
/* -webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*) */
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0d0d0d), to(#171717));
/* Safari 5.1+, Chrome 10+ */
background: -webkit-linear-gradient(#0d0d0d, #171717);
/* Opera 11.10+ */
background: -o-linear-gradient(#171717, #0d0d0d);
/* for IE */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0d0d0d', endColorstr='#171717');
}
form #submit{
float:right;
background:#111 url(images/submit-bubble.png) center left no-repeat;
color:#e0e0e0;
border:1px solid #000;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
padding:8px 25px;
font-family:'Myriad Pro', Arial, Helvetica, sans-serif;
font-size: 24px;
padding-left: 40px;
-moz-box-shadow: inset 0px 2px 1px #2a2a2a;
-webkit-box-shadow: inset 0px 2px 1px #2a2a2a;
box-shadow: inset 0px 2px 1px 2a2a2a;
cursor:pointer;
}
form #submit:hover:active{
background:#111 url(images/submit-bubble-click.png) center left no-repeat;
color:#FFF;
-moz-box-shadow: 1px 1px #343434, inset 2px 2px 1px #000;
-webkit-box-shadow: 1px 1px #343434, inset 2px 2px 1px #000;
box-shadow: 1px 1px #343434, inset 2px 2px 1px #000;
padding-top:9px;
padding-bottom:7px;
}
input:focus:invalid {
-moz-box-shadow: 0 0 3px 2px #ff2400, inset 5px 5px 5px black;
-webkit-box-shadow: 0 0 3px 2px #ff2400, inset 5px 5px 5px black;
box-shadow: 0 0 3px 2px #ff2400, inset 5px 5px 5px black;
/* Firefox 3.6+ */
background: -moz-linear-gradient(100% 100% 90deg, #171717, #0d0d0d);
/* Safari 4-5, Chrome 1-9 */
/* -webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*) */
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0d0d0d), to(#171717));
/* Safari 5.1+, Chrome 10+ */
background: -webkit-linear-gradient(#0d0d0d, #171717);
/* Opera 11.10+ */
background: -o-linear-gradient(#0d0d0d, #171717);
}
input:focus:valid {
-moz-box-shadow: 0 0 3px 2px #24a900, inset 5px 5px 5px black;
-webkit-box-shadow: 0 0 3px 2px #24a900, inset 5px 5px 5px black;
box-shadow: 0 0 3px 2px #24a900, inset 5px 5px 5px black;
/* Firefox 3.6+ */
background: -moz-linear-gradient(100% 100% 90deg, #171717, #0d0d0d);
/* Safari 4-5, Chrome 1-9 */
/* -webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*) */
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#171717), to(#0d0d0d));
/* Safari 5.1+, Chrome 10+ */
background: -webkit-linear-gradient(#171717, #0d0d0d);
/* Opera 11.10+ */
background: -o-linear-gradient(#0d0d0d, #171717);
}
/* common classes */
.float-left{
float:left;
}
.float-right{
float:right;
}
.clear{
margin:0;
padding:0;
clear:both;
}
jQuery/Javascript
// JavaScript Document
$=jQuery.noConflict();
$(document).ready(function(){
//add .hide class to all input field you want the watermark
$(".hide").watermark();
// Center vertically
var div = $("#form-container");
div.css("margin-top" , ( $(window).height() - div.height() ) / 2+$(window).scrollTop() + "px");
});
jQuery.fn.watermark = function(){
$(this).focus(function() {
$(this).filter(function() {
// Check to see if we have a blank field or the default text
return $(this).val() === "" || $(this).val() === $(this).attr("title") || $(this).val() === "Your message here...";
}).val("")/*.css("color", "#808080")*/;
});
// When we click off of the field, we expect it to replace the watermark,
// unless we have entered text
$(this).blur(function() {
$(this).filter(function() {
// Check to see if the field is blank
return $(this).val() === "";
})/*.css("color", "#d0d0d0")*/.val($(this).attr("title"));
});
}
Always feel free to comment if you have any questions 
nice job dude!
very helpful for the amature like me!
Thanks!
hey! nice!! check us out too, all about DreamWeaver and computers! later!!
Great tutorial!
Thanks!
nice post!
i cant share this link : https://web.tutremix.com/tutorials/psd-to-html5-css3-conversion-tutorial-for-beginners
am i doing it wrong ?
Excellent tutorial , its really useful for fresh html5 developers
[MARKED AS SPAM BY ANTISPAM BEE | CSS Hack]
Thanks and good blog.
Really nice tutorial!! Very useful!
Great tutorial!
I like it.