接着之前的[css]我要用css画幅画(八) - Hello Kitty,这次画的是苹果公司的logo

这次打算将分析和实现步骤尽量详细的说一说。

其实之前的也打算详细讲分析和设计过程,不过之前的图比较复杂,如果讲那么细,真是怕要讲到猴年马月。

这次的图足够简单,就拿这个图来说明。

都是一些简单的基本方法,通过举一反三,可以实现大部分效果。

Github Demo:http://bee0060.github.io/Css-Paint/pages/logo/apple.html

Code Pen Demo: http://codepen.io/bee0060/pen/QNBVLE

代码:https://github.com/bee0060/Css-Paint

原图如下:

我实现这个图的方法,跟以前一样,也是将其拆分成多个易实现的简单形状。

虽然这个图并不复杂,不过我也是尝试过几种方法后,才最终定下解决方案。

我下面要说的解决方案就是关于如何拆分原图的。

我是这么拆的:

1. 显而易见的,先将叶子拆除去单独实现。 叶子也是最容易实现得,代码如下:

 <div class="apple-leaf pos-a m-hoz-auto bacc-white"></div>

html

 .apple-leaf {
border-top-left-radius: 100%;
border-bottom-right-radius: 100%;
height: 55px;
left: 49%;
top: -43px;
width: 45px;
z-index:;
}

css

2. 将苹果拆成上中下三个部分,如下图红线所示:

3. 先实现中间部分,暂称为“苹果身”, 实现过程如下:

  3.1 还没被咬的苹果

    苹果身是用一个不规则圆形,放在一个稍小的容器中,让圆的顶部和底部都超出容器, 容器设置overflow:hidden;

    让顶部和底部超出容器,是为了让之后和苹果的上下部分的圆边更容易协调的衔接起来。 如下所示:

  有点丑,但是不要在意细节。 在实际的图中,都是没有边框的,这里的边框只是为了表示容器和不规则圆的形状和位置。

  其中红色边框表示容器, 黑色边框表示不规则圆。

  上述图形的代码为:

 <div class="apple-body border-red-2">
<div class="apple-body-inside border-black-2"></div>
</div>

html

 .border-black-2 {
border: 2px solid black;
} .border-red-2 {
border: 2px solid red;
} .apple-body {
height: 150px;
width: 200px;
z-index:;
} .apple-body-inside {
border-top-left-radius: 60px 70px;
border-top-right-radius: 60px 70px;
border-bottom-left-radius: 100px 115px;
border-bottom-right-radius: 100px 115px;
height: 175px;
margin-top: -5px;
width: 200px;
z-index:;
}

css

  很明显,apple-body就是容器类, apple-body-inside是里面的不规则圆。

  在给圆上色(设置黑色背景色)并给容器设置overflow:hidden后, 就成了以下这个样子:

  对应的主要代码没变,因为上色和overflow的属性我已经抽取到common.css中,只要添加相应的类即可。如下:

 <div class="apple-body bacc-black oh border-black-2">
<div class="apple-body-inside bacc-white"></div>
</div>

html

 .oh {
overflow: hidden;
}
.bacc-white {
background-color: white;
} .bacc-black {
background-color: black;
}
.apple-body {
height: 150px;
width: 200px;
z-index:;
} .apple-body-inside {
border-top-left-radius: 60px 70px;
border-top-right-radius: 60px 70px;
border-bottom-left-radius: 100px 115px;
border-bottom-right-radius: 100px 115px;
height: 175px;
margin-top: -5px;
width: 200px;
z-index:;
}

css

  3.2 被咬了后

    这个效果是用一个黑色圆形来遮盖实现的。 只需要调整一下圆的大小和位置即可。 效果和代码如下:

 <div class="apple-ate pos-a pull-left bacc-black"></div>

html

 .apple-ate {
border-radius: 50%;
height: 95px;
margin-left: 160px;
margin-top: 8px;
width: 95px;
}

