澳门新萄京官方网站-www.8455.com-澳门新萄京赌场网址

澳门新萄京官方网站:只使用一个块级元素绘制

2019-09-11 作者:澳门新萄京赌场网址   |   浏览(87)

重拾 CSS 的乐趣(上)

2015/09/06 · CSS · 5 评论 · CSS

本文作者: 伯乐在线 - CSS魔法 。未经作者许可,禁止转载!
欢迎加入伯乐在线 专栏作者。

前言

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

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

澳门新萄京官方网站 1

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

澳门新萄京官方网站 2

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

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

第二个标签是这个:

澳门新萄京官方网站 3

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

澳门新萄京官方网站 4

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

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

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

澳门新萄京官方网站 5

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

澳门新萄京官方网站 6

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

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

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

澳门新萄京官方网站 7

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

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

澳门新萄京官方网站 8

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

澳门新萄京官方网站 9

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

澳门新萄京官方网站 10

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

澳门新萄京官方网站 11

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

澳门新萄京官方网站 12

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

澳门新萄京官方网站 13

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

澳门新萄京官方网站 14

……和这样的:

澳门新萄京官方网站 15

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

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

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

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

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

澳门新萄京官方网站 16

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

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

澳门新萄京官方网站 17

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

有同学可能会问:

澳门新萄京官方网站 18

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

澳门新萄京官方网站 19

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

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

澳门新萄京官方网站 20

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

澳门新萄京官方网站 21

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

澳门新萄京官方网站 22

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

澳门新萄京官方网站 23

用纯 CSS 画的 iPhone。

澳门新萄京官方网站 24

用 CSS 画的小黄人。

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

澳门新萄京官方网站 25

最神奇的是下面这个:

澳门新萄京官方网站 26

(笑声。)

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

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

澳门新萄京官方网站 27

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

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

澳门新萄京官方网站 28

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

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

澳门新萄京官方网站 29

那怎样得到一个三角形?

澳门新萄京官方网站 30

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

澳门新萄京官方网站 31

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

澳门新萄京官方网站 32

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

澳门新萄京官方网站 33

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

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

澳门新萄京官方网站 34

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

澳门新萄京官方网站 35

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

澳门新萄京官方网站 36

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

澳门新萄京官方网站 37

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

澳门新萄京官方网站 38

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

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

澳门新萄京官方网站 39

一个放大镜的图标。

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

澳门新萄京官方网站 40

……这个:

澳门新萄京官方网站 41

……和这个:

澳门新萄京官方网站 42

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

澳门新萄京官方网站 43

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

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

澳门新萄京官方网站 44

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

澳门新萄京官方网站 45

……再完成一边:

澳门新萄京官方网站 46

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

澳门新萄京官方网站 47

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

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

澳门新萄京官方网站 48

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

澳门新萄京官方网站 49

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

澳门新萄京官方网站 50

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

澳门新萄京官方网站 51

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

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

澳门新萄京官方网站 52

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

澳门新萄京官方网站 53

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

澳门新萄京官方网站 54

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

澳门新萄京官方网站 55

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

澳门新萄京官方网站 56

“你这是奇技淫巧啊!”

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

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

澳门新萄京官方网站 57

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

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

澳门新萄京官方网站 58

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

澳门新萄京官方网站 59

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

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

澳门新萄京官方网站 60

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

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

澳门新萄京官方网站 61

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

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

澳门新萄京官方网站 62

我很喜欢这个项目。

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

澳门新萄京官方网站 63

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

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

澳门新萄京官方网站 64

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

澳门新萄京官方网站 65

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

澳门新萄京官方网站 66

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

(掌声。)


图标不是有设计师在设计软件中做吗?为什么要用CSS来绘制图标呢?原因就是好玩儿呗!而且同时还是加强我们的CSS熟练度以及考验我们的思考能力。何乐而不为呢。我们今天就一起来看看怎么用CSS绘制图标。

本文旨在介绍制作一些常用的图标图形,拓展大家对CSS的认知,不要仅限于在定位子等简单功能上,觉得css简单的人,大部分都是对css未有有足够认知;本文后面的几个案例,拓展看官在使用css时的思路,不要定式在某一个狭小的使用领域中,埋没它强大的能力。

重拾 CSS 的乐趣(下)

2015/09/06 · CSS · 1 评论 · CSS

本文作者: 伯乐在线 - CSS魔法 。未经作者许可,禁止转载!
欢迎加入伯乐在线 专栏作者。

接下来,要向大家介绍一件最近让我非常高兴的事情。我相信它也会是所有 CSS 开发者欢欣鼓舞的一件事。

澳门新萄京官方网站 67

是关于一本书的。

我对这本书的评价是这样的:

澳门新萄京官方网站 68

说到 CSS 图书,问题来了。

澳门新萄京官方网站 69

如果你的书架只能放得下三本 CSS 书,我会推荐哪三本呢?

澳门新萄京官方网站 70

第一本,《CSS 权威指南》。

这是一本非常经典的 CSS 参考书,它的经典之处在于,它用普通人类可以理解的语言系统、全面地讲解了 CSS 规范。这本书会告诉你,CSS 是什么、CSS 有什么、CSS 可以做什么。

这本书的最新版本——第三版——的英文版出版于 2006 年。

澳门新萄京官方网站 71

第二本书,《精通 CSS》。这同样是一本非常经典的 CSS 图书,它侧重于实践,告诉你如何正确地使用 CSS。(封面图片采用了大家比较容易买到的中文版第二版。)

这本书的英文原版第一版出版于 2006 年。

大家可能注意到了,这两本都出版于 2006 年。而今年已经是 2015 年了。

澳门新萄京官方网站 72

近十年来,我一直在等待第三本重量级 CSS 图书的出现。

终于,它来了:

澳门新萄京官方网站 73

这本书叫《CSS Secrets》,6 月份刚刚出版。(这本书的中文名还没有正式确定,封面图片暂采用英文原版。)

我们先来看看它的作者:

澳门新萄京官方网站 74

作者叫 Lea Verou,她是一位资深 Web 开发者,有着丰富的实践经验。更重要的是,她是 W3C CSS 工作组的特邀专家——CSS 工作组汇集了这个领域内的专家,他们是制定 CSS 规范、设计 CSS 这门语言的一群人——全球只有极少数顶尖的开发者才有机会获邀加入 CSS 工作组。

