CSS3绘图实战-Nut团队标志

css每一代都会有革命性的更新,尽管目前还有一部分浏览器没有支持CSS3,就算支持也是部分支持。但是她那强大的能力依然还是让我兴奋,一些早期不敢想象的东西,如今都可以用CSS来实现,比如,变型,渐变,动画等等。

这次我就拿CSS3的一些新功能来画出我们Nut前端团队的标志,实物如下图:

版权所有,NUT团队,如有雷同,算我们倒霉!

不说废话,直接开始。这个logo整体来说可以分为几个色块,几个不规则的形状体拼接而成。但是CSS不是HTML5,不是canvs也不是SVG,他是无法实现复杂路径绘图的,但是CSS有他独特的绘图方式,border-rasius,transform,z-index,overflow。

说白了就是通过各种圆角,变形旋转,互相遮盖,互相切割来完成。

首先是Nut的果蒂部分,这里的结构如下

  1. <div class="top">
  2. <div class="right color3"></div>
  3. <div class="left color1"></div>
  4. <div class="mask1"></div>
  5. <div class="mask2"></div>
  6. </div>

运行代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>无标题文档</title>

<style type="text/css">

*{

margin:0;

padding:0;

}

body {

background: #fff;

}

.color1{

background: #ffb400;

}

.color2{

background: #e78500;

}

.color3{

background: #bd5d00;

}

.color4{

background: #9e3300;

}

.color5{

background: #772400;

}

div{

overflow: hidden;

}

.wrapper{

width:450px;

height:450px;

left:50%;

top:50%;

margin:-225px 0 0 -225px;

position: absolute;

}

.top{

width:48px;

height:62px;

top:9px;

left:232px;

position: absolute;

}

.top .right{

width:48px;

height:62px;

border-radius: 35px 40px 0px 0px/15px 70px 10px 0px;

z-index: 1;

position: absolute;

}

.top .left{

width:160px;

height:320px;

top:7px;

left:-93px;

z-index: 2;

border-radius: 160px/320px;

position: absolute;

}

.top .mask1{

width:40px;

height:100px;

border-radius: 40px/100px;

background: #fff;

z-index: 3;

top:0px;

left:-32px;

position: absolute;

}

.top .mask2{

width:200px;

height:200px;

border-radius: 200px;

background: #fff;

z-index: 4;

top:55px;

left:-92px;

position: absolute;

}

.center{

width:340px;

height:192px;

margin:79px 0 0 57px;

}

.center .box1{

width:360px;

height:360px;

border-radius:180px;

margin:0 0 0 -20px;

}

.center .box1 .box1_1{

width:300px;

height:400px;

border-radius: 200px/300px;

margin:-40px 0 0 -20px;

}

.center .box2{

width:900px;

height:900px;

background: #fff;

margin:-265px 0 0 -383px;

border-radius: 900px;

}

.bottom{

width:550px;

height:330px;

border-radius: 550px/330px;

margin:-75px 0 0 -122px;

transform: rotate(6deg);

-webkit-transform: rotate(6deg);

-moz-transform: rotate(6deg);

-o-transform: rotate(6deg); /*Opera*/

}

.bottom .box1{

width:320px;

height:600px;

border-radius: 320px/600px;

margin:-380px 0 0 180px;

transform: rotate(5deg);

-webkit-transform: rotate(5deg);

-moz-transform: rotate(5deg);

-o-transform: rotate(5deg); /*Opera*/

}

.bottom .box2{

width:320px;

height:600px;

border-radius: 320px/600px;

margin:35px 0 0 -35px;

transform: rotate(3deg);

-webkit-transform: rotate(3deg);

-moz-transform: rotate(3deg);

-o-transform: rotate(3deg); /*Opera*/

}

.bottom .box3{

width:320px;

height:600px;

border-radius: 320px/600px;

margin:30px 0 0 -30px;

}

</style>

</head>

<body>

<div class="wrapper">

<div class="top">

<div class="right color3"></div>

<div class="left color1"></div>

<div class="mask1"></div>

<div class="mask2"></div>

</div>

</div>

</body>

</html>

提示:你可以先修改部分代码再运行。

原理非常简单,一个深色的圆角矩形,上面盖一个浅色的椭圆,然后用两个白色的形状进行遮盖。webkit与moz显示正常。(IE,IE是什么?等IE10吧!)

然后是Nut上面的那个托,代码如下:

  1. <div class="center">
  2. <div class="box1 color2">
  3. <div class="box1_1 color1"></div>
  4. </div>
  5. <div class="box2"></div>
  6. </div>

运行代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>无标题文档</title>

<style type="text/css">

*{

margin:0;

padding:0;

}

body {

background: #fff;

}

.color1{

background: #ffb400;

}

.color2{

background: #e78500;

}

.color3{

background: #bd5d00;

}

.color4{

background: #9e3300;

}

.color5{

background: #772400;

}

