用JavaScript做了一个计算器,大部分时间都花在完善样式和交互上了,现在还想着再给它添加一个主题。我发现,我喜欢把一个东西从丑变美的过程,好看比好用更吸引我。这不是一个好习惯……
Demo:https://greyli.github.io/calculator/
源码:https://github.com/greyli/calculator
优化交互、美化样式
在这个计算器里,用到了一些处理技巧,可以让它看起来更真实和漂亮。
计算器边缘阴影
这里使用box-shadow的inset方法,也就是把阴影内嵌到元素里,让计算器看起来是有厚度的:
1 |
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), inset -1px -6px 12px 0.1px #89847e; |
参考内容:https://css-tricks.com/snippets/css/css-box-shadow/
按钮按下效果
其实是设置按钮的box-shadow,按下时把box-shadow设为none,同时按钮向下移动
1 2 3 4 5 6 7 8 |
button { box-shadow: 1px 2px #666; } button:active { box-shadow: none; transform: translateY(4px); } |
按钮上的字不可选择
双击按钮或是拖动按钮选择会出现蓝色背景色,设置user-select去掉这个特性
1 2 3 4 5 6 |
.un-selectable { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } |
去掉按钮被选中后的蓝色边线
1 |
button:focus {outline:0;} /* 设为none效果相同,或加上 !important */ |