[幻灯片] 重拾 CSS 的乐趣(上) #52

Open
cssmagic opened this Issue Aug 14, 2015 · 68 comments

Comments

Projects
None yet
Owner

cssmagic commented Aug 14, 2015 edited

[幻灯片] 重拾 CSS 的乐趣(上)

前言

我在第二届 CSS Conf(2015 中国 CSS 开发者大会)上的演讲广受好评,很多网友向我索取现场视频。条件所限,这个演讲并没有留下视频存档。因此,本文尝试在静态幻灯片的基础上,以文字的方式还原现场讲解,尽可能为不能去现场的朋友呈现最完整的体验。

我在每幅图片之间补充了讲解文字。你不用分辨每段文字是配合上图还是下图的,只管顺序阅读即可。


重拾 CSS 的乐趣 - 幻灯片封面

大家看到封面的画风,应该可以看出我今天走的不是技术路线,而是娱乐路线。如果说前面几位讲师的分享是烧脑的悬疑推理大片,我这个环节就是轻松愉快的爆米花电影了,大家可以放松一下。

CSS魔法 #百姓网#

接下来,接照惯例,需要介绍一下 “这个人”。有两个标签可以描述这个人。

首先,他来自百姓网(此处省略百姓网的诱人之处一百字)。欢迎各位小伙伴到百姓网来看一看,我们一起来玩些好玩的。

第二个标签是这个:

#把 CSS 写进名字的男人#

大家可能会说,“把 CSS 写进自己的名字”,听起来这么拽,那你上一届 CSS Conf 怎么没来?

CSS Conf

上一届 CSS Conf 我确实没有来。我给自己找的理由是北京太远了,我就不去了。但实际上我自己很清楚,真正的原因是,我并不知道自己应该在这样的大会上分享什么。

第二届 CSS Conf 就在上海,我没有任何理由不来,但我仍然需要面对这个问题——我要为现场的观众分享些什么呢?

其实,最近这几年,在 CSS 领域出现了很多好东西:

Sass、Stylus、Less、PostCSS 等 logo

当我听说它们、了解它们、使用它们的时候,我的心情是这样的——

插画:小男孩在游乐场

右边的这个小男孩就是我。我的心情是激动、新奇、兴奋。

那么,我会在 CSS Conf 上分享它们吗?一番思索之后,我的答案是——“不”。

有几个原因:首先,我相信肯定会有其它同学会分享它们;此外,它们不是 CSS,它们并不能解决我们在 CSS 上遇到的问题。

灰化的各个 logo

更重要的是,它们其实跟我没什么关系,它们是别人写的优秀的工具,而我只是在享受别人的发明所带来的便利。就好像我在游乐场 high 了一天之后,我还是我,还是要回到自己平凡的生活。

那我应该分享些什么?我尝试在记忆的长河中逆流而上,找寻 CSS 最初带给我的欣喜和感动。

插画:小男孩蹲在地上玩积木

我发现,有一件事情,即使在今天,仍然可以实实在在地带给我乐趣——那就是用 CSS 的各种神奇的特性,实现各种神奇的效果。有些效果甚至令人惊叹——“这怎么可能是用 CSS 实现的?!”

CSS魔法个人主页截图 - CSS 谜题 1

我的个人主页 上,收录了一些 CSS 谜题。所谓 “谜题”,就是需要费一番脑筋才能实现的效果。每一道题都有我自己的解答和评述。

CSS魔法个人主页截图 - CSS 谜题 2

在这些谜题中,收获最多赞叹的,应该是这个案例——弧形排列的可折叠二级导航。

弧形排列的可折叠二级导航

这是 2009 年的时候,一位网友在论坛里求助,说他们公司的设计师想要实现这样一个效果。大家看到背景是一个弧形的造型,所有导航菜单需要顺着这个背景图案以弧形排列。

弧形排列的可折叠二级导航 - 红框标注

而且,有些菜单是可以展开的(上图中加红框的部分)。当我点击第一个可展开菜单时,效果是这样的:

弧形排列的可折叠二级导航 - 导航展开演示 1

点击第二和第三个,展开效果是这样的:

弧形排列的可折叠二级导航 - 导航展开演示 2

……和这样的:

弧形排列的可折叠二级导航 - 导航展开演示 3

所有菜单项都需要顺滑地贴合这个弧形背景自然展开。

论坛里的网友纷纷表示,这样的效果应该用 Flash 来实现才对,用 CSS 怎么可能做到?!

