1. CSS :visited伪类选择器隐秘往事回忆录 主要介绍CSS :visited伪类选择器，由于安全方面的限制，很多你以为可以使用的CSS属性，在:visited这里都是不能使用的，当然，很多很多其他怪异的特性。如有兴趣，可以点击这里阅读原文。 2. CSS scrol…

就是顶部黄色的滚动进度条，随着页面的滚动进度而变化长短。 在继续阅读下文之前，你可以先缓一缓。尝试思考一下上面的效果或者动手尝试一下，不借助 JS ，能否巧妙的实现上述效果。 OK，继续。这个效果是我在业务开发的过程中遇到的一个类似的小问题。其实即便让我借助 Javascrip…

不久之前Firefox和Safari浏览器已经开始支持类似Photoshop的混合模式，但是在Chrome和Opera浏览器中需要添加前缀。举个栗子： 现在，你甚至可以在边框中使用渐变。 具体的例子可以看这里，或者看这里使用的是background-clip和backgroun…

1. 层叠上下文 (Stacking Context) 层叠上下文 (堆叠上下文, Stacking Context)，是HTML中一个三维的概念。在CSS2.1规范中，每个元素的位置是三维的，当元素发生层叠，这时它可能覆盖了其他元素或者被其他元素覆盖；排在z轴越靠上的位置，距…

这种整页翻转的效果主要是做rotateY的动画，并结合一些CSS的3d属性实现。 主要是通过计算页面翻折过来的位置。 这两种原理上都不是很复杂，需要各个细节配合好，形成一个连贯的翻书动画。 我们先重点说一下第一种翻页效果的实现。 1. 基本布局 一个li.paper就表示一张纸…

来自百度前端技术学院的实践任务：有趣的鼠标悬浮模糊效果，参考：http://ife.baidu.com/course/detail/id/14，用 CSS3 实现了一下，顺便复习下 CSS 的基础。

一. 1px边框问题 想必各位无论在面试中，还是工作中，应该遇到过1px边框的问题。不知道也没关系，现在我们就来复习一下（知道的朋友可以跳过去看第二部分了）。 1px边框，顾名思义就是前端画出1px的线，这里的1px,指的是屏幕1px大小。那么屏幕的1px和css中的1px有什…

虽然上面这种简单的使用百分比可以实现但是，百分比无法实现字体的自适应，百分比转换成相应的尺寸还是很难的。接下来就说说这次我们的主角 rem （我们一般只适配宽度） 首先rem是一个相对于根元素fontSize大小的相对单位，也就是说 1rem 等于 html 的 fontSiz…

我们一个一个简单了解下。 CSS3 动画的 animation-timing-function 属性值除了支持 cubic-bezier() 功能符，还支持 steps() 功能符，可以实现很多小而美的逐帧动画效果。例如 twitter 的 Like 的效果： 把所有序列帧图片…