Read Time:
12 min
Today we're going to code up Orman Clark's Elegant Login Form using CSS3 and HTML5, plus some of Dan Eden's CSS animations to embellish the experience.
This tutorial assumes a certain understanding of HTML/CSS from you; we're going to be moving pretty fast. OK, let's go!
Step 1: The HTML Markup
We start out by linking to our stylesheets within the head of our document. We have a reset stylesheet to bring everything back to zero, Dan Eden's animate.css which we'll use for some fun animation later on, and our own styles.css where we'll carry our most of our work.
1 |
|
2 |
<!doctype html>
|
3 |
|
4 |
<head>
|
5 |
|
6 |
<!-- Basics -->
|
7 |
|
8 |
<meta charset="utf-8"> |
9 |
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> |
10 |
|
11 |
<title>Login</title> |
12 |
|
13 |
<!-- CSS -->
|
14 |
|
15 |
<link rel="stylesheet" href="css/reset.css"> |
16 |
<link rel="stylesheet" href="css/animate.css"> |
17 |
<link rel="stylesheet" href="css/styles.css"> |
18 |
|
19 |
</head>
|
The meat of the HTML comprises a container, a form and some inputs.
1 |
|
2 |
<!-- Main HTML -->
|
3 |
|
4 |
<body>
|
5 |
|
6 |
<!-- Begin Page Content -->
|
7 |
|
8 |
<div id="container"> |
9 |
|
10 |
<form>
|
11 |
|
12 |
<label for="username">Username:</label> |
13 |
|
14 |
<input type="text" id="username" name="username"> |
15 |
|
16 |
<label for="password">Password:</label> |
17 |
|
18 |
<p><a href="#">Forgot your password?</a></p> |
19 |
|
20 |
<input type="password" id="password" name="password"> |
21 |
|
22 |
<div id="lower"> |
23 |
|
24 |
<input type="checkbox"><label class="check" for="checkbox">Keep me logged in</label> |
25 |
|
26 |
<input type="submit" value="Login"> |
27 |
|
28 |
</div><!--/ lower--> |
29 |
|
30 |
</form>
|
31 |
|
32 |
</div><!--/ container--> |
33 |
|
34 |
|
35 |
<!-- End Page Content -->
|
36 |
|
37 |
</body>
|
38 |
|
39 |
</html>
|
Step 3: Positioning the Elements
Now that we've written our HTML markup, we can move on to the css. We'll first specify the basics, positioning our container element in the center of the page.
1 |
|
2 |
|
3 |
/* Basics */
|
4 |
|
5 |
html, body { |
6 |
width: 100%; |
7 |
height: 100%; |
8 |
font-family: "Helvetica Neue", Helvetica, sans-serif; |
9 |
color: #444; |
10 |
-webkit-font-smoothing: antialiased; |
11 |
background: #f0f0f0; |
12 |
|
13 |
}
|
14 |
|
15 |
#container { |
16 |
position: fixed; |
17 |
width: 340px; |
18 |
height: 280px; |
19 |
top: 50%; |
20 |
left: 50%; |
21 |
margin-top: -140px; |
22 |
margin-left: -170px; |
23 |
}
|
Now we'll add some structural style to the inputs and other elements:
1 |
|
2 |
|
3 |
form { |
4 |
margin: 0 auto; |
5 |
margin-top: 20px; |
6 |
}
|
7 |
|
8 |
label { |
9 |
color: #555; |
10 |
display: inline-block; |
11 |
margin-left: 18px; |
12 |
padding-top: 10px; |
13 |
font-size: 14px; |
14 |
}
|
15 |
|
16 |
p a { |
17 |
font-size: 11px; |
18 |
color: #aaa; |
19 |
float: right; |
20 |
margin-top: -13px; |
21 |
margin-right: 20px; |
22 |
}
|
23 |
|
24 |
p a:hover { |
25 |
color: #555; |
26 |
}
|
27 |
|
28 |
input { |
29 |
font-family: "Helvetica Neue", Helvetica, sans-serif; |
30 |
font-size: 12px; |
31 |
outline: none; |
32 |
}
|
33 |
|
34 |
input[type=text], |
35 |
input[type=password] { |
36 |
color: #777; |
37 |
padding-left: 10px; |
38 |
margin: 10px; |
39 |
margin-top: 12px; |
40 |
margin-left: 18px; |
41 |
width: 290px; |
42 |
height: 35px; |
43 |
}
|
44 |
|
45 |
#lower { |
46 |
background: #ecf2f5; |
47 |
width: 100%; |
48 |
height: 69px; |
49 |
margin-top: 20px; |
50 |
}
|
51 |
|
52 |
input[type=checkbox] { |
53 |
margin-left: 20px; |
54 |
margin-top: 30px; |
55 |
}
|
56 |
|
57 |
.check { |
58 |
margin-left: 3px; |
59 |
}
|
60 |
|
61 |
input[type=submit] { |
62 |
float: right; |
63 |
margin-right: 20px; |
64 |
margin-top: 20px; |
65 |
width: 80px; |
66 |
height: 30px; |
67 |
}
|
Step 4: Styling the Elements
The elements are positioned perfectly. Now it's time to make them look beautiful! First, we'll style the container by giving it subtly rounded corners and a box shadow for depth.
1 |
|
2 |
|
3 |
#container { |
4 |
position: fixed; |
5 |
width: 340px; |
6 |
height: 280px; |
7 |
top: 50%; |
8 |
left: 50%; |
9 |
margin-top: -140px; |
10 |
margin-left: -170px; |
11 |
background: #fff; |
12 |
border-radius: 3px; |
13 |
border: 1px solid #ccc; |
14 |
box-shadow: 0 1px 2px rgba(0, 0, 0, .1); |
15 |
}
|
Then the inputs get similar treatment, with some border radius and box shadows. We'll give the submit button a gradient background, with a solid background-color to cater for IE9 and earlier. Notice we're targeting each input type individually with css attribute selectors.
1 |
|
2 |
|
3 |
form { |
4 |
margin: 0 auto; |
5 |
margin-top: 20px; |
6 |
}
|
7 |
|
8 |
label { |
9 |
color: #555; |
10 |
display: inline-block; |
11 |
margin-left: 18px; |
12 |
padding-top: 10px; |
13 |
font-size: 14px; |
14 |
}
|
15 |
|
16 |
p a { |
17 |
font-size: 11px; |
18 |
color: #aaa; |
19 |
float: right; |
20 |
margin-top: -13px; |
21 |
margin-right: 20px; |
22 |
}
|
23 |
|
24 |
p a:hover { |
25 |
color: #555; |
26 |
}
|
27 |
|
28 |
input { |
29 |
font-family: "Helvetica Neue", Helvetica, sans-serif; |
30 |
font-size: 12px; |
31 |
outline: none; |
32 |
}
|
33 |
|
34 |
input[type=text], |
35 |
input[type=password] { |
36 |
color: #777; |
37 |
padding-left: 10px; |
38 |
margin: 10px; |
39 |
margin-top: 12px; |
40 |
margin-left: 18px; |
41 |
width: 290px; |
42 |
height: 35px; |
43 |
border: 1px solid #c7d0d2; |
44 |
border-radius: 2px; |
45 |
box-shadow: inset 0 1.5px 3px rgba(190, 190, 190, .4), 0 0 0 5px #f5f7f8; |
46 |
}
|
47 |
|
48 |
#lower { |
49 |
background: #ecf2f5; |
50 |
width: 100%; |
51 |
height: 69px; |
52 |
margin-top: 20px; |
53 |
box-shadow: inset 0 1px 1px #fff; |
54 |
border-top: 1px solid #ccc; |
55 |
border-bottom-right-radius: 3px; |
56 |
border-bottom-left-radius: 3px; |
57 |
}
|
58 |
|
59 |
input[type=checkbox] { |
60 |
margin-left: 20px; |
61 |
margin-top: 30px; |
62 |
}
|
63 |
|
64 |
.check { |
65 |
margin-left: 3px; |
66 |
font-size: 11px; |
67 |
color: #444; |
68 |
text-shadow: 0 1px 0 #fff; |
69 |
}
|
70 |
|
71 |
input[type=submit] { |
72 |
float: right; |
73 |
margin-right: 20px; |
74 |
margin-top: 20px; |
75 |
width: 80px; |
76 |
height: 30px; |
77 |
font-size: 14px; |
78 |
font-weight: bold; |
79 |
color: #fff; |
80 |
background-color: #acd6ef; /*IE fallback*/ |
81 |
background-image: -webkit-gradient(linear, left top, left bottom, from(#acd6ef), to(#6ec2e8)); |
82 |
background-image: -moz-linear-gradient(top left 90deg, #acd6ef 0%, #6ec2e8 100%); |
83 |
background-image: linear-gradient(top left 90deg, #acd6ef 0%, #6ec2e8 100%); |
84 |
border-radius: 30px; |
85 |
border: 1px solid #66add6; |
86 |
box-shadow: 0 1px 2px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .5); |
87 |
cursor: pointer; |
88 |
}
|
Next, to aid user feedback, we could do with some hover and active states:
1 |
|
2 |
|
3 |
form { |
4 |
margin: 0 auto; |
5 |
margin-top: 20px; |
6 |
}
|
7 |
|
8 |
label { |
9 |
color: #555; |
10 |
display: inline-block; |
11 |
margin-left: 18px; |
12 |
padding-top: 10px; |
13 |
font-size: 14px; |
14 |
}
|
15 |
|
16 |
p a { |
17 |
font-size: 11px; |
18 |
color: #aaa; |
19 |
float: right; |
20 |
margin-top: -13px; |
21 |
margin-right: 20px; |
22 |
-webkit-transition: all .4s ease; |
23 |
-moz-transition: all .4s ease; |
24 |
transition: all .4s ease; |
25 |
}
|
26 |
|
27 |
p a:hover { |
28 |
color: #555; |
29 |
}
|
30 |
|
31 |
input { |
32 |
font-family: "Helvetica Neue", Helvetica, sans-serif; |
33 |
font-size: 12px; |
34 |
outline: none; |
35 |
}
|
36 |
|
37 |
input[type=text], |
38 |
input[type=password] { |
39 |
color: #777; |
40 |
padding-left: 10px; |
41 |
margin: 10px; |
42 |
margin-top: 12px; |
43 |
margin-left: 18px; |
44 |
width: 290px; |
45 |
height: 35px; |
46 |
border: 1px solid #c7d0d2; |
47 |
border-radius: 2px; |
48 |
box-shadow: inset 0 1.5px 3px rgba(190, 190, 190, .4), 0 0 0 5px #f5f7f8; |
49 |
-webkit-transition: all .4s ease; |
50 |
-moz-transition: all .4s ease; |
51 |
transition: all .4s ease; |
52 |
}
|
53 |
|
54 |
input[type=text]:hover, |
55 |
input[type=password]:hover { |
56 |
border: 1px solid #b6bfc0; |
57 |
box-shadow: inset 0 1.5px 3px rgba(190, 190, 190, .7), 0 0 0 5px #f5f7f8; |
58 |
}
|
59 |
|
60 |
input[type=text]:focus, |
61 |
input[type=password]:focus { |
62 |
border: 1px solid #a8c9e4; |
63 |
box-shadow: inset 0 1.5px 3px rgba(190, 190, 190, .4), 0 0 0 5px #e6f2f9; |
64 |
}
|
65 |
|
66 |
#lower { |
67 |
background: #ecf2f5; |
68 |
width: 100%; |
69 |
height: 69px; |
70 |
margin-top: 20px; |
71 |
box-shadow: inset 0 1px 1px #fff; |
72 |
border-top: 1px solid #ccc; |
73 |
border-bottom-right-radius: 3px; |
74 |
border-bottom-left-radius: 3px; |
75 |
}
|
76 |
|
77 |
input[type=checkbox] { |
78 |
margin-left: 20px; |
79 |
margin-top: 30px; |
80 |
}
|
81 |
|
82 |
.check { |
83 |
margin-left: 3px; |
84 |
font-size: 11px; |
85 |
color: #444; |
86 |
text-shadow: 0 1px 0 #fff; |
87 |
}
|
88 |
|
89 |
input[type=submit] { |
90 |
float: right; |
91 |
margin-right: 20px; |
92 |
margin-top: 20px; |
93 |
width: 80px; |
94 |
height: 30px; |
95 |
font-size: 14px; |
96 |
font-weight: bold; |
97 |
color: #fff; |
98 |
background-color: #acd6ef; /*IE fallback*/ |
99 |
background-image: -webkit-gradient(linear, left top, left bottom, from(#acd6ef), to(#6ec2e8)); |
100 |
background-image: -moz-linear-gradient(top left 90deg, #acd6ef 0%, #6ec2e8 100%); |
101 |
background-image: linear-gradient(top left 90deg, #acd6ef 0%, #6ec2e8 100%); |
102 |
border-radius: 30px; |
103 |
border: 1px solid #66add6; |
104 |
box-shadow: 0 1px 2px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .5); |
105 |
cursor: pointer; |
106 |
}
|
107 |
|
108 |
input[type=submit]:hover { |
109 |
background-image: -webkit-gradient(linear, left top, left bottom, from(#b6e2ff), to(#6ec2e8)); |
110 |
background-image: -moz-linear-gradient(top left 90deg, #b6e2ff 0%, #6ec2e8 100%); |
111 |
background-image: linear-gradient(top left 90deg, #b6e2ff 0%, #6ec2e8 100%); |
112 |
}
|
113 |
|
114 |
input[type=submit]:active { |
115 |
background-image: -webkit-gradient(linear, left top, left bottom, from(#6ec2e8), to(#b6e2ff)); |
116 |
background-image: -moz-linear-gradient(top left 90deg, #6ec2e8 0%, #b6e2ff 100%); |
117 |
background-image: linear-gradient(top left 90deg, #6ec2e8 0%, #b6e2ff 100%); |
118 |
}
|
Step 5: The Finishing Touches
Our login form looks good, but let's push the boat out and add to the experience. We're now going to add some CSS animations and transitions to polish it off. We've already referenced Dan Eden's animate.css in our head - we can now make use of his predefined animation types, such as bounceIn, along with the appropriate browser prefixes.
First, the container animation:
1 |
|
2 |
#container { |
3 |
position: fixed; |
4 |
width: 340px; |
5 |
height: 280px; |
6 |
top: 50%; |
7 |
left: 50%; |
8 |
margin-top: -140px; |
9 |
margin-left: -170px; |
10 |
background: #fff; |
11 |
border-radius: 3px; |
12 |
border: 1px solid #ccc; |
13 |
box-shadow: 0 1px 2px rgba(0, 0, 0, .1); |
14 |
-webkit-animation-name: bounceIn; |
15 |
-webkit-animation-fill-mode: both; |
16 |
-webkit-animation-duration: 1s; |
17 |
-webkit-animation-iteration-count: 1; |
18 |
-webkit-animation-timing-function: linear; |
19 |
-moz-animation-name: bounceIn; |
20 |
-moz-animation-fill-mode: both; |
21 |
-moz-animation-duration: 1s; |
22 |
-moz-animation-iteration-count: 1; |
23 |
-moz-animation-timing-function: linear; |
24 |
animation-name: bounceIn; |
25 |
animation-fill-mode: both; |
26 |
animation-duration: 1s; |
27 |
animation-iteration-count: 1; |
28 |
animation-timing-function: linear; |
29 |
}
|
Next, transitions for the interactive elements:
1 |
|
2 |
|
3 |
p a { |
4 |
font-size: 11px; |
5 |
color: #aaa; |
6 |
float: right; |
7 |
margin-top: -13px; |
8 |
margin-right: 20px; |
9 |
-webkit-transition: all .4s ease; |
10 |
-moz-transition: all .4s ease; |
11 |
transition: all .4s ease; |
12 |
}
|
13 |
|
14 |
input[type=text], |
15 |
input[type=password] { |
16 |
color: #777; |
17 |
padding-left: 10px; |
18 |
margin: 10px; |
19 |
margin-top: 12px; |
20 |
margin-left: 18px; |
21 |
width: 290px; |
22 |
height: 35px; |
23 |
border: 1px solid #c7d0d2; |
24 |
border-radius: 2px; |
25 |
box-shadow: inset 0 1.5px 3px rgba(190, 190, 190, .4), 0 0 0 5px #f5f7f8; |
26 |
-webkit-transition: all .4s ease; |
27 |
-moz-transition: all .4s ease; |
28 |
transition: all .4s ease; |
29 |
}
|
Step 6: Final Code
We're done! Below you'll find the final code for our Elegant Login Form, which should give you something looking very similar to this:
HTML:
1 |
|
2 |
<!doctype html>
|
3 |
|
4 |
<head>
|
5 |
|
6 |
<!-- Basics -->
|
7 |
|
8 |
<meta charset="utf-8"> |
9 |
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> |
10 |
|
11 |
<title>Login</title> |
12 |
|
13 |
<!-- CSS -->
|
14 |
|
15 |
<link rel="stylesheet" href="css/reset.css"> |
16 |
<link rel="stylesheet" href="css/animate.css"> |
17 |
<link rel="stylesheet" href="css/styles.css"> |
18 |
|
19 |
</head>
|
20 |
|
21 |
<!-- Main HTML -->
|
22 |
|
23 |
<body>
|
24 |
|
25 |
<!-- Begin Page Content -->
|
26 |
|
27 |
<div id="container"> |
28 |
|
29 |
<form>
|
30 |
|
31 |
<label for="username">Username:</label> |
32 |
|
33 |
<input type="text" id="username" name="username"> |
34 |
|
35 |
<label for="password">Password:</label> |
36 |
|
37 |
<p><a href="#">Forgot your password?</a></p> |
38 |
|
39 |
<input type="password" id="password" name="password"> |
40 |
|
41 |
<div id="lower"> |
42 |
|
43 |
<input type="checkbox"><label class="check" for="checkbox">Keep me logged in</label> |
44 |
|
45 |
<input type="submit" value="Login"> |
46 |
|
47 |
</div><!--/ lower--> |
48 |
|
49 |
</form>
|
50 |
|
51 |
</div><!--/ container--> |
52 |
|
53 |
|
54 |
|
55 |
<!-- End Page Content -->
|
56 |
|
57 |
</body>
|
58 |
|
59 |
</html>
|
CSS:
1 |
|
2 |
|
3 |
/* Basics */
|
4 |
|
5 |
html, body { |
6 |
width: 100%; |
7 |
height: 100%; |
8 |
font-family: "Helvetica Neue", Helvetica, sans-serif; |
9 |
color: #444; |
10 |
-webkit-font-smoothing: antialiased; |
11 |
background: #f0f0f0; |
12 |
|
13 |
}
|
14 |
|
15 |
#container { |
16 |
position: fixed; |
17 |
width: 340px; |
18 |
height: 280px; |
19 |
top: 50%; |
20 |
left: 50%; |
21 |
margin-top: -140px; |
22 |
margin-left: -170px; |
23 |
background: #fff; |
24 |
border-radius: 3px; |
25 |
border: 1px solid #ccc; |
26 |
box-shadow: 0 1px 2px rgba(0, 0, 0, .1); |
27 |
-webkit-animation-name: bounceIn; |
28 |
-webkit-animation-fill-mode: both; |
29 |
-webkit-animation-duration: 1s; |
30 |
-webkit-animation-iteration-count: 1; |
31 |
-webkit-animation-timing-function: linear; |
32 |
-moz-animation-name: bounceIn; |
33 |
-moz-animation-fill-mode: both; |
34 |
-moz-animation-duration: 1s; |
35 |
-moz-animation-iteration-count: 1; |
36 |
-moz-animation-timing-function: linear; |
37 |
animation-name: bounceIn; |
38 |
animation-fill-mode: both; |
39 |
animation-duration: 1s; |
40 |
animation-iteration-count: 1; |
41 |
animation-timing-function: linear; |
42 |
}
|
43 |
|
44 |
form { |
45 |
margin: 0 auto; |
46 |
margin-top: 20px; |
47 |
}
|
48 |
|
49 |
label { |
50 |
color: #555; |
51 |
display: inline-block; |
52 |
margin-left: 18px; |
53 |
padding-top: 10px; |
54 |
font-size: 14px; |
55 |
}
|
56 |
|
57 |
p a { |
58 |
font-size: 11px; |
59 |
color: #aaa; |
60 |
float: right; |
61 |
margin-top: -13px; |
62 |
margin-right: 20px; |
63 |
-webkit-transition: all .4s ease; |
64 |
-moz-transition: all .4s ease; |
65 |
transition: all .4s ease; |
66 |
}
|
67 |
|
68 |
p a:hover { |
69 |
color: #555; |
70 |
}
|
71 |
|
72 |
input { |
73 |
font-family: "Helvetica Neue", Helvetica, sans-serif; |
74 |
font-size: 12px; |
75 |
outline: none; |
76 |
}
|
77 |
|
78 |
input[type=text], |
79 |
input[type=password] { |
80 |
color: #777; |
81 |
padding-left: 10px; |
82 |
margin: 10px; |
83 |
margin-top: 12px; |
84 |
margin-left: 18px; |
85 |
width: 290px; |
86 |
height: 35px; |
87 |
border: 1px solid #c7d0d2; |
88 |
border-radius: 2px; |
89 |
box-shadow: inset 0 1.5px 3px rgba(190, 190, 190, .4), 0 0 0 5px #f5f7f8; |
90 |
-webkit-transition: all .4s ease; |
91 |
-moz-transition: all .4s ease; |
92 |
transition: all .4s ease; |
93 |
}
|
94 |
|
95 |
input[type=text]:hover, |
96 |
input[type=password]:hover { |
97 |
border: 1px solid #b6bfc0; |
98 |
box-shadow: inset 0 1.5px 3px rgba(190, 190, 190, .7), 0 0 0 5px #f5f7f8; |
99 |
}
|
100 |
|
101 |
input[type=text]:focus, |
102 |
input[type=password]:focus { |
103 |
border: 1px solid #a8c9e4; |
104 |
box-shadow: inset 0 1.5px 3px rgba(190, 190, 190, .4), 0 0 0 5px #e6f2f9; |
105 |
}
|
106 |
|
107 |
#lower { |
108 |
background: #ecf2f5; |
109 |
width: 100%; |
110 |
height: 69px; |
111 |
margin-top: 20px; |
112 |
box-shadow: inset 0 1px 1px #fff; |
113 |
border-top: 1px solid #ccc; |
114 |
border-bottom-right-radius: 3px; |
115 |
border-bottom-left-radius: 3px; |
116 |
}
|
117 |
|
118 |
input[type=checkbox] { |
119 |
margin-left: 20px; |
120 |
margin-top: 30px; |
121 |
}
|
122 |
|
123 |
.check { |
124 |
margin-left: 3px; |
125 |
font-size: 11px; |
126 |
color: #444; |
127 |
text-shadow: 0 1px 0 #fff; |
128 |
}
|
129 |
|
130 |
input[type=submit] { |
131 |
float: right; |
132 |
margin-right: 20px; |
133 |
margin-top: 20px; |
134 |
width: 80px; |
135 |
height: 30px; |
136 |
font-size: 14px; |
137 |
font-weight: bold; |
138 |
color: #fff; |
139 |
background-color: #acd6ef; /*IE fallback*/ |
140 |
background-image: -webkit-gradient(linear, left top, left bottom, from(#acd6ef), to(#6ec2e8)); |
141 |
background-image: -moz-linear-gradient(top left 90deg, #acd6ef 0%, #6ec2e8 100%); |
142 |
background-image: linear-gradient(top left 90deg, #acd6ef 0%, #6ec2e8 100%); |
143 |
border-radius: 30px; |
144 |
border: 1px solid #66add6; |
145 |
box-shadow: 0 1px 2px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .5); |
146 |
cursor: pointer; |
147 |
}
|
148 |
|
149 |
input[type=submit]:hover { |
150 |
background-image: -webkit-gradient(linear, left top, left bottom, from(#b6e2ff), to(#6ec2e8)); |
151 |
background-image: -moz-linear-gradient(top left 90deg, #b6e2ff 0%, #6ec2e8 100%); |
152 |
background-image: linear-gradient(top left 90deg, #b6e2ff 0%, #6ec2e8 100%); |
153 |
}
|
154 |
|
155 |
input[type=submit]:active { |
156 |
background-image: -webkit-gradient(linear, left top, left bottom, from(#6ec2e8), to(#b6e2ff)); |
157 |
background-image: -moz-linear-gradient(top left 90deg, #6ec2e8 0%, #b6e2ff 100%); |
158 |
background-image: linear-gradient(top left 90deg, #6ec2e8 0%, #b6e2ff 100%); |
159 |
}
|
Conclusion
I hope you enjoyed following along as we created something that not only looks good, but functions beautifully and has that little extra 'something'. Thanks for reading!
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Sign up
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.