div{

overflow: hidden;

}

.wrapper{

width:450px;

height:450px;

left:50%;

top:50%;

margin:-225px 0 0 -225px;

position: absolute;

}

.top{

width:48px;

height:62px;

top:9px;

left:232px;

position: absolute;

}

.top .right{

width:48px;

height:62px;

border-radius: 35px 40px 0px 0px/15px 70px 10px 0px;

z-index: 1;

position: absolute;

}

.top .left{

width:160px;

height:320px;

top:7px;

left:-93px;

z-index: 2;

border-radius: 160px/320px;

position: absolute;

}

.top .mask1{

width:40px;

height:100px;

border-radius: 40px/100px;

background: #fff;

z-index: 3;

top:0px;

left:-32px;

position: absolute;

}

.top .mask2{

width:200px;

height:200px;

border-radius: 200px;

background: #fff;

z-index: 4;

top:55px;

left:-92px;

position: absolute;

}

.center{

width:340px;

height:192px;

margin:79px 0 0 57px;

}

.center .box1{

width:360px;

height:360px;

border-radius:180px;

margin:0 0 0 -20px;

}

.center .box1 .box1_1{

width:300px;

height:400px;

border-radius: 200px/300px;

margin:-40px 0 0 -20px;

}

.center .box2{

width:900px;

height:900px;

background: #fff;

margin:-265px 0 0 -383px;

border-radius: 900px;

}

.bottom{

width:550px;

height:330px;

border-radius: 550px/330px;

margin:-75px 0 0 -122px;

transform: rotate(6deg);

-webkit-transform: rotate(6deg);

-moz-transform: rotate(6deg);

-o-transform: rotate(6deg); /*Opera*/

}

.bottom .box1{

width:320px;

height:600px;

border-radius: 320px/600px;

margin:-380px 0 0 180px;

transform: rotate(5deg);

-webkit-transform: rotate(5deg);

-moz-transform: rotate(5deg);

-o-transform: rotate(5deg); /*Opera*/

}

.bottom .box2{

width:320px;

height:600px;

border-radius: 320px/600px;

margin:35px 0 0 -35px;

transform: rotate(3deg);

-webkit-transform: rotate(3deg);

-moz-transform: rotate(3deg);

-o-transform: rotate(3deg); /*Opera*/

}

.bottom .box3{

width:320px;

height:600px;

border-radius: 320px/600px;

margin:30px 0 0 -30px;

}

</style>

</head>

<body>

<div class="wrapper">

<div class="top">

<div class="right color3"></div>

<div class="left color1"></div>

<div class="mask1"></div>

<div class="mask2"></div>

</div>

<div class="center">

<div class="box1 color2">

<div class="box1_1 color1"></div>

</div>

<div class="box2"></div>

</div>

</div>

</body>

</html>

提示:你可以先修改部分代码再运行。

用center标签先进行定位,然后两个box互相遮盖。

到目前来说,webkit跟moz核心的浏览器还是都表现正常的。但是在写下面果实主体部分的时候,遇到了webkit不兼容的状况,结构如下:

  1. <div class="bottom">
  2. <div class="box1 color5">
  3. <div class="box2 color4">
  4. <div class="box3 color3"></div>
  5. </div>
  6. </div>
  7. </div>

运行代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>无标题文档</title>

<style type="text/css">

*{

margin:0;

padding:0;

}

body {

background: #fff;

}

.color1{

background: #ffb400;

}

.color2{

background: #e78500;

}

.color3{

background: #bd5d00;

}

.color4{

background: #9e3300;

}

.color5{

background: #772400;

}

div{

overflow: hidden;

}

.wrapper{

width:450px;

height:450px;

left:50%;

top:50%;

margin:-225px 0 0 -225px;

position: absolute;

}

.top{

width:48px;

height:62px;

top:9px;

left:232px;

position: absolute;

}

.top .right{

width:48px;

height:62px;

border-radius: 35px 40px 0px 0px/15px 70px 10px 0px;

z-index: 1;

position: absolute;

}

.top .left{

width:160px;

height:320px;

top:7px;

left:-93px;

z-index: 2;

border-radius: 160px/320px;

position: absolute;

}

.top .mask1{

width:40px;

height:100px;

border-radius: 40px/100px;

background: #fff;

z-index: 3;

top:0px;

left:-32px;

position: absolute;

}

.top .mask2{

width:200px;

height:200px;

border-radius: 200px;

background: #fff;

z-index: 4;

top:55px;

left:-92px;

position: absolute;

}

.center{

width:340px;

height:192px;

margin:79px 0 0 57px;

}

.center .box1{

width:360px;

height:360px;

border-radius:180px;

margin:0 0 0 -20px;

}

.center .box1 .box1_1{

width:300px;

height:400px;

border-radius: 200px/300px;

margin:-40px 0 0 -20px;

}