国内开发者亲切地称呼她为 “CSS 一姐”。

那这本书到底好在哪里呢?

澳门新萄京官方网站 75

(此处略去两百字)

澳门新萄京官方网站 76

对 CSS 初学者来说,我强烈建议先去读前面两本书,因为读这本书还是需要有一定的基础的。如果实在等不及,可以把它当作 cookbook 来解决你迫在眉睫的问题。

对于中级的 CSS 开发者来说,这本书可以发挥最大的功效——它可以帮助你进阶。相信很多开发者在学习 CSS 到了一定阶段的时候,感觉自己好像什么都会了,但遇到复杂问题时往往又感觉捉襟见肘、力不从心。这就是遇到瓶颈了。如何突破瓶颈、进入下一个阶段?要做的无非是两件事——实践和思考。书并不能代替你思考,但一本好书可以向你示范,什么样的思考方式是正确的。

如果你已经是一位 CSS 专家了,已经有些飘飘然了,那这本书可以告诉你和这个星球上最顶尖的 CSS 专家的差距在哪里,从而帮助你找到人生下一阶段的目标和动力。

说了这么多,大家心里可能会想:你吹得挺玄乎,能不能举个书里面的例子来看一看?

澳门新萄京官方网站 77

好,我们来看个例子。

在这里我要强调一下,因为时间关系,我在这里引用的只是一个非常浅显的案例。书中的绝大多数案例都要比它复杂。

这个例子是这样的:

澳门新萄京官方网站 78

对于边框我们都非常熟悉了。边框是我们美化网页、增强样式最常用的手段之一。

澳门新萄京官方网站 79

有些时候,我们的需求是给一个容器加上多重边框:

澳门新萄京官方网站 80

对于这个需求,我们最容易想到的就是给它再加一层标签:

澳门新萄京官方网站 81

不过有些时候,我们可能无法修改结构,或者修改结构的成本很高,此时就需要我们在纯 CSS 层面解决这个问题。

说到边框,首先我们可能会联想到 outline 属性。

澳门新萄京官方网站 82

我们暂且把 outline 称作 “描边”。描边属性跟边框有很多相似之处,但由于早期的 IE 并不支持,了解它的人可能没有那么多。描边是绘制在边框的外圈的,因此,通过 outline 属性我们就可以很容易地实现双层边框了。

描边有一个好处在于,它跟边框类似,可以设置各种线型,比如虚线:

澳门新萄京官方网站 83

而且更好玩的是,还有一个 outline-offset 属性,可以控制描边的偏移量。

澳门新萄京官方网站 84

我们可以把这层描边扩展出去:

澳门新萄京官方网站 85

这个属性甚至还可以接受负值。如果是负值,描边会向内收缩,并叠加在边框之上:

澳门新萄京官方网站 86

利用这个特性可以玩出很多好玩的效果。

不过描边有一个缺陷——如果这个容器本身有圆角的话,描边并不能完全贴合圆角。目前所有浏览器的行为都是这样的:

澳门新萄京官方网站 87

所以,如果你需要圆角,就要另寻它法了。

于是接下来,我们又想到了投影这个属性。

澳门新萄京官方网站 88

相信大家都用过投影,它可以让我们的网站更具立体感和层次感。

我们通常是这样设置投影的:

澳门新萄京官方网站 89

前面三个长度值,再加一个颜色值。

前两个长度值分别表示投影在水平和垂直方向上的偏移量,第三个长度值表示投影的模糊半径(也就是模糊的程度);颜色值就是投影的颜色。

如果我们把前三个值都设为零,实际上是没有任何效果的。因为如果投影即不偏移也不模糊,刚好会被这个元素自己严严实实地遮住。

很多人可能不知道的是,投影还可以有第四个长度值。这个值表示投影向外扩张的程度:

澳门新萄京官方网站 90

这样,投影就会从元素的底下露出一圈了。

关于投影,另外一个不是每个人都知道的特性是,投影属性其实可以接受一个列表,我们可以一次赋予它多层投影,像这样:

澳门新萄京官方网站 91

这样我们就得到了超过两层的 “边框” 效果了。

投影的另外一个好处是,它的扩张效果是根据元素自己的形状来的。如果元素是矩形,它扩张开来就是一个更大的矩形;如果元素有圆角,它也会扩张出圆角。

澳门新萄京官方网站 92

所以对于圆角的场景,它也不在话下。

澳门新萄京官方网站 93

这两种方法还有什么需要注意的地方?这本书也很贴心地注明了。

由于描边和投影都是不影响布局的,所以如果这个元素和其它元素的相对位置关系很重要,就需要我们以外边距等方式来为这些多出来的 “边框” 腾出位置,以防被其它元素盖住。

因此,从这个意义上来说,使用内嵌投影似乎是更好的选择。因为内嵌投影让投影出现在元素内部,我们可以用内边距在元素的内部消化掉这些额外 “边框” 所需要的空间,处理起来更容易一些。

澳门新萄京官方网站 94

好的,这个例子就讲完了。

(掌声。)

讲到这里,我看到有些同学一脸意犹未尽的表情,你们的心情可能是这样的:

澳门新萄京官方网站 95

OK,再来一个。

这个例子并不是书中直接提到的,而是我在读这本书的过程中,受它启发,再结合自己的实践所想到的,这里拿出来跟大家分享。

这个案例叫做:

澳门新萄京官方网站 96

什么叫 “圆润的标签页” 呢?

标签页我们都很熟悉了,它是一种常用的 UI 元素。

澳门新萄京官方网站 97

我们把它拉近来看一看:

澳门新萄京官方网站 98

这个标签还是比较美观的,我们用圆角让它看起来很接近真实的标签造型。不过我们也注意到,它底部的两个直角看起来似乎有点生硬。

所以设计师原本期望的效果可能是这样的:

澳门新萄京官方网站 99

这样就自然多了。但这看起来似乎很难实现啊!

我们的难点主要在这里:

澳门新萄京官方网站 100

这个特殊的形状如何实现?

我们把它放大来看一下:

澳门新萄京官方网站 101