css

4.苹果的上部分,暂称为“苹果上身”,实现过程如下:

  可以看到,苹果上身是波浪形的圆弧, 为了实现,我将波浪形切割成3个部分,每个部分暂称为圆弧,朝向分别是上下上,背景色分别是白黑白。然后将其连接起来,调整位置和圆角弧度(border-radius)的值来使其尽量协调。

  其中每个圆边都是用和苹果身类似的技巧, 用一个overflow:hidden的小容器,包含一个较大的圆,并只显示其中所需的部分,形成圆弧。 且左右两个圆弧只是位置不同(margin-left),其他属性相同。

  切割图如下:

  

  这里继续用红线表示切割(大家不会想歪)。

  这里的策略是两个向上的白色圆弧分布两边,一个向下的黑色圆弧进行适当遮盖,以形成波浪。

  4.1 向上的圆弧形状如下:

  

  和苹果身一样, 红框表示容器,黑框表示圆,只有红框内的部分才会被显示,上色后效果和代码如下:

  

 <div class="apple-body-top-left oh pos-r pull-left bacc-black">
<div class="apple-body-top-left-inside bacc-white"></div>
</div>

html

 .apple-body-top-left {
height: 15px;
width: 65px;
z-index:;
} .apple-body-top-left-inside {
border-radius: 50%;
height: 75px;
margin-top: 8px;
margin-left: -17px;
width: 82px;
}

css

  另一个向上圆弧只是margin-left属性不同,就不再敖述了。

  4.2 向下的圆弧的形状如下:

  

  红框黑框就不再敖述了, 这里需要注意的是,由于要用向下黑色圆弧遮盖向上的白色圆弧,所以在html中,我是把向下圆弧放在最后,这样z-index一样就可以实现遮盖,这样不用管理多一个z-index的值,让复杂度不至于增加。尽量keep it simple.

  上色后效果和代码如下:

  

 <div class="apple-body-top-center pos-a pull-left oh bacc-white">
<div class="apple-body-top-center-inside bacc-black"></div>
</div>

html

 .apple-body-top-center {
height: 15px;
left: 20px;
top: 4px;
width: 85px;
z-index:;
} .apple-body-top-center-inside {
border-radius: 50%;
height: 95px;
margin-left: 1px;
margin-top: -80px;
width: 87px;
z-index:;
}

css

5. 最后只剩下“苹果下身”了, 技巧和苹果上身相同,只是一些宽高、位置属性不同,在这里就也是不再敖述了。

6. 画完了, 最终效果就不用截图了,请直接点下面的demo链接看吧。

  完整代码如下:

 <div class="apple-container pos-r m-hoz-auto">
<div class="apple-leaf pos-a m-hoz-auto bacc-white"></div>
<div class="apple-body-top pos-r m-hoz-auto">
<div class="apple-body-top-left oh pos-r pull-left">
<div class="apple-body-top-left-inside bacc-white"></div>
</div>
<div class="apple-body-top-right oh pos-r pull-left">
<div class="apple-body-top-right-inside bacc-white"></div>
</div>
<div class="apple-body-top-center oh pos-a pull-left">
<div class="apple-body-top-center-inside bacc-black"></div>
</div>
</div>
<div class="apple-body pos-r oh m-hoz-auto">
<div class="apple-body-inside pull-left bacc-white"></div>
<div class="apple-ate pos-a pull-left bacc-black"></div>
</div>
<div class="apple-body-bottom pos-r m-hoz-auto">
<div class="apple-body-bottom-left oh pos-r pull-left">
<div class="apple-body-bottom-left-inside bacc-white"></div>
</div>
<div class="apple-body-bottom-right oh pos-r pull-left">
<div class="apple-body-bottom-right-inside bacc-white"></div>
</div>
<div class="apple-body-bottom-center oh pos-a pull-left">
<div class="apple-body-bottom-center-inside bacc-black"></div>
</div>
</div>
</div>

