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 条评论
登录 后参与评论

相关文章

来自专栏IMWeb前端团队

FreeNG | 基于Angular4的前端UI框架

本文作者:IMWeb 郭明慧 原文出处:IMWeb社区 未经同意,禁止转载 FreeNG是一款完全响应式的前端UI框架,它采用了主流的左右两栏式布局,...

20810
来自专栏Coding01

我是这么制作「coding01 日报」的

「coding01 日报」为大家每日推送不错的技术帖子,欢迎大家查阅。今天这篇文章的内容是,如何利用 「Workflow」搜集素材和制作每天日报的雏形。

941
来自专栏腾讯NEXT学位

前端工程师须要常去的10个设计博客

3457
来自专栏腾讯大讲堂的专栏

注意!让你无法拒绝的新版公众平台文章编辑器来啦!

运营微信公众号的小伙伴登陆微信公众平台后,以为进错了后台! ↓↓↓ ? 右下角的编辑器竟然居中了! (处女座开心哭了) 原来是微信公众平台新版正式上线了!对此,...

2379
来自专栏Wordpress专用主机|主题模板|必备插件

WP视频教程:wordpress首页制作教程

在上一期《WP新手教程:wordpress从零开始快速建站》之中,博主站在新手的角度上,比较系统的讲解了建站过程。考虑到wordpress首页的重要性,所以在本...

2173
来自专栏娱乐心理测试

微信小游戏

2235
来自专栏CDA数据分析师

折线图、雷达图、仪表盘、地图……简单4步,不会编程也能搞定这些图表!

Echarts是国内优秀工程师开发优秀可视化 平台的代表,可以通过Java、R等软件调用。可是初学者如果不会编程肿么办? 今天给大家推荐的这个可视化平台——「哦...

1975
来自专栏Wordpress专用主机|主题模板|必备插件

6款最佳WORDPRESS免费主题模板:GENERATEPRESS位列榜首

无论你的网站是什么内容,是什么行业,访客首先关注的是你的主题(外观),毕竟颜值即正义的时代。所以,对于Worpdress网站来讲,主题的重要性不言而喻。 今晚博...

3195
来自专栏Guangdong Qi

小Q-免费的数据能做大事情之UI素材准备未完待续,持续更新中

1706
来自专栏知晓程序

今天吃什么?这个历史难题就交给它了!

而知晓程序(微信号 zxcx0101)现在推荐的这款小程序「今天吃什么 Lite」,用最简单粗暴(误)的方式,帮你摆脱选择困难症。

672

扫码关注云+社区