CSS3绘图实战-Nut团队标志

最新推荐文章于 2024-07-18 15:48:23 发布

justep11

最新推荐文章于 2024-07-18 15:48:23 发布

阅读量115

点赞数

文章标签： xhtml 前端 ViewUI

本文链接：https://blog.csdn.net/justep11/article/details/84292565

版权

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.justep.com/workflow.html">
<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会解决，也许下一代的浏览器会解决，这些都不重要了，重要的是，把现有的知识都掌握。

“我有一个梦想，总有一天，所有的浏览器都会支持同一个标准”————白岩松。
转自：http://www.caihong.cc/?p=224

justep11

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3绘图实战-Nut团队标志

css每一代都会有革命性的更新，尽管目前还有一部分浏览器没有支持CSS3，就算支持也是部分支持。但是她那强大的能力依然还是让我兴奋，一些早期不敢想象的东西，如今都可以用CSS来实现，比如，变型，渐变，动画等等。这次我就拿CSS3的一些新功能来画出我们Nut前端团队的标志，实物如下图：版权所有，NUT团队，如有雷同，算我们倒霉！不说废话，直接开始。这个logo整体...
复制链接

扫一扫