感到无聊就用CSS绘制叁个Logo玩儿吧
分类:计算机知识

重拾 CSS 的乐趣(上)

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

正文笔者: 伯乐在线 - CSS魔法 。未经我许可,禁止转发!
应接出席伯乐在线 专栏撰稿人。

前言

本人在其次届 CSS Conf(二零一五 中夏族民共和国 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

这是 二〇〇八年的时候,一人网络朋友在论坛里求助,说他们集团的设计员想要完成如此二个功效。我们看看背景是叁个弧形的形态,全数导航菜单须要顺着那一个背景图案以弧形排列。

图片 12

还要,有个别菜单是能够开展的(上海教室中加红框的局地)。当自身点击第3个可进行菜单时,效果是那般的:

图片 13

点击第二和第八个,张开效果是这么的:

图片 14

……和如此的:

图片 15

具备菜单项都亟需顺滑地贴合这一个弧形背景自然张开。

论坛里的网上基友纷繁表示,这样的意义应该用 Flash 来促成才对,用 CSS 怎么大概成功?!

自身动了一番心血,终极把这几个效应做了出来。当然,在那些例子里,小编使用了一部分 JS,用来监听点击事件、切换到分 class;除此以外全数的因素布局和一直都是由 CSS 来成功的,也正是说,你能够自由地改动菜单项的数据和剧情。

大家能够施行,在 2010 年,要合营 IE6,应该怎么做?

今天由于时间涉及,我们不会讲课这些案例。小编会跟大家聊一些跟 CSS 有关的佳话。小编前些天的分享分为多少个部分:

图片 16

率先部分会介绍一件 CSS 能做的幽默的思想政治工作;第3局部是本人方今超出的一件值得欢畅激励的业务。

先是,这件旧事正是用 CSS 画Logo。

图片 17

借问现场有哪些同学尝试过?(仅前三排就有两人举手。)好的,试过的校友接下去自然会找到相当多共鸣。

有同学大概会问:

图片 18

本人这边不想找一些技巧上的原故,单从认为的角度来回复这一个难点。

图片 19

它太有意思了!只有你试过,你才精晓它有多有趣。

有一句话,大家兴许听过,是说 JS 的:

图片 20

自己这里借用这一个句型,说三个 CSS 的版本:

图片 21

不相信?大家来看有些事例:

图片 22

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

图片 23

用纯 CSS 画的 iPhone。

图片 24

用 CSS 画的小黄种人。

过多商家的 logo 也是很有特色的,也被网络朋友用 CSS 画了出去,举个例子 Opera 的 logo:

图片 25

最神奇的是底下这一个:

图片 26

(笑声。)

竟然还会有网上好朋友用 CSS3 画了三个 IE8 的图标。可是,讽刺的是,IE8 自个儿全然未有力量寻常渲染那些Logo。(笑声。)

那件事情这么有意思,笔者要好本来也是做过的。

图片 27

自家写过贰个移动端的 Web UI 框架叫 CMUI,在早期的本子中,Logo的应用方案 就是用纯 CSS 来完成的。

咱们来看一下用 CSS 画Logo会用到如何基本原理。

图片 28

什么样用 CSS 来画二个矩形?那并未有其余难度,因为另外三个块成分本身就是矩形。

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

图片 29

那什么获得四个三角形?

图片 30

在最先的 CSS 中,未有另外特性是跟斜线间接有关的。但你要相信劳使人迷恋民的灵气是延绵不断。相当慢CSS 开垦者们就意识了有关边框的三个地下。

图片 31

那是二个加了边框的块成分。当大家把多少个趋势上的边框设置为区别的颜料时,效果会化为那样:

图片 32

大家会意识,在不一样边框颜色的交界处,出现了一道斜边。接下来,我们慢慢减小这几个因素的宽高至零,同有时间扩张各样边框的厚薄,最后会成为那个样子:

图片 33

我们会获取多个头对头的三角!

接下去,我们用透明色把不必要的三条边框隐去,就足以收获贰个三角形:

图片 34

经过更动那一个因素各条边框的厚度,就足以更换这几个三角各条边的角度。大家能够博得锐角三角形:

图片 35

……也许直角三角形等等。

图片 36

上述是在 CSS2 时期用 CSS 画Logo时我们可以做的。CSS3 为 CSS 扩张了越来越强劲的本事,大家看来一个事例:

图片 37

CSS3 扩大了圆角属性,给二个矩形设置圆角,能够赢得一个圆角矩形;慢慢扩展圆角半径到一定的水准,大家就足以拿走叁个圆形。

图片 38

圆角除了那些之外对边框有效,还足以对实色矩形生效。比方那条短线,大家得以把它设置为圆头的体制;CSS3 还扩展了旋转那样的变形属性,大家得以把它扭转一定的角度。

把这两个图形组成起来,大家就足以获取……

图片 39

八个放大镜的图标。

依靠那几个思路,常见的图纸都足以拆卸开来,化整为零,用 CSS 画出来。比方下边这么些:

图片 40

……这个:

图片 41

……和这个:

图片 42

上边那个Logo稍稍有些复杂:

图片 43

您可能会想,它依然也足以用 CSS 画出来?

大家先从轻易的开端。三角形我们早已介绍过了,所以先把它隐去:

图片 44

再来看外层的不行有斜向缺口的矩形框。斜角缺口也亟需采纳边框交界处的边缘来达成,可是这一个框十分的小概用一个成分来贯彻,大家供给分两步走。完结一边:

图片 45

……再形成一边:

图片 46

终极我们剩下的难点如同正是其一意外的形状了,好疑似个鹰嘴的范例。

图片 47

以此样子怎么样兑现?给大家五分钟的光阴思虑一下。

在揭示谜底从前,大家必要通晓一下:

图片 48

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

图片 49

先是,第一个真相,边框圆角能够钦赐五个半径值(下图中的 r1 和 r2):

图片 50

借使那五个半径值相等,则连年两条边框的弧形正是一条相标准的 1/3圆弧。假使不对等(比方大家把 r2减去),会获得这么的成效:

图片 51

我们开采三回九转两条边框的圆弧会变成一道 一半椭圆弧。那几个真相化解了大家在准则上的主题材料。接下来,我们供给缓慢解决形状上的主题素材。

第三个真相,差异侧向上的边框的薄厚(下图中的 w1 和 w4)也是足以不等同的:

图片 52

万一大家稳步减小 w4 的值至零,我们会获取那个造型:

图片 53

我们应该能够看看,大家须要的形状已经冒出了。最终,大家调解一下那些成分的宽高,只保留我们需求的片段,就足以获取那个鹰嘴的形态。

图片 54

末尾,大家就兑现了这么些乍看起来不或许用 CSS 完结的Logo。

图片 55

观看这里,大概有同学会说:

图片 56

“你这是奇技淫巧啊!”

其实,大家恰好介绍的手艺都以标准的 CSS 性子。独有这几个对 CSS 的各样特色观看入微的人,才有十分的大可能率在特别规的场景之下把那些特征发挥出来,进而做到不容许一举而竟全功的天职。——那是自家对所谓 CSS “奇技淫巧” 的明亮。

说起 CSS 图标那件事,有多少个网址无法不提。

图片 57

以此网址叫 one-div.com,收音和录音了那位站长制作的纯 CSS Logo。这么些网址最大的特征在于,全体的Logo只用到了三个 <div> 标签。(感叹声。)很有新意,推荐大家观摩。

用 CSS 画Logo这么有趣的作业,料定不仅仅本人和那位站长会想到。大家寻觅 “纯 CSS Logo” 这么些重要字,能够窥见有多数的案例和开源项目。

图片 58

理之当然,大家也会听到反对的声响。例如这一条:

图片 59

“用 CSS 画Logo,这种疯狂的政工尽快停止吧!”

大家玩得那样快乐,你道貌岸然地来教育世家,很无趣,对啊?当然,那篇小说的观点料定有它的道理,但另外一门才干都以有独到之处和瑕疵的,要看使用景况。比如,下边正是叁个尊重的事例:

图片 60

那是二个开源项目,叫 fileicon.css,小编是中华夏族民共和国人。

怎么说它是二个庄敬的事例吗?因为,作为一个样式库,它的接口极其清楚。

图片 61

您只需求利用二个空成分,再增多部分有含义的属性就能够了。

下一场,你就可以赢得三个规划精妙的文书Logo了——它抱有高雅的圆角,还也许有二个憨态可掬的折角效果。

图片 62

自身很心爱那么些项目。

但是在存活的本子中,它有三个小可惜——只可以把它位于茶色的背景上。假如你把它投身其余背景上,会发觉它的折角的空缺职位是不透明的:

图片 63

实际上能做到这一步已经非常不轻便了。大家能够团结试一下,用二个空标签把这么的图标做出来。

自个儿很欢娱那一个类型,于是我花了少数时间,给俺写了贰个 demo。作者用了部分 CSS 奇技淫巧,把折角处做成了真正的晶莹:

图片 64

何况,小编还顺手支持了 IE8。

图片 65

因为 IE8 协理伪成分,大家从未理由放弃它。只不过 IE8 无法渲染圆角,大家在 IE8 下唯有方角效果了。

图片 66

好的,以上就是自己的享受的率先有的——CSS Logo。

(掌声。)


Logo不是有设计员在布署软件中做呢?为何要用CSS来绘制Logo呢?原因纵然有趣儿呗!而且同有时间照旧增长大家的CSS熟习度以及考验大家的沉思工夫。何乐而不为呢。大家前日就伙同来拜谒怎么用CSS绘制图标。

鸣谢

  • 插图小编:小妖(百姓网设计师)

    4 赞 6 收藏 5 评论

在那之前大家先来看多少个网上亲密的朋友用CSS画的Logo

关于作者:CSS魔法

图片 67

百姓网前端程序猿,移动 Web UI 框架 CMUI 小编,自称 “披着前端程序员外衣的设计员”。 个人主页 · 作者的稿子 · 12 ·     

图片 68

图片 69

图片 70

图片 71

上面的那么些Logo都以用CSS3花出来的,是或不是很有意思儿,很有趣。特别的炫丽狂拽。想不想本人也试一试呢?

好了,先来思索一下用CSS画Logo的法规:

举个例子三个矩形,怎么用CSS来画

图片 72

自己想那些对于豪门来讲是很简短的,只要学习过CSS的确定都能画出来,大家多少调解一下它的宽高,又能博取圆柱形了,线状之类的图纸:

图片 73

图片 74

然而要画三个三角形呢?

图片 75

在最早的CSS中是从未另外三个样式是足以生成三角形只怕是有有失水准态之类的图片的,后来就有人开掘了边框的奥妙。

先来给有些成分采纳边框:

图片 76

假诺给那八个边框都使用不一样的颜色:

图片 77

咱俩会开采那个边框的交界处是一条斜线,然后我们特别把成分的惊人和增长幅度压缩至零,然后增加边框的大幅度:

体制参谋:

div{

width:0px;

height:0px;

border-top:150pxsolid blue;

border-bottom:150pxsolid black;

border-left:150pxsolid yellow;

border-right:150pxsolid green;

}

图片 78

神奇的事体发生了,大家赢得了是个尖对尖的三角形,把大家无需的边给去掉,然后就获得了一个三角:

体制参谋;

div{

width:0px;

height:0px;

border-bottom:150pxsolid blue;

border-left:150pxsolid transparent;

border-right:150pxsolid transparent;

}

图片 79

修改分歧偏向下边框的厚薄,还能够转变出各类角度的三角形

div{

width:0px;

height:0px;

border-bottom:150pxsolid blue;

本文由威尼斯手机娱乐官网发布于计算机知识,转载请注明出处:感到无聊就用CSS绘制叁个Logo玩儿吧

上一篇:威尼斯手机娱乐官网Javascript常用的设计情势详解 下一篇:2px引发的血案
猜你喜欢
热门排行
精彩图文