Making A CSS3 Login Panel

Making A CSS3 Login Panel by FSherratt

June 21, 2010, 12:00 am
Filed under: Software, Tutorials, Websites | Tags: -radius, border, box-shadow, Cascading Style Sheets, columns, css, CSS3, form, forms, html, html forms, Login, Markup, Moder Browsers, moz, Opera, Panel, Quick, Sans-serif, simple, Source Files, Style Sheets, Typeface, webkit

CSS3 Login Panel

Today i’m going to show you how you can use CSS3 make the login panel shown below.
I’m not going to go into to much detail about the code, if you’d like some more information of CSS3 you can look at this article here CSS3 Guide. You can download the source files for it here. Download the source files.

Basic Setup

First things first, lets start off with the markup, just some very simple code to just set things out nicely for our CSS to position later. Theres nothing special about this. Once you’ve added this you should have just a simple list of elements looking very plain and boring.

<div id="container">
<h1>
Login Here
h1>
<div>
<form>
<label for="user">Username</label>
<input type="text" id="user"/>
<label for="pass">Password</label>
<input type="password" id="pass"/>
<br/>
<input type="submit" value="login">
<br/>
form>
<a href="#">Register</a>
<a href="#">Recover Your Account</a>
<p>
Vestibulum mollis mauris enim.
Morbi euismod magna ac lorem
rutrum elementum. Donec viverra
auctor lobortis. Pellentesque eu
est a nulla placerat dignissim.
Morbi a enim in magna semper bibendum.
Etiam scelerisque, nunc ac egestas
consequat.
</p>
</div>
</div>

Login Panel in incompatible browser

The only thing to remember when writing the markup is what it will look like, if you have a browser thats incompatible with certain features of the CSS you still want it to look good. So this is what our login panel will look like in an incompatible browser. In this case Opera.

Positioning the elements

Now you’ve added the HTML were going to start positioning the elements. First were going make the basic shape of the panel by shaping the container and the body.

body {
font-family:arial, sans-serif;
margin:0;
padding:0;
}
#container {
margin:200px auto;
width:500px;
}

This should place all the elements in the center of the page 200px off the top.
Next were going to add the columns. Again some simple css nothing complicated.

#container div {
column-count:2;
column-gap:40px;
column-rule:2px solid #F3F3F3;
-moz-column-count:2;
-moz-column-gap:40px;
-moz-column-rule:2px solid #F3F3F3;
-webkit-column-count:2;
-webkit-column-gap:40px;
-webkit-column-rule:2px solid #F3F3F3;
}

This should split the div into two columns. There may be some overlap of the text and form between both sides but we’ll fix that later  we’ll fix that when we look at the size and the spacing of the form and text. Just to make sure nothing accidentally slips over to the opposite side.

Everything should now be in about the right position. Buts it’s a bit dull, so next where going to work on the appearance.

Appearance – Background

The #container is holding everything in the right place nicely but thats not it’s only job, its also going to be given a nice gradient background and double border.