html

 .apple-container {
height: 600px;
margin-top: 100px;
margin-bottom: 100px;
width: 600px;
} .apple-leaf {
border-top-left-radius: 100%;
border-bottom-right-radius: 100%;
height: 55px;
left: 49%;
top: -43px;
width: 45px;
z-index:;
} .apple-body-top {
height: 15px;
width: 130px;
} .apple-body-top-left {
height: 15px;
width: 65px;
z-index:;
} .apple-body-top-left-inside {
border-radius: 50%;
height: 75px;
margin-top: 8px;
margin-left: -17px;
width: 82px;
} .apple-body-top-right {
height: 15px;
width: 65px;
z-index:;
} .apple-body-top-right-inside {
border-radius: 50%;
height: 75px;
margin-top: 8px;
margin-left: 1px;
width: 82px;
} .apple-body-top-center {
height: 15px;
left: 20px;
top: 4px;
width: 85px;
z-index:;
} .apple-body-top-center-inside {
border-radius: 50%;
height: 95px;
margin-left: 1px;
margin-top: -80px;
width: 87px;
z-index:;
} .apple-body {
height: 150px;
width: 200px;
z-index:;
} .apple-body-inside {
border-top-left-radius: 60px 70px;
border-top-right-radius: 60px 70px;
border-bottom-left-radius: 100px 115px;
border-bottom-right-radius: 100px 115px;
height: 175px;
margin-top: -5px;
width: 200px;
z-index:;
} .apple-ate {
border-radius: 50%;
height: 95px;
margin-left: 160px;
margin-top: 8px;
width: 95px;
} .apple-body-bottom {
height: 15px;
width: 130px;
} .apple-body-bottom-left {
height: 15px;
width: 65px;
z-index:;
} .apple-body-bottom-left-inside {
border-radius: 50%;
height: 75px;
margin-top: -66px;
margin-left: -7px;
width: 70px;
} .apple-body-bottom-right {
height: 15px;
width: 65px;
z-index:;
} .apple-body-bottom-right-inside {
border-radius: 50%;
height: 75px;
margin-top: -66px;
margin-left: 2px;
width: 70px;
} .apple-body-bottom-center {
height: 15px;
left: 28px;
top: -3px;
width: 70px;
z-index:;
} .apple-body-bottom-center-inside {
border-radius: 50%;
height: 95px;
margin-left: -6px;
width: 87px;
}

css

Github Demo:http://bee0060.github.io/Css-Paint/pages/logo/apple.html

Code Pen Demo: http://codepen.io/bee0060/pen/QNBVLE

代码:https://github.com/bee0060/Css-Paint

以上技巧都很简单且基础,不过通过灵活运用也可以实现很多圆弧类的效果,如之前的两幅画都是大量用到这些技巧。

如发现什么错漏,欢迎指出; 如果有什么想法,也非常欢迎交流。

谢谢观看。

转载请注明出处:[css]我要用css画幅画(九) - Apple Logo

