enavu webdevmania tutsvalley psdestination
visit the enavu network
6 Comments Article Title Overlay Article Title

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 [...]

DZoneDiggDesign FloatDeliciousBlinklistRedditFacebookGoogle BuzzTwitterStumbleUponTumblrShare

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

fancy login glowDid 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:

    
    
    

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

    Download Preview

    DZoneDiggDesign FloatDeliciousBlinklistRedditFacebookGoogle BuzzTwitterStumbleUponTumblrShare

    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

    • 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

    • 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

    • 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!

    • 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

    • 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>

    • 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!

Sponsors

freedcamp free project management

Popular Articles

fzilla file hosting