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
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?
@Elliot it's part of a navigation bar, and I can't attach a full view yet. Thanks, though! :)
I might lessen the padding/margin a bit between inputs and labels, just slightly, otherwise, love the idea man, this is looking really good.
Log in button seems to be slightly smaller than rest of the inputs.
I really love the simplicity here.
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.
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
@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 ;)
@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).
@Mike Armstrong @Visual Idiot thanks guys!
keyboard shortcuts: ← previous shot → next shot L or F like
Show and tell for designers
What are you working on? Dribbble is a community of designers sharing screenshots of their work, process, and projects.
Copyright © 2009–2013 Dribbble LLC. All screenshots © their respective owners. Shipped from Salem, Mass. USA.
Follow Dribbble on Twitter