Skip to main content

Login form | Using CSS3


Here is an awesome demo of a login form, which makes good use of CSS3 and HTML5. In this demo, i have made extensive use of gradients, text-shadows and box-shadows to achieve a beautiful and modern looking login form. The design of this login form was originally taken for codrops.com, hope you'll like and use this login form in your projects.


login form
login form



login form using CSS
login form Onfocus


Comments

  1. Hey Puru, these designs are awesome. You know I tweaked my blog with the button designs you posted in your previous blog. My Read more link and subscribe button looks nice now. Thanks a lot. Nice day ahead. Cheers!

    ReplyDelete
    Replies
    1. Thanks deepak
      I'm happy that you've used the buttons in your blog

      Delete
  2. Nice read.I find all your blogs very informative. Will read them asap.
    Happy times.

    ReplyDelete
  3. Nice read. I find all your blogs very informative. Will read them asap.
    Happy times

    ReplyDelete
  4. Nice read.I find all your blogs very informative. Will read them asap.
    Happy times.

    ReplyDelete
  5. Thanks For Very Useful Information
    http://www.Domains4gulf.com/

    ReplyDelete
  6. Excellent post.I want to thank you for this informative read, I really appreciate sharing this great post. Keep up your work..
    Web Development Company in Chandigarh

    ReplyDelete
  7. Wow Great information about web development. I like your blog post. If you want more information about Web Application Development Company then visit our website.we have highly dedicated web developer team.

    ReplyDelete
  8. Wow Great information about web development. I like your blog post. If you want more information about Web Application Development Company then visit our website.we have highly dedicated web developer team.

    ReplyDelete
  9. Do you have a spam problem on
    this blog; I also am a blogger, and I was wanting to know your situation; many of
    us have developed some nice
    methods and we are looking to trade
    solutions with other folks, why not shoot me an email if interested.
    Here is my blog post ... View here

    ReplyDelete
  10. Nice Blog and Providing Useful information.A very inspiring post as well as inspiring taught thus, I really appreciate it! Thanks.

    Searchinfomedia

    ReplyDelete
  11. great tips. very well-written, keyword-oriented and incredibly useful. its really interesting to many readers. I really appreciate this, thanks


    Searchinfomedia

    ReplyDelete
  12. Thanks for the sharing of such information. we will pass it on to our readers. This is a great reading. Thanking you.
    web design company in delhi

    ReplyDelete

Post a Comment

Thanks for Visiting for any questions or suggestions please comment below
Cheers,

Popular posts from this blog

Adding a button in HTML | styling a button

To add a button in a HTML page use <input> tags and specify the type as button like so
<input type=”button” value=”submit” action=”submit.php”> this code will be rendered in browser like in Figure 1.1
Further more if you wish to style this button we can apply a set of CSS rules to make the buttons look pretty here are a few examples: Download code for these buttons here



Advanced Jquery easing | Demo and Download

Swing and Jquery easing are included in the Jquery core library but there are many other easing methods which are included in the Jquery easing plugin, available in the Jquery plugin repository. Here are the other easing methods: easeInCirc easeInOutExpo easeOutBack easeOutElastic easeOutBounce easeInOutElastic



to use this easing methods we need to pass its name to the animate function lets see an example which covers most of the above said easing methods.
Download DEMO

<! DOCTYPE HTML> </head> <script type="text/javascript" src="Scripts/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="Scripts/easing.js"></script> <style> p{ height:150px; overflow:hidden;} #div1,#div2,#div3,#div4{ position:absolute; border:1px solid #999; border-radius:5px; width:350px; padding:6px;} #div1,#div3{ margin-left:5%; background-color:#00CCFF; } #div2,#div4{ margin-left:50%; background-color:#FC0;} #div3,#div4{ margin-top:…