我动了一番脑筋,最终把这个效果做了出来。当然,在这个例子里,我用到了一些 JS,用来监听点击事件、切换元素 class;除此以外所有的元素布局和定位都是由 CSS 来完成的,也就是说,你可以任意地改变菜单项的数量和内容。

大家可以试试,在 2009 年,要兼容 IE6,应该怎么做?

今天由于时间关系,我们不会讲解这个案例。我会跟大家聊一些跟 CSS 有关的趣事。我今天的分享分为两个部分:

幻灯片大纲:一件趣事、一件乐事

第一部分会介绍一件 CSS 能做的有趣的事情;第二部分是我最近遇到的一件值得高兴的事情。

首先,这件趣事就是用 CSS 画图标。

CSS 图标

请问现场有哪些同学尝试过?(仅前三排就有多人举手。)好的,试过的同学接下来一定会找到很多共鸣。

有同学可能会问:

为什么要用 CSS 画图标?

我这里不想找一些技术上的原因,单从感性的角度来回答这个问题。

为什么要用 CSS 画图标? - 好玩!

它太好玩了!只有你试过,你才知道它有多好玩。

有一句话,大家可能听过,是说 JS 的:

“所有可以用 JS 写的项目,最终一定会用 JS 重写一遍”

我这里借用这个句型,说一个 CSS 的版本:

“所有可以用 CSS 画出来的图形,最终一定会用 CSS 再画一遍”

不信?我们来看一些例子:

机器猫

在 CSS3 刚开始火起来的时候,大家肯定见过这张图——用 CSS3 画的机器猫。

iPhone 3GS

用纯 CSS 画的 iPhone。

小黄人

用 CSS 画的小黄人。

很多公司的 logo 也是很有特点的,也被网友用 CSS 画了出来,比如 Opera 的 logo:

Opera logo

最神奇的是下面这个:

IE8 logo

(笑声。)

居然还有网友用 CSS3 画了一个 IE8 的图标。不过,讽刺的是,IE8 自己完全没有能力正常渲染这个图标。(笑声。)

这件事情这么好玩,我自己当然也是做过的。

CMUI demo 页面截图

我写过一个移动端的 Web UI 框架叫 CMUI,在最初的版本中,图标的解决方案 就是用纯 CSS 来实现的。

我们来看一下用 CSS 画图标会用到哪些基本原理。

黑色矩形

怎样用 CSS 来画一个矩形?这没有任何难度,因为任何一个块元素本身就是矩形。

改变它的宽高,把它拉长,就可以得到一条线:

黑色水平线

那怎样得到一个三角形?

黑色三角形

在早期的 CSS 中,没有任何特性是跟斜线直接相关的。但你要相信劳动人民的智慧是无穷的。很快 CSS 开发者们就发现了关于边框的一个秘密。

黑色方框

这是一个加了边框的块元素。当我们把四个方向上的边框设置为不同的颜色时,效果会变成这样:

四边为彩色边框的矩形

我们会发现,在不同边框颜色的交界处,出现了一道斜边。接下来,我们逐渐减小这个元素的宽高至零,同时增加各条边框的厚度,最终会变成这个样子:

四个彩色三角形拼合的矩形

我们会得到四个头对头的三角形!

接下来,我们用透明色把不需要的三条边框隐去,就可以得到一个三角形:

绿色三角形

通过改变这个元素各条边框的厚度,就可以改变这个三角形各条边的角度。我们可以得到锐角三角形:

绿色三角形 - 顶角为锐角

……或者直角三角形等等。

绿色三角形 - 某个角为直角

以上是在 CSS2 时代用 CSS 画图标时我们可以做的。CSS3 为 CSS 增加了更加强大的能力,我们看来一个例子:

方框、圆角框、圆形

CSS3 增加了圆角属性,给一个矩形设置圆角,可以得到一个圆角矩形;逐渐增加圆角半径到一定的程度,我们就可以得到一个圆形。

线段、圆头线段、斜 45° 的圆头线段

圆角除了对边框有效,还可以对实色矩形生效。比如这条短线,我们可以把它设置为圆头的样式;CSS3 还增加了旋转这样的变形属性,我们可以把它扭转一定的角度。

把这两个图形组合起来,我们就可以得到……

放大镜图标

一个放大镜的图标。

根据这个思路,常见的图形都可以拆解开来,化整为零,用 CSS 画出来。比如下面这个:

加号

……这个:

房子

……和这个:

卡通小人半身像

下面这个图标稍稍有些复杂:

iOS 6 的动作图标

你可能会想,它居然也可以用 CSS 画出来?

我们先从简单的开始。三角形我们已经介绍过了,所以先把它隐去:

iOS 6 的动作图标 - 隐去三角形

