标签: html

写了个 Mac 键盘当练习了

围观地址: https://github.com/kaikaiiiiiii/mac-keyboard  用了一些简单的 CSS,最后看起来效果还不错。

缘起是想给自己写个在 mac 下通过 alt/shift+alt 加内容键可以直接输入的符号列表,后来想想要不就做个键盘得了。最后效果就如下图了。

1. 功能键区的图标用的是 http://fontawesome.io ,不过依然有些图标找不到,暂空。F8 的图标是两个 fa 图标拼的。F1/F2 的图标比较写意,也不是完全一致。

2. 通过 :active 伪类添加了按键点下时的效果,包括:

(1) 底色变全黑 #000; (默认颜色是#333;)

(2) 位置右移 2 像素,下移 2 像素。

3. 通过 Transition 添加了“回弹”的效果。

4. 通过两个像素的 Border-bottom 效果,强调了按住 alt/shift+alt 后可以直接输出的字符。

5. Transition 在表现“回弹到原位时”,必须明确地添加 left:0px; top:0px; 以使得动画的计算有终点,否则 transition 是不起效果的。这个坑了半个多小时,遍查不到,突然自行顿悟。

6. 通过 -*-user-select: none; 让按钮在双击时,上面的字符不至于被选中。

7. css 的类还是分得很细的,键长、宽、upper、lower、keyname、altkey、shiftaltkey 等都是单独的类。当然 .space 的 width 就只能单写了这个没办法。

8. jQuery 还在学习中所以这个项目到这里就结束了。

pic

自己写 UI 的几点总结:

自己写 UI 的几点总结:

  1. CSS2.x 很简单,更接近于图像处理软件的设计思路。CSS3 引入不少逻辑化与动画式的表达,想来会逐步考验设计人员的技术功底。CSS 3D……算了不提。
  2. HTML5 则进化/退化到“语义标签”了,相应的样式控制越来越少。不过语义定义逻辑还不是很完善。
  3. 如果一个html标签完全没有和外观相关的属性,八成是个HTML5新增标签。
  4. JQuery很好用,能不用就不用。这句话不是病句。
  5. 懒惰是人类进步的原动力,所以学 less 代替 CSS,用 Emmet 写 html,找各种代码补全和片段插件。
  6. 事前规划很重要,但下笔成章更多出现在胸有成竹的大牛身上。我这种需要的效果还要现查的新手,只能靠着自动刷新一点点慢慢调。
  7. 尽管只能慢慢调,还是得事前规划,事后重构。所以新手写代码要写两遍,一遍实现,一遍重构。重构才是程序员的良心。
  8. 好的前端,必须是又能抠腚,又能抠图。
  9. Axure、UIDesigner、Mockup、Sketch、Photoshop、Illustrator、CorelDraw、Briefs、BluePrint、Flinto、OmniGraffle、XMind……以上这些一个没用到。工具只是工具,用哪个只取决于习惯与熟练。
  10. 自己设计自己实现,纸笔最趁手,不服来决斗。
  11. 好书值得付费购买,好软件也是。
  12. 95% 以上的时间在查找和学习实现办法,实际生产时间不到 5%。所以大牛和新手的薪资差 20 倍只是起步价。
  13. 时间和质量永远是难以平衡的矛盾。
  14. 大屏显示器比笔记本小屏提升 20% 效率,双屏提升 50% 效率,如果桌子够大就放三屏,左屏查资料,中屏写代码,右屏实时预览。四屏就再加一屏资料,五屏就再加一屏资料,六屏就再加一屏资料……想想都醉了。
  15. 快捷键提升效率,固态硬盘提升效率、Everything 提升效率、关掉不用的窗口提升效率,其实每样都只提升几秒钟,关键是不再打断思路。
  16. gitk 是个好东西。
  17. 践行 U Can U Up, No Can Learn Up,多学点东西,转头忘也没关系。反正不 Up 也是躺尸床上玩手机。
  18. 想不出来的时候打两盘星际虐虐疯狂电脑,二十来分钟。打完就可以睡觉了,反正还是想不出来。
  19. “做出来”这个过程还是很爽的,根本停不下来。
  20. 我恨 IE。