CSS3绘图实战-Nut团队标志

练小习

发布于 2017-12-29 14:23:51

5780

发布于 2017-12-29 14:23:51

文章被收录于专栏：练小习的专栏练小习的专栏

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

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

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

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

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

<div class="top">
<div class="right color3"></div>
<div class="left color1"></div>
<div class="mask1"></div>
<div class="mask2"></div>
</div>

运行代码：

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

<head>

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

*{

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>

</body>

</html>

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

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

然后是Nut上面的那个托，代码如下：

<div class="center">
<div class="box1 color2">
<div class="box1_1 color1"></div>
</div>
<div class="box2"></div>
</div>

运行代码：

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

<head>

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

*{

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>

</div>

</div>

</body>

</html>

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

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

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

<div class="bottom">
<div class="box1 color5">
<div class="box2 color4">
<div class="box3 color3"></div>
</div>
</div>
</div>

运行代码：

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

<head>

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

*{

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>

</div>

</div>

</div>

</body>

</html>

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

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

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

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

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

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

css

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

css

登录后参与评论

0 条评论

热度

CSS3绘图实战-Nut团队标志

CSS3绘图实战-Nut团队标志

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