首先我们可能会想到用图片。这当然是可行的,但图片有种种局限,我们最好还是完全用 CSS 来实现它。

好,接下来我们来分析一下它的形状。它其实就是一个方形,再挖掉一个 90° 的扇形。于是我们试着创建一个方形,再用背景色做出一个扇形叠加上去:

澳门新萄京官方网站 102

看起来好像可以了。但这是骗人的啊!

把它放在复杂背景下,立马就露馅了——扇形部分不是透明的:

澳门新萄京官方网站 103

所以,我们的问题就变成了:

澳门新萄京官方网站 104

对于普通外凸的圆角,我们都已经非常熟悉了:

澳门新萄京官方网站 105

我们用圆角属性就可以得到:

澳门新萄京官方网站 106

但我们需要的是一个内凹的圆角形状。

这是一个实实在在的需求,于是有开发者曾经提议,扩展圆角属性,让它支持负值。如果是负值,圆角就不再是外凸的,而是内凹的。这个提议听起来似乎很有道理,语法设计也很紧凑。

澳门新萄京官方网站 107

但实际上它的语义不够准确。因此 CSS 工作组并没有接受这个提议,并未将它纳入标准。

澳门新萄京官方网站 108

这条路走不通,我们还需要继续探索。

我们顺着这个方向,头脑中很自然地会迸出这个疑问:

澳门新萄京官方网站 109

答案当然是有的:

澳门新萄京官方网站 110

“径向渐变” 特性就是跟圆形有关的。

不过它稍稍有些复杂。在讲解径向渐变之前,我们先来看一看比较简单的 “线性渐变”。

澳门新萄京官方网站 111

说到渐变,那自然需要有一个容器。然后,还需要有两种颜色。渐变的颜色设置我们称之为 “色标”——每个色标不仅有颜色信息,还有位置信息。

我们给起点和终点的色标分别设置颜色,就可以得到一条渐变图案:

澳门新萄京官方网站 112

我在这里使用了绿色来展示这个渐变,大家可能会觉得绿色很难看。实际上这是有意安排的——由于人眼对绿色的亮度变化是最为敏感的,这里使用绿色是为了让大家看得更清楚,而不是我的审美出了问题。(笑声。)

接下来,关于渐变,我们其实可以设置不止两个色标。比如我们可以在中央再增加一个色标。请注意我们特意选择了跟起点色标一样的颜色。我们得到的效果如下:

澳门新萄京官方网站 113

我们发现,渐变只发生在颜色不同的色标之间。如果两个色标的颜色相同,则它们之间会显示为一块实色。

好的,我们继续增加色标。这次我们在渐变地带的中央增加一个色标,且让它的颜色和终点色标相同:

澳门新萄京官方网站 114

根据上面的经验,这个结果正是我们所预料的——渐变只发生在颜色不同的色标之间。

接下来,我们玩点更特别的,我们把中间的两个色标相互靠近直至重合,会发生什么?

澳门新萄京官方网站 115

实际上这个渐变也会趋向于零。也就是说,虽然这本质上仍然是一个 “渐变” 图案,但经过我们的精心设计之后,我们最终得到了两个纯色的色块条纹。

如果我们把终点颜色换为透明色……

澳门新萄京官方网站 116

我们甚至还会得到实色和透明色间隔的条纹。

好的,接下来我们来看径向渐变。它稍稍有些复杂,但原理是一样的。

同样,我们需要有一个容器。但对径向渐变来说,顾名思议,所有色标是排布在一条半径上的。也就是说,我们还需要有一个圆心。默认情况下,圆心就是这个容器的正中心:

澳门新萄京官方网站 117

而这条半径就是圆心指向容器最远端的一条假想的线:

澳门新萄京官方网站 118

接下来,我们要设置一些色标:

澳门新萄京官方网站 119

说到这里,就要讲解一下径向渐变的特别之处。所有色标的颜色变化推进不是像线性渐变那样平行推进的,而是以同心圆的方式向外扩散的——就像水池里被石子激起的涟漪那样。

看到这个色标的分布,我们应该可以想像出线性渐变的结果是什么;但这里我们把它按照径向渐变的特征来推演一下,实际上最终的效果是这样的:

澳门新萄京官方网站 120

我们把所有辅助性的标记都去掉,只留下渐变图案:

澳门新萄京官方网站 121

这是一个穿了个窟窿的实色背景。很好玩是吧?不过不要忘了我们是为什么来到这儿的——我们是为了得到一个内凹圆角的形状。

细心的朋友可能已经发现了,我们需要的东西已经出现了:

澳门新萄京官方网站 122

接下来,我们调整一下圆心的位置和容器的尺寸,就可以得到这个内凹圆角的造型了。

澳门新萄京官方网站 123

利用这个技巧,我们用纯 CSS 最终实现了这个看似不可能的 “圆润的标签页” 效果!

澳门新萄京官方网站 124

(掌声。)

澳门新萄京官方网站 125

好的,我们来回顾一下今天分享的主要内容:

澳门新萄京官方网站 126

(现场的分享到这里就结束了。以下是因为时间关系被剪掉的片断。)

澳门新萄京官方网站 127

关于《CSS Secrets》这本书,大家可能会有一个问题:

这本书有中文版吗?

澳门新萄京官方网站 128

这本书已经由国内顶尖的计算机图书公司 “图灵文化” 引进;同时,我本人也很荣幸争取到了这本书的中文版翻译权。

澳门新萄京官方网站 129

在最理想的情况下,这本书的中文版在年内就可以在各大书店上架。当然,电子版会更快,图灵官网最快本月内就会发布免费试读章节。

在翻译这本书的过程中,我有很多想要补充的内容,但限于篇幅,不可能在原书中插入过多的译注。因此,我萌生了一个想法——为这本书写注解。

澳门新萄京官方网站 130

萌生这个想法有两个原因:

一方面,这本书不适合初学者阅读,书中的很多难点都一笔带过了,而这些难点往往是值得展开讨论的。

另一方面,书中提供的解决方案以标准为导向,极少涉及浏览器的私有属性。部分解决方案所采用的 CSS 特性太新,以致于在眼下还没有浏览器很好地实现。而实际上有些非标准的解决方案已经比较成熟了,在特定场景下往往会发挥更好的作用。我认为有必要提供这些知识,以供国内的开发者们参考。

