Comments 8
That's better!
But as of active state it doesn't look natural enough. I'd try to use transform: scale(0.9) instead of all those shadow/size/font-size changes.
Also, you shouldn't use hardcoded width/height with rem's, as they are not flexible enough. I'd go with relation to content, with line-height and padding/margin/border: transparent positioning.
For basic size flexibility you should use em instead of rem, therefore you'll be able to change size of a certain button with setting font-size to main element of that button.
extempl, thank you for your comment!
It will be great if you write your version of the keyboard key on CodePen and send it here in comments. Then we'll compare your keys and mine.
It will be great if you write your version of the keyboard key on CodePen and send it here in comments. Then we'll compare your keys and mine.
Got some time to play with buttons. Here is what I meant:
https://codepen.io/extempl/pen/wvarvdO?editors=1100
extempl, thank You for taking the time to fix some issues in Keyboard Key CSS. Now I understand that it is better to use «em» instead of «rem» for this purpose. Furthermore, Your animation after clicking is much cooler than mine.
Your version of the Keyboard Key is undoubtedly better!
Your version of the Keyboard Key is undoubtedly better!
Если не задаваться целью нарисовать именно лютый вырвиглазный кич — то можно сделать намного проще и «реалистичней». jsfiddle.net/m9og0wyk
I've come from the prev post, and now the preview image is still misleading.
Because now the expectation is that you are going to implement what you were going to before :) which means the «reality» called here option.
Nevertheless thanks for the article! I like that one)
Because now the expectation is that you are going to implement what you were going to before :) which means the «reality» called here option.
Nevertheless thanks for the article! I like that one)
phil_b, this is some other meaning of the preview image. I wanted to focus on the result Keyboard Key as a Reality.
But you looked at this situation from a different side. I agree that I could create a preview image as you described above. Maybe that would be better)
Thank you for your remark and positive feedback)
But you looked at this situation from a different side. I agree that I could create a preview image as you described above. Maybe that would be better)
Thank you for your remark and positive feedback)
Sign up to leave a comment.
3D Keyboard Key on CSS | Now It is Reality