使用 css 代码画一只玉兔，迎中秋佳节

前言：中秋佳节，大家都在讨论月饼啊、嫦娥啊，但我们怎么能忘了可爱的玉兔呢。今天我们就来用 css 画一只玉兔出来。

演示：

代码
HTML代表
  <div class=[……]

阅读全文 »

CSS border-radius 新玩法(含可视化生成工具)

这个 CSS 属性对于前端人员一定不陌生，一直以来都把它当作矩形圆角使用，然而，对于喜欢创新的设计师来说，这是不够的，我们要最大化利用 border-radius，让它玩得更出色。

先来看看截图[……]

阅读全文 »

小创意：圣诞球切换开关

还有几天就到圣诞节，几乎到哪里都能看到圣诞气氛的设计，网站也是如此，为了让网站页面更有气氛，我们不能放过任何小创意，即使是一个小小的切换开关元素。

大家请看下图，这是来自 Chris Ganno[……]

阅读全文 »

纯 CSS + 纯字符实现的 loading 加载效果

等待加载、加载中的在网页上是很常用的元素，实现方式也很多，其中直接用 GIF 动画、CSS sprites 等，而今天介绍的就是以纯 CSS + 纯字符实现的 loading加载效果，样式超级多，可选[……]

阅读全文 »

可视化 CSS 样式表手册 – css reference

前端开发新人一般是从 HTML 和 CSS 进行入门学习，在设计书籍导航里有一系列前端从入门到精通的书籍推荐，但是我们偶尔在线学习会更加方便，比如今天分享cssreference，它是一个专门介绍 CSS 样式表的在线网站[……]

阅读全文 »

偏门却又实用的 CSS 样式

很早之前我们推荐大家看《推荐大家使用的CSS书写规范、顺序》，里面提到 CSS 的一些常用命名、规范等等，而今天主要是说一些偏门一点的 CSS 样式、技巧。

什么是偏门，就是有些片段很少使用，时[……]

阅读全文 »

2016年 CodePen 最热门的前端代码 Top 100

每年 Codepen 都会公布年度最热门的代码片段，这些片段有的技术超弦，有的超实用、有的超有创意，有空看看都能给我们带来灵感。

同时从 Codepen 的代码上也能学习一些牛人的写法，不管是设[……]

阅读全文 »

实用！最新前端速查表集合（css3 Flexbox/CSS动画/Bootstrap4）

今天分享的速查表你一定不会陌生，因为都是目前最新最流行的前端速查表（Cheat sheet），包含：Css3 Flexbox、ES6、jQuery 3 以及最新的 Bootstrap 4，前端人员可以[……]

阅读全文 »