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

Related posts:

1. Web Forms: Semantic Mark Up in our Forms [part 2]
2. 10 Important Tips and Tricks about using DreamWeaver
3. Cool navigation menu made with JQuery
4. Simple Cross Browser CSS Layouts (ie6+, ff3+,safari*,chrome*)
5. Making a jQuery infinite carousel with nice features


Did you absolutely LOVE this article... share it!

Comments

• Jhon Jan 12th, 10

  I totaly agree with your point here! I admire the stuff you post and the quality information you offer in your blog! Keep up the awesome work dude.
  car accident insurance claim
  apartments for rent
• Mark Ewans Jan 13th, 10

  Resources like the one you mentioned here will be very useful to me! I will post a link to this page on my blog. I am sure my visitors will find that very useful.
  Jumping Castle
      baseball caps
• Mark Ewans Feb 1st, 10

  I can see that you are putting a lot of time and effort into your blog and detailed articles! I am deeply in love with every single piece of information you post here. Will be back often to read more updates!
• Porsche Wheels Feb 4th, 10

  I live in Florida, The owner of the apartment says that the bank wont accept anymore payments on the mortgage, yet she’s wants to rent it to us.Porsche Wheels
• Facebook Backgrounds Feb 10th, 10

  My accident was a week ago today and I still have no answers and more importantly no car. There is a question with the rental agreement with the driver of the car and the person that rented the car.
  <ahref=“http://www.facebookprofilelayouts.com/”>Facebook Layouts</a>
• Facebook Backgrounds Feb 10th, 10

  The rental car company is Hertz and there insurance company is Traveler’s. What can I do to be compensated for this run-around and huge hassle?
  Facebook Layouts

Leave your own!

Your Name

Email

Website

Comment