Fancy Glowing Login Box

A tutorial about making a fancy glowing Web 2.0 login box.

Did you ever want to achieve that extra flashy (web 2.0) effect. Today i will go over a technique i recently invented myself. This can be used widely, just because i used it in a login box does not mean you cannot use it in a logo (enavu.com example) or anywhere else you see fitting. I got inspired by DragonInteractive Labs who decided to use heavy javascript for this simple clean effect. So i tried JavaScript as well, i will tell you one thing it wasn’t pretty (i mean the code of course) and it made the website unresponsive. So i came up with this technique. Here is the video of how i came up with the photoshop portion of the fancy login box.

Here is an outline of the events performed:

• First we make the background layer (this is the one full of colors). I made it 1000 by 250 you can of course make it as big as you please.
• Then we make the filter layer. It’s basically a rounded edge rectangle that will go over the background layer.
• Now we add another filter layer, this one will go over the rest of the are. I do this by holding the Ctrl key and clicking on the layer of the rectangle, that way we make a selection of the rectangle. Now we expand the selection by a pixel and then we feather it by 3. Then we select the inverse and fill it with white in a new layer.
• Now comes in the animation, we paste the background layer under the two new layers. We open the Animation window from the Windows menu. We make a new animation slide, we move the background layer all the way to the right, select both slides and create a tween animation. Do that again with the last two frames but move the background all the way to left.
• Save it as a gif that has infinite looped animation and you’re done.
Now we make the html and css. Here is mine: The CSS

	* {margin:0; padding:0; font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif; color:#ccc; font-size:20px;}
	.left {float:left;}
	.left a {color:#999; font-size:16px; text-decoration:none; padding-top:10px; display:inline-block; padding-left:5px; }
	.login { margin:10% auto; background:url(loginbg.gif) no-repeat left top; width:500px; height:250px;}
	.login p {letter-spacing:-0.02em; line-height:.5em; margin-bottom:15px; text-indent:5px;}
	.login input {margin:5px; border:1px solid #ccc; padding:4px; width:80%; -moz-border-radius: 6px; -webkit-border-radius: 6px;}
	.login input.submit {float:right; width:20%; background:#fff; margin-right:17%; cursor:pointer;}
	.loginWrap {height:200px; width:450px; float:left; margin:35px 0 0 50px; display:inline;}

And the html:

	

    
username

    

    
password

    

    forgot password

    

And you have a very cool login box. Here is the finished product.

Download Preview

Enjoy this post? Share it with others.
BlinkList del.icio.us Digg Email Facebook Furl Google Print Reddit TwitThis