再来看外层的那个有斜向缺口的矩形框。斜角缺口也需要利用边框交界处的斜边来实现,不过这个框无法用一个元素来实现,我们需要分两步走。完成一边:

iOS 6 的动作图标 - 隐去部分外框

……再完成一边:

iOS 6 的动作图标 - 隐去外框

最后我们剩下的难题似乎就是这个奇怪的形状了,好像是个鹰嘴的样子。

类似鹰嘴的图形

这个形状如何实现?给大家五秒钟的时间考虑一下。

在揭开谜底之前,我们需要了解一下:

关于圆角的两个真相

这里有一个块元素,设置了边框和圆角,它的两条边框会通过一段圆弧连接起来:

边框和圆角

首先,第一个真相,边框圆角可以指定两个半径值(下图中的 r1r2):

边框和圆角 - 标示圆角的半径

如果这两个半径值相等,则连接两条边框的圆弧就是一条相标准的 1/4 圆弧。如果不相等(比如我们把 r2 减小),会得到这样的效果:

边框和椭圆圆角

我们发现连接两条边框的圆弧会变成一道 1/4 椭圆弧。这个真相解决了我们在尺度上的问题。接下来,我们需要解决形状上的问题。

第二个真相,不同方向上的边框的厚度(下图中的 w1w4)也是可以不一样的:

边框和圆角 - 标示边框的厚度

如果我们逐渐减小 w4 的值至零,我们会得到这个形状:

类似鹰嘴的图形,末端延长

大家应该可以看出,我们需要的形状已经出现了。最后,我们调整一下这个元素的宽高,只保留我们需要的部分,就可以得到这个鹰嘴的形状。

类似鹰嘴的图形

最终,我们就实现了这个乍看起来不可能用 CSS 实现的图标。

iOS 6 的动作图标

看到这里,可能有同学会说:

“奇技淫巧”?

“你这是奇技淫巧啊!”

事实上,我们刚刚介绍的技巧都是标准的 CSS 特性。只有那些对 CSS 的各种特性观察入微的人,才有可能在非常规的场景之下把这些特性发挥出来,从而完成不可能完成的任务。——这是我对所谓 CSS “奇技淫巧” 的理解。

说到 CSS 图标这件事,有一个网站不能不提。

one-div.com 网页截图

这个网站叫 one-div.com,收录了这位站长制作的纯 CSS 图标。这个网站最大的特点在于,所有的图标只用到了一个 <div> 标签。(惊叹声。)很有创意,推荐大家观摩。

用 CSS 画图标这么好玩的事情,肯定不止我和这位站长会想到。我们搜索 “纯 CSS 图标” 这个关键字,可以发现有很多的案例和开源项目。

Google 搜索结果截图 1

当然,我们也会听到反对的声音。比如这一条:

Google 搜索结果截图 2

“用 CSS 画图标,这种疯狂的事情赶快停止吧!”

大家玩得这么开心,你一本正经地来教育大家,很无趣,对吧?当然,这篇文章的观点肯定有它的道理,但任何一门技术都是有优点和缺点的,要看使用场景。比如,下面就是一个正面的例子:

fileicon.css 项目主页截图

这是一个开源项目,叫 fileicon.css,作者是中国人。

为什么说它是一个正面的例子呢?因为,作为一个样式库,它的接口非常清晰。

代码

你只需要使用一个空元素,再加上一些有意义的属性就可以了。

然后,你就可以得到一个设计精致的文件图标了——它有着优雅的圆角,还有一个可爱的折角效果。

文件图标

我很喜欢这个项目。

不过在现有的版本中,它有一个小缺憾——只能把它放在纯白的背景上。如果你把它放在其它背景上,会发现它的折角的空缺位置是不透明的:

文件图标与透明背景

实际上能做到这一步已经很不容易了。大家可以自己试一下,用一个空标签把这样的图标做出来。

我很喜欢这个项目,于是我花了一点时间,给作者写了一个 demo。我用了一些 CSS 奇技淫巧,把折角处做成了真正的透明:

文件图标与透明背景

同时,我还顺手支持了 IE8。

文件图标与透明背景

因为 IE8 支持伪元素,我们没有理由放弃它。只不过 IE8 无法渲染圆角,我们在 IE8 下只有方角效果了。

笑脸

好的,以上就是我的分享的第一部分——CSS 图标。

(掌声。)


鸣谢

  • 插画作者:小妖(百姓网设计师)

相关阅读


© Creative Commons BY-NC-ND 4.0   |   我要订阅   |   我要打赏

Owner

cssmagic commented Aug 14, 2015 edited

待续……

坐等续集。。。

