本文其实应该叫，Web 用户体验设计提升指南。 ... 所谓的用户体验设计，其实是一个比较虚的概念，是秉承着以用户为中心的思想的一种设计手段，以用户需求为目标而进行的设计。设计过程注重以用户为中心，用户体验的概念从开发的最早期就开始进入整个流程，并贯穿始终。 良好的用户体验设计…

CSS 中设置的渐变是 gradient 数据类型，它是一种特别的image数据类型。使用background-image设置，可叠加设置多个； 渐变的实现由两部分组成：渐变线和色标。渐变线用来控制发生渐变的方向；色标包含一个颜色值和一个位置，用来控制渐变的颜色变化。浏览器从每…

我们需要将两张图合成一张有正反两面。这里需要将反面沿着 y 轴反转一下就可以正确的显示了。使用 transform:scale(-1,1) 原本左侧这张图是正面看时的视角，右侧图是反面看的视角 将两张图合成一张时通过定位将图重叠在一起。 发现旋转时无论转了多少角度都只能看见图二…

随着移动端的web项目越来越多，设计师的要求也越来越高。在移动端上通过1px实现一条1像素的线时，它并不是真正的1像素，比真正的1像素要粗一点。 那么为什么会产生这个问题呢？主要是跟一个东西有关，DPR(devicePixelRatio) 设备像素比，它是默认缩放为100%的情…

《CSS系列漫画教程》共15讲，是我2012年刚毕业步入互联网时的早期作品。时隔多年，如今互联网内容为王的分享经济迅速发展，这些作品压箱底太可惜，不如分享给大家。 漫画还停留在当年前端兼容ie6的时代，如今ie6随着那一代人的青春一起逝去，大家各奔前程，留下是感情和回忆。漫画不…

当浏览器对一个 render tree 进行渲染时，浏览器的渲染引擎就会根据 基础盒模型(CSS basic box model) ，将所有元素划分为一个个矩形的盒子，这些盒子的外观，属性由CSS来决定。 我们在浏览器控制台输入如下代码就可以看到页面的每一个元素都是由一个矩形来…

当页面出现浮层的时候，滑动浮层的内容，正常情况下预期应该是浮层下边的内容不会滚动；然而事实并非如此。 如图所示，浮层下边的内容并没有如想象中不受影响。 查源码发现该包在iOS端使用禁止touchmove的方式单独处理，但是在其他端只是给body加overflow: hidden…

何为技巧，意指表现在文学、工艺、体育等方面的巧妙技能。代码作为一门现代高级工艺，推动着人类科学技术的发展，同时犹如文字一样承托着人类文化的进步。 每写好一篇文章，都会使用大量的写作技巧。烘托、渲染、悬念、铺垫、照应、伏笔、联想、想象、抑扬结合、点面结合、动静结合、叙议结合、情景…

对很多人来说，创建布局是前端开发领域中最难啃的骨头之一。 你肯定经历过耗费数个小时，换着花样地尝试所有可能起作用的 CSS 属性、一遍遍地从 Stack Overflow 上复制粘贴代码，寄希望于误打误撞地赌中那个能实现预期效果的魔幻组合。 如果你的惯用策略就是按部就班地组合布…