[css]我要用css画幅画(九) - Apple Logo的更多相关文章

  1. [css]我要用css画幅画(八) - Hello Kitty

    接着之前的[css]我要用css画幅画(七) - 哆啦A梦,这次画的是Hello Kitty. /* 开始前先说点废话, 一转眼就2016年了,过完年后一直没更新博客,无他,就是懒得动. 这一转眼,一 ...

  2. [css]我要用css画幅画(七) - 哆啦A梦

    接着之前的[css]我要用css画幅画(六),今天画的有所不同,画的是哆啦A梦,我们小时候对他的称呼其实是小叮当机器猫. (PS:这次我要做的事情,很多人已经做过,这并不是什么创新,我只是在学习并记录 ...

  3. [css]我要用css画幅画(六)

    接着之前的[css]我要用css画幅画(五), 由于这个画已经画了很久了,这次一次性加了比较多更新,算是让这幅画告一段落吧. 本次的更新包括: 1. 给云增加动画 2. 画了一棵树 3. 树上画了一个 ...

  4. [css]我要用css画幅画(五)

    接着之前的[css]我要用css画幅画(四), 这次我给小明和静静增加了对话,用了简单的动画效果. github:https://github.com/bee0060/Css-Paint , 完整代码 ...

  5. [css]我要用css画幅画(四)

    接着之前的[css]我要用css画幅画(三), 今天,我画了两朵云,并给小明介绍了个朋友:静静. github:https://github.com/bee0060/Css-Paint , 完整代码在 ...

  6. [css]我要用css画幅画(三)

    接着之前的[css]我要用css画幅画(二), 今天,我画了一个小人,他的名字暂时叫作小明. 以下只列出本次修改增加的内容 html如下: <div class="human left ...

  7. [css]我要用css画幅画(二)

    接着之前的[css]我要用css画幅画(一) , 今天,我又画一个房子,很简单,屋顶.墙壁.门. 现在开始,做得效果都只兼容chrome,所以下面的css3的属性可能只有-webkit-前缀. 我只是 ...

  8. [css]我要用css画幅画(一)

    几年前开始就一直想用css画幅画. 今天才真正开始, 从简单的开始. 作为一个工作压力那么大的程序员,我首先要画一个太阳. html如下: <!DOCTYPE html> <html ...

  9. 【html、CSS、javascript-5】css应用场景补充

    一.CSS全局应用 父标签div下包含两个子标签div,当子标签dvi全部向左float,此时父标签设置的背景色是不显示的 <!DOCTYPE html> <html lang=&q ...

随机推荐

  1. iOS 使用EZAudio库生成wav出错的情况

    使用EZAudio库 录M4A格式可以参考该库例子中的代码. 录wav格式得改下源码.看下面的代码 AVAudioSession *session = [AVAudioSession sharedIn ...

  2. Linux添加用户(user)到用户组(group)

    将一个用户添加到用户组中,千万不能直接用: usermod -G groupA 这样做会使你离开其他用户组,仅仅做为 这个用户组 groupA 的成员. 应该用 加上 -a 选项: usermod - ...

  3. CSS中position的4种定位详解

    大家都知道,css中的position有4种取值,分别是static.fixed.relative.absolute. 详细解释: static:相当于没有定位,元素会出现在正常的文档流中. fixe ...

  4. Android系统build.prop文件

    # begin build properties (开始设置系统性能) # autogenerated by buildinfo.sh (通过设置形成系统信息) ro.build.id=GRI40 ( ...

  5. java枚举类型学习

    用的不多,但用的时候仅仅简单的使用,不太明白原理,今天就系统的学一下枚举.参考:java编程思想. Update: 枚举可以当做数据字典来存储,通常只要一个字段即instance本身,toString ...

  6. 基于OpenSLL的RSA加密应用(非算法)

    基于OpenSLL的RSA加密应用(非算法) iOS开发中的小伙伴应该是经常用der和p12进行加密解密,而且在通常加密不止一种加密算法,还可以加点儿盐吧~本文章主要阐述的是在iOS中基于openSL ...

  7. Net设计模式实例系列文章总结

    1 什么是设计模式 设计模式是对在软件设计过程中重复出现的问题提出了一种比较好的解决方案.正如一位专家所说:设计模式是对程序设计人员经常遇到的设计问题的可再现的解决方案(The Smalltalk C ...

  8. Vue.js说说组件

    什么是组件:组件是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.在较高层面上,组件是自定义的元素,Vue.js的编译器为它添加特殊功能.在有些情况下,组件也可以是原生HTM ...

  9. Openfire 4.1.0

    http://www.igniterealtime.org/downloads/index.jsp 服务器端口 接口 端口   类型 描述 所有的地址 5222 客户端到服务器 客户端使用标准端口连接 ...

  10. jquery实现tab切换完整代码

    代码如下,保存到html文件打开: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...