厉害!开眼界!坐等续集

Gxsghsn commented Aug 14, 2015

so cool~

确实屌~

mark

hax commented Aug 14, 2015

要是中间的几个slide能是动态(甚至让大家手动控制)就更好啦……

enjoy!

excited!期待下面

gushen commented Aug 14, 2015

不错

annnhan commented Aug 14, 2015

果然很赞~

hdming commented Aug 14, 2015

nice

掌声!这才是 CSS 该玩起来的东西。

此处应该有掌声!

kalends commented Aug 14, 2015

期待下文

“那些不是css”,这句最带感~~脑补了一下现场画面,减少了点损失,哈哈,期待(下)

amio commented Aug 14, 2015

赞!后悔木有去现场听……不过会后总结这么细致,魔法哥真是棒棒哒!

demohi commented Aug 14, 2015

👍

魔法哥讲出了css的真正魅力

jcpplus commented Aug 14, 2015

真的是太赞了!CSS的魅力就在于此

非常棒,非常好

非常赞,css魔法哥

前排

cssmagic added the CSS label Aug 14, 2015

赞!通过鹰嘴这东西学习了不少 border-radius 的知识。

tcdona commented Aug 15, 2015

赞!

jinking commented Aug 15, 2015

牛掰,我一直学css都是已实用为主,很少去对某个属性进行过深入的研究,这次算是大开眼界了

赞!学习CSS是有好多乐趣,看到这里的例子真是惊呆啦~

坐等下半部分

wtz commented Aug 16, 2015

很用心!赞!

屌~!

赞一个

Tankpt commented Aug 16, 2015

mark。这样的分享下面的同学都没机会走神了

赞!

0326 commented Aug 16, 2015

感谢分享!感觉纯CSS作图标还是很有应用价值的。目前我们在移动端图标都是用的iconfont,如果用纯CSS的话应该会更好吧。而且比较适合常用的不会经常更改的那种图标,不然维护成本还是比较大的。

先赞一下魔法哥~
https://github.com/saeedalipoor/icono
这个也是用css画icon的,而且只用一个tag(虽然伪类还是用了的),也是挺神奇的

额,好吧,没仔细看上面的slide,google搜出来第一个就是这货

等更

用一个div来做图标可以使用渐变色,box-shadow,以及:before,:after伪类,确实有点意思

you are fucking awesome

32个赞

鼓掌鼓掌!!

hugohua commented Aug 17, 2015

非常赞! css确实带来了非常大的乐趣。

cricy commented Aug 18, 2015

32个赞

L3au commented Aug 18, 2015

1024

太棒了!更加爱css了

@cssmagic 文章很屌,请问1ke.co能否转载你的文章,我们会加上原文链接:)

unbelievable!nice

厉害啊,css还能这么玩

你个吊冒。

屌啊,我以前就一直想用 一个 div 做图标,方便调用,一直都没做成。我就非常喜欢CSS的这些玩法。非常喜欢!!!

大赞

虽然觉得很厉害,但是还是感觉项目中不太会去用的。。尤其要支持低版本浏览器的情况下。。

原来魔法大神在百姓网,好像hax大大也在啊~

cnt1992 commented Aug 20, 2015

so diao

大赞,保持对css的童心,感觉不要太棒

icepy commented Aug 20, 2015

细细阅读30分钟,超赞~

e-cloud commented Aug 21, 2015

qq 20150821103019
大神能不能介绍一下这几个图标,没见过

Owner

cssmagic commented Aug 21, 2015

@e-cloud Compass、PostCSS 及其相关项目。

真是太棒了。完全是一番新的天地。感谢你带来如此美妙的一堂课。

Owner

cssmagic commented Aug 31, 2015

我将在 BXT 技术沙龙 的第一期再讲一次《重拾 CSS 的乐趣》,错过 CSS Conf 的同学速速报名吧!

很厉害,学习了,希望作者多出点这样好玩又有趣的东西^_^

linggan100 referenced this issue in linggan100/notebook Sep 19, 2015

Open

醉牛前端更新日志 #9

nice work~

m4jing commented May 17, 2016

Excellent job !

真是好看,作为一个刚入门的前端来说,受用很大。谢谢~

请问 弧形排列的可折叠二级导航 在哪里能看到代码?

Owner

cssmagic commented Jul 8, 2016

@zhishaofei3
貌似各大搜索引擎都可以搜到。

mayne commented Aug 24, 2016

开眼界。不过魔法哥的博客页面样式清奇

Norgara referenced this issue in Norgara/idea Aug 25, 2016

Open

LESS、SCSS #20

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment