Log in

11 Responses

1. Visual Idiot

   Was working on a modal for a certain little thing on a certain little project, but came up with a better idea instead.

   9 months ago

2. Elliot Jackson

   Looking good mate. The "Log In" text looks a little lost up there but I'm sure it looks better full size. Maybe attach a bigger view?

   1likes

   9 months ago

3. Visual Idiot

   @Elliot it's part of a navigation bar, and I can't attach a full view yet. Thanks, though! :)

   2likes

   9 months ago

4. Jeffrey Jorgensen

   I might lessen the padding/margin a bit between inputs and labels, just slightly, otherwise, love the idea man, this is looking really good.

   9 months ago

5. Petr Široký

   Log in button seems to be slightly smaller than rest of the inputs.

   2likes

   9 months ago

6. Vaibhav Bhat

   I really love the simplicity here.

   9 months ago

7. Adis

   Could be much better.

   - Try centering the triangle-thingy on top of the popup.
   - Field labels could be a little bit lighter.
   - A little less spacing between button and fields would be good.
   - The inner shadow of the field is tad too strong.

   6likes

   9 months ago

8. Carter De Angelis

   Assuming the blur is real blur and not something you're using to emphasize the elements for this shot, how do you plan on coding this? I've wanted to do modals with blurry overlays for a while, but as far as I know you can't blur HTML elements, just images. Also, nice work

   9 months ago

9. Mike Armstrong

   @Carter De Angelis : you can achieve the effect (sort of) with opacity, scale and box-shadow: http://tympanus.net/codrops/2011/12/14/item-blur-effect-with-css3-and-jquery/ as long as you don't care about IE support ;)

   9 months ago

10. Visual Idiot

    @Adis right now, it's aligned to a grid (which is admittedly hard to see since everything's blurred out). I'm going to disagree with you about the label colour — any lighter and it'd become harder to read for some people. As for the spacing and shadows, you're right there. Thanks for the feedback!

    @Carter De Angelis I'm using -webkit-filter: blur() and filter:progid:DXImageTransform.Microsoft.Blur() to achieve the effect (because, you know, IE6 and latest Webkit are the only browsers that support blur AFAIK).

    Thanks, guys!

    9 months ago

11. Carter De Angelis

    @Mike Armstrong @Visual Idiot thanks guys!

    9 months ago