.center .box2{

width:900px;

height:900px;

background: #fff;

margin:-265px 0 0 -383px;

border-radius: 900px;

}

.bottom{

width:550px;

height:330px;

border-radius: 550px/330px;

margin:-75px 0 0 -122px;

transform: rotate(6deg);

-webkit-transform: rotate(6deg);

-moz-transform: rotate(6deg);

-o-transform: rotate(6deg); /*Opera*/

}

.bottom .box1{

width:320px;

height:600px;

border-radius: 320px/600px;

margin:-380px 0 0 180px;

transform: rotate(5deg);

-webkit-transform: rotate(5deg);

-moz-transform: rotate(5deg);

-o-transform: rotate(5deg); /*Opera*/

}

.bottom .box2{

width:320px;

height:600px;

border-radius: 320px/600px;

margin:35px 0 0 -35px;

transform: rotate(3deg);

-webkit-transform: rotate(3deg);

-moz-transform: rotate(3deg);

-o-transform: rotate(3deg); /*Opera*/

}

.bottom .box3{

width:320px;

height:600px;

border-radius: 320px/600px;

margin:30px 0 0 -30px;

}

</style>

</head>

<body>

<div class="wrapper">

<div class="top">

<div class="right color3"></div>

<div class="left color1"></div>

<div class="mask1"></div>

<div class="mask2"></div>

</div>

<div class="center">

<div class="box1 color2">

<div class="box1_1 color1"></div>

</div>

<div class="box2"></div>

</div>

<div class="bottom">

<div class="box1 color5">

<div class="box2 color4">

<div class="box3 color3"></div>

</div>

</div>

</div>

</div>

</body>

</html>

提示:你可以先修改部分代码再运行。

分别用webkit与moz两个浏览器运行,就出现了较大的区别。去查手册与官方资料,都没有任何说明。在我多次测试之后,发现是css3的圆角形状,在经过transform处理之后,overflow属性hidden值的表现会出现不兼容,moz核心下正常,在webkit核心的浏览器下,hidden的区域始终是方块形状,无视圆角。

我不知道这应该被算做CSS3的缺陷,还是要被算做浏览器的bug,opera下的表现更差,border-radius和overflow:hidden直接不能配合使用。

也许下一代的CSS会解决,也许下一代的浏览器会解决,这些都不重要了,重要的是,把现有的知识都掌握。

“我有一个梦想,总有一天,所有的浏览器都会支持同一个标准”————白岩松。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏coding

AOC显示器提示OSD锁定怎么办?

macpro虽好,但屏幕实在太小了,而且原生的键盘敲起来很费劲,还是用机械键盘噼里啪啦敲打显得爽快。于是,给macpro外接了键鼠以及27寸的AOC显示器。

1034
来自专栏程序你好

JavaScript图表的数据可视化:比较D3和Kendo UI

D3和Kendo UI只是在web应用程序中创建图表的两种方式,选项范围从简单地在屏幕上绘制图形到使用复杂的图表组件。D3和Kendo UI都很受欢迎,两者都能...

643
来自专栏理论坞

那些你不知道的Ps冷知识②——乾坤大挪移

在大家使用PS时,滚轮这个东西实际上并不常用,但一个滚轮加上三功能键却可以完全实现缩放和平移、纵移、调整数值等功能。

643
来自专栏企鹅号快讯

6个超实用的AI小工具

? 6个超实用的AI小工具 BGM:鬼火の童・鬼切、虎徹にございます! 今天学习的AI实用小工具,分分钟帮我们提高666倍工作效率,让我们听着这首欢快魔性的小...

1968
来自专栏walterlv - 吕毅的博客

用动画的方式画出任意的路径(直线、曲线、折现)

发布于 2017-11-20 00:49 更新于 2017-11...

452
来自专栏我的python

python数据可视化之画箱形图

最近接到锅让画几个数据图。其实第一反应是用origin来画图,但问了一圈周围没有用Origin画过箱形图的,有些问题无法解决又百度不到。但好在略懂一点pytho...

8050
来自专栏数据小魔方

子弹图(bullet chart)

今天跟大家分享的图表是——子弹图(bullet chart)! ▽▼▽ 名字听起来是不是很高大上呀,这个图表是用于日常绩效评估的,可以从图表中了解到各个项目的目...

2658
来自专栏深度学习自然语言处理

【python】Tkinter可视化窗口(一)

因为想给自己的毕设要做个可视化,而不是简单地黑框框,就试着学了学Tkinter,发现上手起来是真的简单,在此,推荐给大家!

1152
来自专栏Material Design组件

Human Interface Guidelines — Progress Indicators

853
来自专栏iOSDevLog

scetch入门 第3部分:符号和导出谢谢阅读!

符号非常适合组织您经常重复使用的设计元素。在这个例子中,让我们将袜子猴子图标变成符号。选择图标后,查看顶部菜单栏并选择“创建符号”

530

扫码关注云+社区