#container {
background:#4E7186;
background: -moz-linear-gradient(top left, #546C7C, #4E7186);
background: -webkit-gradient(linear, left top, right bottom, from(#546C7C), to(#4E7186));
border:5px solid #193441;
border-radius:30px;
-moz-border-radius:30px;
-webkit-border-radius:30px;
box-shadow:4px 4px 6px #666, 2px 2px #F3F3F3 inset, -2px -2px #F3F3F3 inset, 2px -2px #F3F3F3 inset, -2px 2px #F3F3F3 inset;
-moz-box-shadow:4px 4px 6px #666, 2px 2px #F3F3F3 inset, -2px -2px #F3F3F3 inset, 2px -2px #F3F3F3 inset, -2px 2px #F3F3F3 inset;
-webkit-box-shadow:4px 4px 6px #999, 2px 2px #F3F3F3 inset, -2px -2px #F3F3F3 inset, 2px -2px #F3F3F3 inset, -2px 2px #F3F3F3 inset;
color:#FAFAFA;
padding:0 25px 25px 25px;
}

The best way i’ve found for adding a double border is to add a box-shadow with no blur, unfortunately to get it to go equally round the entire shape you have to add the code to each corner which means repeating the code 4 times. I’ve also added a subtle gradient to the background and curved to corners. I’ve also set the default colour for the panel to a very light grey and finally added a slight padding on the inside to keep a nice clean edge.

Appearance – Header

The next bit were going to work on is the Header, this has got a custom font and a bit of styling and spacing to make it fit perfectly with the design. The first thing were going to look at is the custom font. This is a font called ‘Bebas‘ which I downloaded off font squirrel. I’ve included it in the source files.

@font-face {
font-family: 'BebasRegular';
src: url('BEBAS___-webfont.eot');
src: local('?'), url('BEBAS___-webfont.woff') format('woff'),
url('BEBAS___-webfont.ttf') format('truetype'),
url('BEBAS___-webfont.svg#webfont') format('svg');
font-weight: normal;
font-style: normal;
}

Were then going to add some style to the Header.

h1 {
font-family:'BebasRegular', sans-serif;
font-size:90px;
margin:30px 0;
letter-spacing:2px;
}

I’ve simply changed the font-family to include the custom font, increased the font-size to 90px added some letter-spacing to just spread things out and added a slight margin to the top and bottom of the text.

Appearance – Form

We’re now going to be working on the login form. For this were going to be using attribute selectors. Just a quick warning about these although they work fine in modern browsers they are incompatible with older browsers. So just as a backup i would usually use a class as well to eliminate this problem.
We’re first going to style the input fields so were going to select the type, because theres two different types as were using a password field as well as a text field we’re going to add the CSS selector twice.

form input[type*=text],form input[type*=password] {
border:3px #EAEAEA solid;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
margin:10px 0;
height:20px;
width:175px;
}

This time we’re going to style the fields when there selected to help indicate their state.

form input[type*=text]:focus,form input[type*=password]:focus {
border:3px #C3C3C3 solid;
outline:none;
}

Next we’re going to style the submit button, when its both active and inactive.

form input[type*=submit] {
margin:5px 80px 7px 0;
background:#F3F3F3;
background: -moz-linear-gradient(top, #F3F3F3 50%, #AAA);
background: -webkit-gradient(linear, left top, left bottom, from(#F3F3F3), color-stop(0.5, #F3F3F3), to(#AAA));
border:3px solid #193441;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
color:#193441;
font-size:15px;
height:30px;
width:100px; }
form input[type*=submit]:active {
box-shadow:1px 1px 3px #1E3E4E inset;
-moz-box-shadow:1px 1px 3px #1E3E4E inset;
-webkit-box-shadow:1px 1px 3px #1E3E4E inset; }

Finally were going to add some style to the field labels.

</pre>
form label {
font-size:18px;
letter-spacing:2px;
line-height:5px;
padding-right:86px;
}

Appearance – Everything else

This is the final bit, i shouldn’t have to explain the rest of the code, it just some very basic formatting to finish off the other elements. Add this and then you should be done.

a {
color:#F3F3F3;
font-size:14px;
padding:0 5px;
text-decoration:none;
}
a:hover {
color:#D3D3D3;
}
p {
padding-left:20px;
text-align:left;
font-size:16px;
}

All done

Final CSS

@font-face {
font-family: 'BebasRegular';
src: url('BEBAS___-webfont.eot');
src: local('?'), url('BEBAS___-webfont.woff') format('woff'),
url('BEBAS___-webfont.ttf') format('truetype'),
url('BEBAS___-webfont.svg#webfont') format('svg');
font-weight: normal;
font-style: normal;
}
body {
font-family:arial, sans-serif;
margin:0;
padding:0;
}
#container {
background:#4E7186;
background: -moz-linear-gradient(top left, #546C7C, #4E7186);
background: -webkit-gradient(linear, left top, right bottom, from(#546C7C), to(#4E7186));
border:5px solid #193441;
border-radius:30px;
-moz-border-radius:30px;
-webkit-border-radius:30px;
box-shadow:4px 4px 6px #666, 2px 2px #F3F3F3 inset, -2px -2px #F3F3F3 inset, 2px -2px #F3F3F3 inset, -2px 2px #F3F3F3 inset;
-moz-box-shadow:4px 4px 6px #666, 2px 2px #F3F3F3 inset, -2px -2px #F3F3F3 inset, 2px -2px #F3F3F3 inset, -2px 2px #F3F3F3 inset;
-webkit-box-shadow:4px 4px 6px #999, 2px 2px #F3F3F3 inset, -2px -2px #F3F3F3 inset, 2px -2px #F3F3F3 inset, -2px 2px #F3F3F3 inset;
color:#FAFAFA;
padding:0 25px 25px 25px;
margin:200px auto;
text-align:center;
width:500px;
}
h1 {
font-family:'BebasRegular', sans-serif;
font-size:90px;
margin:30px 0;
letter-spacing:2px;
}
#container div {
column-count:2;
column-gap:40px;
column-rule:2px solid #F3F3F3;
-moz-column-count:2;
-moz-column-gap:40px;
-moz-column-rule:2px solid #F3F3F3;
-webkit-column-count:2;
-webkit-column-gap:40px;
-webkit-column-rule:2px solid #F3F3F3;
}
form input[type*=text],form input[type*=password] {
border:3px #EAEAEA solid;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
margin:10px 0;
height:20px;
width:175px;
}
form input[type*=text]:focus,form input[type*=password]:focus {
border:3px #C3C3C3 solid;
outline:none;
}
form input[type*=submit] {
margin:5px 80px 7px 0;
background:#F3F3F3;
background: -moz-linear-gradient(top, #F3F3F3 50%, #AAA);
background: -webkit-gradient(linear, left top, left bottom, from(#F3F3F3), color-stop(0.5, #F3F3F3), to(#AAA));
border:3px solid #193441;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
color:#193441;
font-size:15px;
height:30px;
width:100px;
}
form input[type*=submit]:active {
box-shadow:1px 1px 3px #1E3E4E inset;
-moz-box-shadow:1px 1px 3px #1E3E4E inset;
-webkit-box-shadow:1px 1px 3px #1E3E4E inset;
}
form label {
font-size:18px;
letter-spacing:2px;
line-height:5px;
padding-right:86px;
}
a {
color:#F3F3F3;
font-size:14px;
padding:0 5px;
text-decoration:none;
}
a:hover {
color:#D3D3D3;
}
p {
padding-left:20px;
text-align:left;
font-size:16px;
}

There you go your finished login panel. Any questions just leave a comment.

Thank you for reading

Fred10597

last edited 13/07/10

3 Comments

3 Comments so far
Leave a comment

RSS feed for comments on this post. TrackBack URI