You must be signed in to star a gist
The Perfect Inset Input CSS
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
|border: 1px solid transparent;|
|border-bottom: 1px solid #DDD;|
|box-shadow: inset 0 1px 2px rgba(0,0,0,.39), 0 -1px 1px #FFF, 0 1px 0 #FFF;|
Aug 9, 2012
Soft and blurry bad. Crisp and crispier good. 1px highlights/shadows for the absolute win (especially on retina, IMO).
Aug 10, 2012
Aug 10, 2012
Most welcome - makes me want to get smart and speedy on CSS myself. So great to see what things will actually look like in-browser for designers.
Add outline: 0;
Jan 26, 2015
very cool, thx @nrrrdcore!
Mar 17, 2015
When I see "perfect" in a title, I immediately move on because nothing is perfect. But this post turns out to be true! I'm glad I stooped by.
Apr 7, 2016
Almost 3 years later, and it still doesn't disappoint!
Apr 15, 2017
Looks great! But doesn't fit at all with an image in background. :(
Mar 28, 2018
This is perfect! Thanks!
Jun 28, 2018
Aug 2, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
No more blurry inputs.
Pretty excellent for boxes/divs too.