双十一刚结束，阿里云就大面积故障，持续长达 3 个半小时。据阿里云公告，故障源于某个底层服务组件，影响地域涵盖了国内以及海外多个国家。“淘宝崩了”、“外卖崩了”、“闲鱼崩了”等迅速冲上热搜。大批依赖阿里云的设施随之崩溃：外卖派送停止、超市无法结账、停车场不抬杆。甚至洗衣机、直饮水机和充电桩等服务也停止运转。

今天我们来探索一下Carl Philipe Brenner的网站上一个微妙而有趣的动画效果。当鼠标经过网格元素时，会有一个微妙的动画发生——网格元素变得透明，每条边有个顺时针的动画，创造了非常好的效果。这种效果是通过JS给span标签的宽或者高做了动画。我们待会会用SVG和CSS渐变来完成。注意，这个技术还是实验性的。

text-shadow 和 box-shadow 这两个属性在主流现代浏览器上得到了很好的支持( > Chrome 4.0, > Firefox 3.5, > Safari 4.0, > Opera 9.6, > IE10)。

Sass3.3版本的出来，你应该开始使用Sass的map功能。 多年以来，变量一直是Sass的核心功能。我们使用它越来越让人疲惫，你不乏看到这样写Sass： {代码...} 这样他能很好的运行。我们按约定手动的设置变量。要使用这个功能，我们要这样做： {代码...} 编译出来的CSS: {代码...} 们可以做得更好。在Sass3.3 版本中出一些新...

有时候我们很习惯的用到不透明属性opacity来增加层次感或者增加用户体验，但因这个属性是css3属性，所以对于低级浏览器的兼容性来说就达不到我们预期的效果。一般而言，我们都尽可能少用一些浏览私有属性-webkit,-moz,-ms,-o，这也仅仅解决了市面上很多浏览器的问题，面对IE，特别是IE9-版本的，也是显得有气无力。因此...

伴随HTML5而来的CSS3让前端大湿们可以用简单的CSS样式即可写出动画效果来，而在这之前，一提到动画我们可能会想到JavaScript，Flash，Java插件等。如果是用JavaScript那倒也不是很糟糕的事啦，但如果写出来的效果非要强迫客户端安装第三方插件才能显示，毕竟不是很理想。这也就是为什么谷歌会不遗余力地推广他所主导的开...

Markdown.css 是一个很有意思的 CSS 样式表。它可以让 HTML 显示成类似 Markdown 纯文本的形式。（图片除外）。 基于 LESS 编写 Markdown.css 基于 LESS 编写，源代码在此。 下面简要地解析一下具体实现的方法。 标题 markdown 的标题在前加上 # 到 ###### 表示。这是用了 CSS 的伪类 :before 实现，例如 h2 是这么定义...

坊间有云：“人生如戏，全靠演技”。意思是：人生坎坎坷坷，曲曲折折，跌宕起伏，不可预知，扑朔迷离，好比是戏一样；如果演技好，可以得到人生中最重要的一张卡片——奥斯卡。

前端已经被玩儿坏了！像console.log()可以向控制台输出图片等炫酷的玩意已经不是什么新闻了，像用||操作符给变量赋默认值也是人尽皆知的旧闻了，今天看到Quora上一个帖子，瞬间又GET了好多前端技能，一些属于技巧，一些则是闻所未闻的冷知识，一时间还消化不过来。现分类整理出来分享给大家，也补充了一些平时的积累和扩...

Flappy Bird这款简单的小游戏累计下载量已经超过5000万次，每天收入至少5万美元。然而，2月10日其开发者Dong Nguyen却将Flappy Bird从苹果App Store和Google Play应用商店下架。

现在，我们来介绍 2014 年推荐给 Web 设计师的 15 款 HTML&CSS 框架。阅读下面的框架列表，跟我们分享你的看法吧：）

UI是Web的灵魂！Semantic UI是一款语义化设计的前端框架，为攻城师而制作的可复用的开源前端框架。 特性 弃用有歧义的表述 Semantic是围绕自然交流语言而架构的，这使得开发更加直观（易于理解）。 Semantic让你可以使用任何HTML标签来表现UI控件。 Semantic {代码...} Bootstrap {代码...} Semantic {代码...} Bootstra...

在参与规模庞大、历时漫长且参与人数众多的项目时，所有开发者遵守如下规则极为重要： 保持 CSS 便于维护 保持代码清晰易懂 保持代码的可拓展性 为了实现这一目标，我们要采用诸多方法。 本文档第一部分将探讨语法、格式以及分析 CSS 结构；第二部分将围绕方法论、思维框架以及编写与规划 CSS 的态度。 CSS 文档分析 无...

在Web中使用什么单位来定义页面的字体大小，至今天为止都还在激烈的争论着，有人说PX做为单位好，有人说EMS优点多，还有人在说百分比方便，以至于出现了CSS Font-Size: em vs. px vs. pt vs. percent这样的PK大局。不幸的是，仍然有不同的利弊，使各种技术都不太理想，但又无法不去用。真是进也难，退也难呀。

Pure相当小，所有模块压缩后只有4.4KB* ，并且依然保持着响应式的设计和易用性。保持文件的大小对移动设备来说非常重要，所以我们对每行CSS都进行了仔细的考虑。如果你决定只使用部分模块，你将会节省更多的字节。

CSS孱弱的代码表达力一直让人诟病，特别是大型项目，一个小调整可能需要修改多处，一点也不符合DRY的原则。也因此出现了SASS、LESS、Stylus等各种编译到CSS的语言。不过，原生CSS也开始迎头赶上。Firefox最近发布的Nightly版(version 29)已经支持CSS 变量啦！

这里介绍10款流行的 jQuery插件，希望能帮上各位前端攻城狮～ fullPage.js 一个简单的，易于使用的插件，创建全屏滚动网站（也被称为单页网站），它允许创建滚动网站以及添加一些水平滑块。 下载插件  预览效果 SlideMe 响应式的，CSS3 兼容的，可定制的，易于安装和使用，支持多实例，全屏，凉爽的，功能强大的 jQuery...

CSS3 是对 CSS 规范的一个很大的改善和增强，它使得 Web 开发人员可以很容易的在网站中加入时尚的效果。本文收集了9款有用的开发工具推荐给大家。

Mark Qin用HTML和CSS模拟了一个Chrome浏览器。 Demo在此。 都是一些基本的CSS3的使用，并不复杂。各位有兴趣地可以试着也写一个。 唯一复杂的地方是浏览器标签的模拟。 可以看出，Chrome标签的基本特点如下： 梯形 有圆角 宽度自适应 用图片可以轻松搞定，但是怎么能用图片呢？作为一个有追求的前端，肯定要用纯CSS3实现...

今天要为大家分享9款设计非常独特的jQuery/CSS3全新应用插件，插件包含菜单、jQuery焦点图、jQuery表单、jQuery图片特效等。下面大家一起来看看吧。

总是能在一些Geek频道上看到一些优秀的项目~ Tridiv,一个不可思议的创意,当我们还在沉浸在CSS3优秀的渲染能力时,JulianGarnier开发出了这么一个神器. Tridiv是什么? 通过CSS3的一些属性,Tridiv能够完全只用HTML+CSS3打造3D模型！并将整个过程可视化~ 在设计视图中,还能加入贴图,但是此刻,你已经很难想象,这个模型居然是D...