你必须穷尽一生磨练技能,这就是成功的秘诀,也是让人家敬重的关键。

CSS3绘图实战-Nut团队标志

结构 练习 26941浏览 7评论

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

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


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

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

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

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

运行代码:

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

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

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

运行代码:

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

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

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

运行代码:

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

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

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

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

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

转载请注明:练小习的前端技术笔记 » CSS3绘图实战-Nut团队标志

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

网友最新评论 (7)

  1. 现在看上面的评论好讽刺
    waiting4年前 (2016-12-23)回复
  2. 原来你是【搜狐技术部前端工程师程】 , 难怪有钱研究,有时间。。。肯定不愁工资
    1117年前 (2013-11-13)回复
  3. 你那么一个效果,人家的logo要是复杂点话,你就完了,ps设计的出来的网页效果,你用css写,真是i fu le you !! 新技术虽然好,但是不切实际:如(你网页好看,有用吗?有营销吗?好看有用??)。。用一个jpg图片多好,你的那个divcss,几千行(说的夸张点),开发一个网页,都到用一年的时间,现在2天的时间。。。 真是不会计划!!! 是一个赚钱的时代... 当然(不是不愿意接受新产品)。。 我有钱,作为一个研究人员,我固然愿意。,, 孩子,还是赚钱重要,别把那些东西当工作!!,
    1117年前 (2013-11-13)回复
    • 傻吊
      smile3年前 (2017-10-26)回复
  4. 技术流的孩子啊。。不要太执着,
    tommy7年前 (2013-10-15)回复
    • @tommy: 脑子短路了写这个文章的时候,只想着圆角,把clip之类的属性都抛到脑后了....人老了脑子不好用.....这文章现在有点误人子弟的感觉
      练习7年前 (2013-10-15)回复
  5. 只有在修改网站时偶尔会接触一下CSS 其他时候都不怎么用。
    www.datacentersky.com8年前 (2012-10-13)回复