css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.
user profile image

Inspired by Virgil Pana's work on Dribbble : http://dribbble.com/shots/656020-Login. The whole point was to make the shiny light effet on the top of the box.


  1. Awesome effect!

  2. If you add "pointer-events: none" to "form h1:after" (the shiny light effect), you'd be able to select the form fields everywhere.

  3. awesome how to create lighting

  4. Thank you guys. And thanks Simon for the reminder. I thought about it while coding this, and forgot to add it. Now fixed !

  5. hi there.. i tried this nice form but i wont work. i don't get the shine effect to run. you can see it here http://toplevel-media.de/admin/login.php can anyone help me please

  6. You haven't prefixed CSS 3 properties. I use prefix-free to avoid prefixing on CodePen, but you have to use vendor prefixes outside CodePen (-webkit-, -moz-, -o-, -ms-).

  7. And you also have to reset default styles, like margins and paddings. Use a reset.css stylesheet or add * { padding:0; margin:0; } at the top of yours.

  8. woohoo nice one theanks alot :) i love it but what about the f****** IE?

  9. IE won't show border-radius, box-shadows, reflection, gradients, text-shadows, and RGBA colors. In other words, it will display a shitty but functional log in form. I could probably slightly upgrade CSS to improve IE fallbacks, but since CodePen seems to be broken since this morning, it will wait I guess.

  10. well my english is not good enough.. i guess you told me it wont work in IE, right But it look real bad, can i use a different css for ie users?

  11. It will work on IE, but it will look terrible. If you support IE6 and IE7, the layout could break eventually : just make some testcases. If you're only worrying about IE8, I think it will only look flat, but will look clean and functional.

  12. Open a new HTML file, put the markup in it, put the CSS in a style tag, save it, and open it in various browsers to test the inconsistencies.

  13. i tested the site in different browser.. it's just the damn IE that gimme a "blank" form

  14. "unstyled"

  15. just a black box with ugly fields and button

  16. It's called Internet Explorer. :)

  17. ^^ it's crap.. do you code something extra just for IE or do you give a f***?

  18. If you want pixel-perfect, you have to use images for IE. But you'll probably consider reflections and shadows are just visual improvements, so my advice : don't give a fuck, just make it work.

  19. oooh bill i hate you :P

  20. time for lunch .. l8er

  21. even more awesome :D

  22. @boOmLiGht : I'm not the original author of this work. It's from Virgil Pana (see description) so you may want to ask him if you can use it on a real project.

  23. ok but i decided not to use this cause IE don't want to show it ^^

  24. Nice Pen. One little thing: why did you write labels in uppercases (HTML) instead of using text-transform property (CSS) ? :p Good shiny light !

  25. its is very nice how we can download this login forms

  26. You've got all the code there. No need to download anything, just copy paste it.

  27. on the "form h1:after " its -webkit-transform instead of "transform"

  28. No. I'm using prefix-free.

  29. sehr cool. gefällt mir!

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.