澳门新萄京官方网站 131

在翻译完这本书之后,我一定会写。写多少字、什么时候写完,现在还不确定,但我在这里可以承诺的是,我一定会写。

而且,我会以免费、开源的方式来完成这个计划。原书是需要大家自己购买的,但我写的这份注解一定会在 GitHub 上免费发布!

(此处可能有掌声。)

澳门新萄京官方网站 132

我今天的分享到这里就结束了,大家有问题吗?

3 赞 8 收藏 1 评论

1.灵活的背景定位

澳门新萄京官方网站 133

实现效果背景距离右边10px,底部10px

方法一:calc()

background: url(http://csssecrets.ioode-pirate.svg)
                no-repeat  #58a;
    background-position: calc(100% - 20px)  calc(100% - 10px); //图片距离左边 底部的距离

    /* Styling */
    max-width: 10em;
    min-height: 5em;
    padding: 10px;
    color: white;
    font: 100%/1 sans-serif;

请不要忘记在 calc() 函数 内部的 - 和 运算符的两侧各加 一个空白符,否则会产生解析错 误!

兼容问题:
浏览器对calc()的兼容性还算不错,在IE9 、FF4.0 、Chrome19 、Safari6 都得到较好支持,同样需要在其前面加上各浏览器厂商的识别符,不过可惜的是,移动端的浏览器还没仅有“firefox for android 14.0”支持,其他的全军覆没。

方法二:background-position

background: url(http://csssecrets.ioode-pirate.svg)
                no-repeat right 10px bottom 10px #58a;
    /* Styling */
    max-width: 10em;
    min-height: 5em;
    padding: 10px;
    color: white;
    font: 100%/1 sans-serif;

方法三:background-origin

background: url(http://csssecrets.ioode-pirate.svg)
                no-repeat  #58a;
  background-origin:content-box; //内容区域为准 不包含padding,形成10px的距离。
    max-width: 10em;
    min-height: 5em;
    padding: 10px;

    color: white;
    font: 100%/1 sans-serif;

鸣谢

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

    4 赞 6 收藏 5 评论

在这之前我们先来看几个网友用CSS画的图标

  以下CSS代码均没有添加浏览器适配,请看官自行添加;这里提供一个智能适配工具 pleeease,对适配语法不太熟,可以用它帮帮忙。效果截图如下所示:

关于作者:CSS魔法

澳门新萄京官方网站 134

百姓网前端工程师,移动 Web UI 框架 CMUI 作者,自称 “披着前端工程师外衣的设计师”。 个人主页 · 我的文章 · 12 ·     

澳门新萄京官方网站 135

2. 边框内圆角

澳门新萄京官方网站 136

实现效果

方法一:一般实现方式,两个元素可以实现。

代码略

方法二:一个元素来搞定 配合box-shadow

div {
    outline: .6em solid #655;
    box-shadow: 0 0 0 .34em #655;
        border-radius: .8em;
        width: 10em;
    padding: 1em;
    background: tan;
}

box-shadow 会刚好填补描边和容器圆角之间的空隙, 这两者的组合达成了我们想要的效果。

请注意,我们为 box-shadow 属性指定的扩张值并不一定等于描边的宽 度,我们只需要指定一个足够填补“空隙”的扩张值就可以了。这个值是多少呢?

澳门新萄京官方网站 137

相对于是:圆心到角的距离减去半径就好。一般差不多就是圆角的一半。

关于作者:CSS魔法

澳门新萄京官方网站 138

百姓网前端工程师,移动 Web UI 框架 CMUI 作者,自称 “披着前端工程师外衣的设计师”。 个人主页 · 我的文章 · 12 ·     

澳门新萄京官方网站 139

澳门新萄京官方网站 140

澳门新萄京官方网站 141

3. 条纹背景

linear-gradient学习地址: https://developer.mozilla.org/zh-CN/docs/Web/CSS/linear-gradient
水平条纹:

澳门新萄京官方网站 142

实现效果

background:linear-gradient(#fb3 50%,#58a 50%);//可调整该值查看不同的效果
background-size:100% 30px; //去掉此行就是对半分的背景
height:300px;
width:300px;

垂直条纹:

澳门新萄京官方网站 143

实现效果

background:linear-gradient(to right,#fb3 50%,#58a 50%);//可调整该值查看不同的效果
background-size:30px 100%; //去掉此行就是对半分的背景
height:300px;
width:300px;

斜向条纹:

澳门新萄京官方网站 144

效果1

background:linear-gradient(45deg,#fb3 50%,#58a 50%);//可调整该值查看不同的效果
background-size:30px 100%; //去掉此行就是对半分的背景
height:300px;
width:300px;

澳门新萄京官方网站 145

效果2

div{
    background: linear-gradient(45deg,
#fb3 25%, #58a 0, #58a 50%,
#fb3 0, #fb3 75%, #58a 0); background-size: 30px 30px;
    height:300px;
    width:300px;
}

澳门新萄京官方网站 146

4. 图形边框

澳门新萄京官方网站 147

效果一

div {
    padding: 1em;
    border: 1em solid transparent;
    background: linear-gradient(white, white) padding-box,
                repeating-linear-gradient(-45deg, red 0, red 12.5%, transparent 0, transparent 25%, 
                  #58a 0, #58a 37.5%, transparent 0, transparent 50%) 0 / 6em 6em;

    max-width: 20em;
    font: 100%/1.6 Baskerville, Palatino, serif;
}

澳门新萄京官方网站 148

边框动效

@keyframes ants { to { background-position: 100% 100% } }

div {
    padding: 1em;
    border: 1px solid transparent;
    background: linear-gradient(white, white) padding-box,
                repeating-linear-gradient(-45deg, black 0, black 25%, transparent 0, transparent 50%) 0 / .6em .6em;
    animation: ants 12s linear infinite;

    max-width: 20em;
    font: 100%/1.6 Baskerville, Palatino, serif;
}

澳门新萄京官方网站 149

# Base HTML

  为了简单,这里不做父容器控制,我们需要一个块级元素如 div

<div class="shape"></div>

5. 垂直居中问题

详见css垂直居中总结

上面的这些图标都是用CSS3花出来的,是不是很好玩儿,很有趣。非常的酷炫狂拽。想不想自己也试一试呢?

# 矩形 - Square / Rectangle

  写给1岁小朋友看的~谁说如此,但作为基础还是要了解,css的块级元素都是以一个矩形为基础生成的。

.shape {
    width: 100px;
    height: 100px;
    background: lightgreen;
}

澳门新萄京官方网站 150

6. 弹跳动画
/**
 * Bouncing animation
 */

@keyframes bounce {
    60%, 80%, to {
        transform: translateY(400px);
        animation-timing-function: ease;
    }
    70% { transform: translateY(300px); }
    90% { transform: translateY(360px); }
}

.ball {
    width: 0; height: 0; padding: 1.5em;
    border-radius: 50%;
    margin: auto;
    background: red radial-gradient(at 30% 30%, #fdd, red);
    animation: bounce 2s cubic-bezier(.1,.25,1,.25) forwards;
}

body {
    background: linear-gradient(skyblue, white 450px, yellowgreen 0);
    min-height: 100vh;
}

澳门新萄京官方网站 151

效果

#######7. 轨迹动画

@keyframes spin {
    from {
        transform: rotate(0turn)
                   translateY(-150px) translateY(50%)
                   rotate(1turn)
    }
    to {
        transform: rotate(1turn)
                   translateY(-150px) translateY(50%)
                   rotate(0turn);
    }
}


.avatar {
    animation: spin 3s infinite linear;
}


.avatar {
    display: block;
    width: 50px;
    margin: calc(50% - 25px) auto 0;
    border-radius: 50%;
    overflow: hidden;
}

.path {
    width: 300px; height: 300px;
    padding: 20px;
    margin: 100px auto;
    border-radius: 50%;
    background: #fb3;
}

澳门新萄京官方网站 152

截图一部分效果

好了,先来考虑一下用CSS画图标的原理:

# 圆形 - Circle

  在矩形的基础上,增加50%圆角属性

.shape {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: lightgreen;
}

澳门新萄京官方网站 153

8. 状态平滑的动画

澳门新萄京官方网站 154

效果

@keyframes panoramic {
    to { background-position: 100% 0; }
}

.panoramic {
    width: 150px; height: 150px;
    background: url('http://c3.staticflickr.com/3/2671/3904743709_74bc76d5ac_b.jpg');
    background-size: auto 100%; 
    animation: panoramic 10s linear infinite alternate;
    animation-play-state: paused;
}

.panoramic:hover, .panoramic:focus {
    animation-play-state: running;
}

<div class="panoramic"></div>

比如说一个矩形,怎么用CSS来画

# 椭圆形 - Oval

  正方形设置50%圆角就是圆形,长方形设置50%圆角就是椭圆形

.shape {
    width: 150px;
    height: 100px;
    border-radius: 50%;
    background: lightgreen;
}

澳门新萄京官方网站 155


  以上的形状是百分之九十九点九的人都会的,不需要任何思路和记忆,接下来的几个图形,则需要你动动脑子了

9. 简单的饼状图
//html
<div class="pie"></div>

//css
.pie {
    width: 100px; height: 100px;
    border-radius: 50%;
    background: yellowgreen;
    background-image: linear-gradient(to right, transparent 50%, currentColor 0);
    color: #655;
}

.pie::before {
    content: '';
    display: block;
    margin-left: 50%;
    height: 100%;
    border-radius: 0 100% 100% 0 / 50%;
    background-color: inherit;
    transform-origin: left;
    animation: spin 3s linear infinite, bg 6s step-end infinite;
}

@keyframes spin {
    to { transform: rotate(.5turn); } //turn是圈的意思 
}
@keyframes bg {
    50% { background: currentColor; } //currentColor是表示当前的color的值,很少有人用各大浏览器基本都支持。
}

澳门新萄京官方网站 156

效果

澳门新萄京官方网站 157

# 三角形 - Triangle UP

【思路】css中的border,是描述图形的边框,如果一个矩形的宽高为0,边框为某个值如100px,那么就能呈现出三角形效果

.shape {
    width: 0px;
    height: 0px;
    border-top: solid 100px pink;
    border-left: solid 100px pink;
    border-right: solid 100px pink;
    border-bottom: solid 100px lightgreen;
    background: lightgreen;
}

澳门新萄京官方网站 158

  得到上述信息后,我们将 上、右、左 部分设置成和父元素一样的颜色,就能得到下方三角形模块

澳门新萄京官方网站 159

但还是有一个问题,这样实际三角形的位置回比预期位置低,你可能会想到将三角形向上移动,其实不必那么麻烦,既然上三角不需要,直接去掉上边框即可,如下:

.shape {
    width: 0px;
    height: 0px;
    border-left: solid 100px pink;
    border-right: solid 100px pink;
    border-bottom: solid 100px lightgreen;
    background: lightgreen;
}

澳门新萄京官方网站 160

【扩展】到这里,你应该也明白怎么设置其他三个方向的三角形,如果要做到任意方向,还需要加入transform:rotate()属性。  

10. box-shadow
box-shadow: h-shadow v-shadow blur spread color inset;

h-shadow:必需。水平阴影的位置。允许负值。   
v-shadow:   必需。垂直阴影的位置。允许负值。
blur:可选。模糊距离。   
spread:可选。阴影的尺寸。
color:可选。阴影的颜色。
inset:可选。将外部阴影 (outset) 改为内部阴影。         

单侧投影:

1.右边和底部都有
div {
    width: 1.6in;
    height: 1in;
    background: #fb3;
    box-shadow: 3px 3px 6px -3px black;
}

2.底部有投影
div {
    width: 1.6in;
    height: 1in;
    background: #fb3;
    box-shadow: 0px 5px 4px -4px black;
}

澳门新萄京官方网站 161

1

澳门新萄京官方网站 162

2

双侧投影:

div {
    width: 1.6in;
    height: 1in;
    background: #fb3;
    box-shadow: 5px 0 5px -5px black,
               -5px 0 5px -5px black;
}

澳门新萄京官方网站 163

双侧投影

我想这个对于大家来说是很简单的,只要学习过CSS的肯定都能画出来,我们稍微调整一下它的宽高,又能得到正方形了,线状之类的图形:

# 直角三角形

  细心的朋友也许会发现,当我们去掉顶部边框 border-top 时,即

.shape {
    width: 0px;
    height: 0px;
    border-left: solid 100px lightblue;
    border-right: solid 100px pink;
    border-bottom: solid 100px transparent;
    background: lightgreen;
}

会出现如下效果,如果我们把关注点移到左上角和右下角呢?是不是看到了两个直角三角形?

澳门新萄京官方网站 164

那如果我们再去掉右边框border-right,就剩下:

.shape {
    width: 0px;
    height: 0px;
    border-left: solid 100px lightblue;
    border-bottom: solid 100px transparent;
    background: lightgreen;
}

澳门新萄京官方网站 165

OK,两个三角形就出来了,只要我们把其中一个设置成父元素的颜色,就能获得另一个三角形图形。用同样的方法去获取另外几个方向的直角三角形
最终效果:

澳门新萄京官方网站 166

11. 不规则的投影 filter(浏览器的支持不是很好,IE完全不支持)

当我们想给一个矩形或其他能用 border-radius 生成的形状(在“自 适应的椭圆”一节中可以看到一些示例)加投影时,box-shadow 的表现都 堪称完美。

但是,当元素添加了一些伪元素或半透明的装饰之后,它就有些 力不从心了,因为 border-radius 会无耻地忽视透明部分。这类情况包括:

�1. 半透明图像、背景图像、或者 border-image(比如老式的金质像框);
�2. 元素设置了点状、虚线或半透明的边框,但没有背景(或者当
background-clip 不是 border-box 时);
�3. 对话气泡,它的小尾巴通常是用伪元素生成的;
�4. 我们在“切角效果”一节中见过的切角形状;

  1. 几乎所有的折角效果,包括“折角效果”一节将提到的例子;
  2. 通过 clip-path 生成的形状。

澳门新萄京官方网站 167

box-shadow实现这些的效果

场景一:

澳门新萄京官方网站 168

场景一

<div class="speech"></div>

div {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    vertical-align: bottom;
    box-sizing: border-box;
    width: 5.9em;
    height: 5.2em;
    margin: .6em;
    background: #fb3;
    /*box-shadow: .1em .1em .3em rgba(0,0,0,.5);*/
    -webkit-filter: drop-shadow(.1em .1em .1em rgba(0,0,0,.5));
    filter: drop-shadow(.1em .1em .1em rgba(0,0,0,.5));
}

.speech {
    border-radius: .3em;
}
.speech::before {
    content: '';
    position: absolute;
    top: 1em;
    right: -.7em;
    width: 0;
    height: 0;
    border: 1em solid transparent;
    border-left-color: #fb3;
    border-right-width: 0;
}

场景二:

澳门新萄京官方网站 169

场景二

<div class="dotted">Dotted border</div>

div {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    vertical-align: bottom;
    box-sizing: border-box;
    width: 5.9em;
    height: 5.2em;
    margin: .6em;
    background: #fb3;
    /*box-shadow: .1em .1em .3em rgba(0,0,0,.5);*/
    -webkit-filter: drop-shadow(.1em .1em .1em rgba(0,0,0,.5));
    filter: drop-shadow(.1em .1em .1em rgba(0,0,0,.5));
}
.dotted {
    background: transparent;
    border: .3em dotted #fb3;
}

场景三:

澳门新萄京官方网站 170

场景三

<div class="cutout">Cutout corners</div>

div {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    vertical-align: bottom;
    box-sizing: border-box;
    width: 5.9em;
    height: 5.2em;
    margin: .6em;
    background: #fb3;
    /*box-shadow: .1em .1em .3em rgba(0,0,0,.5);*/
    -webkit-filter: drop-shadow(.1em .1em .1em rgba(0,0,0,.5));
    filter: drop-shadow(.1em .1em .1em rgba(0,0,0,.5));
}


.cutout {
    border: .5em solid #58a;
    border-image: 1 url('data:image/svg xml,
                         <svg xmlns="http://www.w3.org/2000/svg"
                         width="3" height="3" fill="#fb3">
                         <polygon points="0,1 1,0 2,0 3,1 3,2 2,3 1,3 0,2"/>
                </svg>');
    background-clip: padding-box;
}

澳门新萄京官方网站 171

# 梯形 - Trapezoid

  在会了三角形的情况下,梯形也就变得非常容易了,思路稍微转变一下,三角形是上边长为0的特殊梯形,如果我们把上边长拉长,如下

.shape {
    width: 100px;
    height: 0px;
    border-left: solid 50px #2e2e2e;
    border-right: solid 50px #2e2e2e;
    border-bottom: solid 100px transparent;
    background: lightgreen;
}

澳门新萄京官方网站 172

  注意,三边长拉长只是修改width,而height 并不需要修改。也许你会问,那什么情况下要设置 height 呢?我的回答是,height其实并不需要,除非你想要有如下的效果:

澳门新萄京官方网站 173

澳门新萄京官方网站 174

# 平行四边形 - Parallelogram

  平行四边形的实现会相对难一些,不是说他复杂,而是平时不怎么接触这个属性 skew,当然,不过你坚持不用skew,你要用两个正确方向的直角三角形和一个正方向拼接起来,那我也没辙,墙都不扶就服你。那我告诉你,还有这种形状

.shape {
    width: 50px;
    height: 0px;
/*     border-left: solid 50px #2e2e2e; */
    border-right: solid 50px #2e2e2e;
    border-bottom: solid 80px transparent;
    background: lightgreen;
}

澳门新萄京官方网站 175

这样你拼一个直角三角形就可以了。当然这种拼接方式的局限性非常之大,如果要修改一点效果就需要切换拼接的形状,我们还是希望能使用一个块级元素来实现

.shape {
    width: 100px;
    height: 100px;
    transform: skew(20deg);
    background: lightgreen;
}

澳门新萄京官方网站 176

skew(x,y) 这个属性比较不好理解,他接受两个参数,x 表示沿着x方向倾斜,y 表示沿着y方向倾斜;需要注意的是,x方向是上下方向,y方向是水平方向,这与普通的坐标系规则不一样,关于这一点的设计W3C有他的道理,不为本文关健,不做展开。另外为了更好理解,请见下图:

澳门新萄京官方网站 177

skewX(30deg)的效果解析

澳门新萄京官方网站 178

skewY(10deg)的效果解析

澳门新萄京官方网站 179

skew(30deg,10deg)的效果解析


  如果说上一部分是需要你动动脑子,那么这一部分则是需要你静下心来想想了。  

但是要画一个三角形呢?

# 笔记标签效果

  常见页面右上角或左上角偶有个小标签很漂亮,使得整个页面显得有层次感和立体感,怎么实现?其实也很简单,按着上方我们实现三角形的方案,稍微做点变动

.shape {
    width: 100px;
    height: 0px;
    border-top: solid 15px transparent;
    border-right: solid 20px #2e2e2e;
    border-bottom: solid 15px transparent;
    background: lightgreen;
}

澳门新萄京官方网站 180

澳门新萄京官方网站 181

# 六角星星 - Star

  看到这个图的时候,或许你会觉得这么个玩意儿怎么实现,CSS也能画出来?很复杂吧?其实不然,为什么呢?看下方这个图我不用继续往下说估计你就明白了

澳门新萄京官方网站 182

  是不是明白了?对的你想的没错,重叠一下就可以了,实现如下:

.shape {
    width: 0px;
    height: 0px;
    border-right: solid 60px transparent;
    border-left: solid 60px transparent;
    border-bottom: solid 100px lightgreen;
}
.shape:before {
    position: absolute;
    transform: translate(-50%,35%);
    content: '';
    width: 0px;
    height: 0px;
    border-right: solid 60px transparent;
    border-left: solid 60px transparent;
    border-top: solid 100px lightgreen;
}

澳门新萄京官方网站 183

在早期的CSS中是没有任何一个样式是可以生成三角形或者是不规则之类的图形的,后来就有人发现了边框的奥秘。

# 五角星星 - Star

  看到这里如果你已经开始构思怎么解构五角星的话,那说明你已经上道了,但是不同的人肯定有不同的结构方法,有没有什么原则呢,肯定是越少越好了,最好是只使用一个块级元素配合伪类就能实现。我的结构如下:

澳门新萄京官方网站 184

很明显由三个三角形经过旋转合适的角度得到,依旧只是用了一个 div 标签,代码如下:

.shape {
    position: relative;
    width: 0px;
    height: 0px;
    border-right: solid 100px transparent;
    border-bottom: solid 70px lightgreen;
    border-left: solid 100px transparent;
    -webkit-transform: rotate(35deg);
}
.shape:before {
    position: absolute;
    left: -100px;
    top: 7px;

    content: '';
    width: 0px;
    height: 0px;
    border-right: solid 100px transparent;
    border-top: solid 70px lightgreen;
    border-left: solid 100px transparent;
    -webkit-transform: rotate(35deg);
}
.shape:after {
    position: absolute;
    left: -100px;

    content: '';
    width: 0px;
    height: 0px;
    border-right: solid 100px transparent;
    border-bottom: solid 70px lightgreen;
    border-left: solid 100px transparent;
    -webkit-transform: rotate(-70deg);
}

统一颜色之后展示如下:

澳门新萄京官方网站 185

先来给某个元素应用边框:

# 六边形 - Octagon

  同样用拼接的办法,一个块级元素增加伪类,拼接如下:

澳门新萄京官方网站 186

所以,由一个矩形,两个梯形构成

.shape {
    width: 100px;
    height: 100px;
    background: lightgreen;
    position: relative;
}

.shape:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    border-bottom: 29px solid lightgreen;
    border-left: 29px solid #2e2e2e;
    border-right: 29px solid #2e2e2e;
    width: 42px;
    height: 0;
}

.shape:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    border-top: 29px solid lightgreen;
    border-left: 29px solid #2e2e2e;
    border-right: 29px solid #2e2e2e;
    width: 42px;
    height: 0;
}

澳门新萄京官方网站 187

澳门新萄京官方网站 188

# 爱心 - Heart

澳门新萄京官方网站:只使用一个块级元素绘制各种图形,觉得无聊就用CSS绘制一个图标玩儿吧。  爱心的拆分规则如下:

澳门新萄京官方网站 189

.shape {
   width: 0px;
   height: 0px;
   border-top: solid 60px lightgreen;
   border-right: solid 50px transparent;
   border-left: solid 50px transparent;
   position: relative; 
}

.shape:before {
   content: "";
   position: absolute;
   top: -98px;
   left: -4px;
   width: 55px;
   height: 55px;
   border-radius: 50%;
   background: lightblue;
}

.shape:after {
   content: "";
   position: absolute;
   top: -98px;
   left: -51px;
   width: 55px;
   height: 55px;
   border-radius: 50%;
   background: pink;
}

  最终效果图如下:

澳门新萄京官方网站 190

如果给这四个边框都应用不同的颜色:

# 无穷符号 - Infinity

  同样,先看看解构图例

澳门新萄京官方网站 191

思路就是将一个正方形的三个角都设置成圆形,然后旋转45度,另一个用伪类实现类似效果

.shape {
    position: relative;
    width: 100px;
    height: 100px;
    border: 20px solid lightgreen;
    box-sizing: border-box;
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
    border-bottom-left-radius: 50%;
    transform: rotate(-45deg)
}
.shape:before {
    position: absolute;
    content: '';
    left: 60px;
    top: 60px;
    width: 100px;
    height: 100px;
    border: 20px solid lightgreen;
    box-sizing: border-box;

    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
    border-bottom-left-radius: 50%;
    transform: rotate(180deg)
}

  最终效果

澳门新萄京官方网站 192

澳门新萄京官方网站 193

# 月亮 - Moon

  月亮总是那么美,可是我们怎么画它呢? 解构图奉上;

澳门新萄京官方网站 194

这是两个圆大小一致的情况,如果想让月亮更加饱满一些,可以将白色圆的直径放大一些,这里不做详诉:

.shape {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    box-shadow: 20px 20px lightgreen;
}

最终效果图:

澳门新萄京官方网站 195

我们会发现这些边框的交界处是一条斜线,然后我们进一步把元素的高度和宽度减少至零,然后增加边框的宽度:

# 对话框 - Talk Bubble

  对话框也能实现? 答案是肯定的,而且很简单。

澳门新萄京官方网站 196

也就是说,一个三角形和一个圆角矩形构成,为了美观,我们可以吧三角形的形状稍微做一下修改,代码如下:

.shape {
    position: relative;
    width: 100px;
    height: 60px;
    border-radius: 10px;
    background: lightgreen;
}
.shape:before {
    position: absolute;
    left: -20px;
    top: 22px;

    content: '';
    width: 0px;
    height: 0px;
    border-top: solid 15px #2e2e2e;
    border-right: solid 20px lightgreen;
    border-bottom: solid 5px #2e2e2e;
}

最终出来的效果图就像这样:

澳门新萄京官方网站 197

样式参考:

# 阴阳两极 - Yin Yang

  这个比较难,需要一些技巧。这是一个思维拓展非常好的实例。好好看,我会细细说:
首先,我们要在一个块级元素上实现这个图案 (一个类选择器,非常易于服用) ,就要非常高效的利用好每一个元素及伪类,该例中,元素本身应该如下设计;

.shape {
    position: relative;
    width: 96px;
    height: 48px;
    border-color: lightgreen;
    border-style: solid;
    border-width: 2px 2px 50px 2px;
}

充分利用border属性特性,大胆将其中一个边设置成块级元素背景颜色的效果,当然为了图形的对称效果,要计算好像素值。可以得到如下图例:

澳门新萄京官方网站 198

加上圆角

澳门新萄京官方网站 199

这样,最难的形状就出来了,剩下的就是两个大边框圆环,个例如下:

.sub_shape {
    background: #2e2e2e;
    border: 18px solid lightgreen;
    border-radius: 100%;
    width: 12px;
    height: 12px;
}

澳门新萄京官方网站 200

拼到一起,效果如下

澳门新萄京官方网站 201

在做出最后一个大框圆环即可,

.shape {
    position: relative;
    width: 96px;
    height: 48px;
    border-color: lightgreen;
    border-style: solid;
    border-width: 2px 2px 50px 2px;
    border-radius: 50%;
}

.shape:before {
    position: absolute;
    top: 50%;
    left: 0;

    content: "";
    background: #2e2e2e;
    border: 18px solid lightgreen;
    border-radius: 100%;
    width: 12px;
    height: 12px;
}

.shape:after {
    position: absolute;
    top: 50%;
    left: 50%;

    content: "";
    width: 12px;
    height: 12px;
    background: lightgreen;
    border: 18px solid #2e2e2e;
    border-radius:100%;
}

最终效果如下:

澳门新萄京官方网站 202

div{

# 锥子 - Cone

  你是不是在想怎么拆分呢?不要被思维定式了,如果这个例子用拆分做就自找麻烦了,还是思路的问题,需要化繁为简,如下:

.shape {
  width: 0px;
  height: 0px;
  border-left: solid 70px transparent;
  border-top: solid 100px lightgreen;
  border-right: solid 70px transparent;
  border-radius: 50%;
}

澳门新萄京官方网站 203

width:0px;

# 后语

  本文旨在介绍制作一些常用的图标图形,拓展大家对CSS功能的认知,不要仅限于在定位子等简单功能上,觉得css简单的人,大部分都是并未对css有足够认知的;本文后面的几个案例,思维了拓展看官在使用css时的思路,不要定式在某一个狭小的使用领域中,使其不能发挥他本身的作用。
  另外,如果有不对的地方和有宝贵的建议,欢迎大家来评论区交流和指正,灰常感谢。

height:0px;

border-top:150pxsolid blue;

border-bottom:150pxsolid black;

border-left:150pxsolid yellow;

border-right:150pxsolid green;

}

澳门新萄京官方网站 204

神奇的事情发生了,我们得到了是个尖对尖的三角形,把我们不需要的边给去掉,然后就得到了一个三角形:

样式参考;

div{

width:0px;

height:0px;

border-bottom:150pxsolid blue;

border-left:150pxsolid transparent;

border-right:150pxsolid transparent;

}

澳门新萄京官方网站 205

修改不同方向上边框的厚度,还能变换出各种角度的三角形

div{

width:0px;

height:0px;

border-bottom:150pxsolid blue;

border-left:0pxsolid transparent;

border-right:150pxsolid transparent;

}

澳门新萄京官方网站 206

画完三角形,再来看一下如何画圆:

澳门新萄京官方网站 207

我相信大家都知道在CSS3中,有border-radius这样一个属性,圆角边框:

澳门新萄京官方网站 208

border-radius不仅对边框border起作用,对实体矩形也是有作用的。当我们我们将圆角的值增大到一定的时候,就会得到一个圆:

代码参考:

div{

width:200px;

height:200px;

background:red;

border-radius:100px;

}

澳门新萄京官方网站 209

代码参考:

div{

width:200px;

height:20px;

background:red;

border-radius:100px;

}

或者这样的一个圆角条:

澳门新萄京官方网站 210

根据上面的基本图形,组合一下,得到这样一个图标:

澳门新萄京官方网站 211

澳门新萄京官方网站 212

所以这就是用CSS绘制图标的一个思路,一些很复杂的图标,我们将其拆开,会发现它都是有一些基本的图形构成的。

接下来再来看一个比较有难度的

澳门新萄京官方网站 213

前面的三角形好说,大家现在应该都会写,问题就在于后面的那个小弯构。

我们来思考一下:

我们可以先从四分之一的圆角下手

澳门新萄京官方网站 214

将其中一边的厚度减为零,就会得到这样一个东西:

澳门新萄京官方网站 215

最后我们调整宽高再加上三角:

澳门新萄京官方网站 216

代码参考:

澳门新萄京官方网站 217

上面给大家介绍的这些技巧都是非常标准的CSS特性,只有那些对CSS的各种特性观察入微的人才有可能在非常规的状态下将其发挥出来,完成那些不可能完成的任务。开动脑子做起来吧!

网站介绍:

这个网站收集了作者自己制作的一些纯CSS图标,这里面的图标有一个很大的特点都是用一个空的div来实现的非常厉害。推荐大家去看一下。

本文由澳门新萄京官方网站发布于澳门新萄京赌场网址,转载请注明出处:澳门新萄京官方网站:只使用一个块级元素绘制

关键词: