[css]我要用css画幅画(九)

接着之前的[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. 显而易见的，先将叶子拆除去单独实现。叶子也是最容易实现得，代码如下：

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

html

1 .apple-leaf {
2     border-top-left-radius: 100%;
3     border-bottom-right-radius: 100%;
4     height: 55px;
5     left: 49%;
6     top: -43px;
7     width: 45px;
8     z-index: 6;
9 }

css

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

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

　　3.1 还没被咬的苹果

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

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

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

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

　　上述图形的代码为：

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

html

 1 .border-black-2 {
 2     border: 2px solid black;
 3 }
 4 
 5 
 6 .border-red-2 {
 7     border: 2px solid red;
 8 }
 9 
10 .apple-body {
11     height: 150px;
12     width: 200px;
13     z-index: 3;
14 }
15 
16 .apple-body-inside {
17     border-top-left-radius: 60px 70px;
18     border-top-right-radius: 60px 70px;
19     border-bottom-left-radius: 100px 115px;
20     border-bottom-right-radius: 100px 115px;
21     height: 175px;
22     margin-top: -5px;
23     width: 200px;
24     z-index: 3;
25 }

css

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

　　在给圆上色（设置黑色背景色）并给容器设置overflow:hidden后，就成了以下这个样子：

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

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

html

 1 .oh {
 2     overflow: hidden;
 3 }
 4 .bacc-white {
 5     background-color: white;
 6 }
 7 
 8 .bacc-black {
 9     background-color: black;
10 }
11 .apple-body {
12     height: 150px;
13     width: 200px;
14     z-index: 3;
15 }
16 
17 .apple-body-inside {
18     border-top-left-radius: 60px 70px;
19     border-top-right-radius: 60px 70px;
20     border-bottom-left-radius: 100px 115px;
21     border-bottom-right-radius: 100px 115px;
22     height: 175px;
23     margin-top: -5px;
24     width: 200px;
25     z-index: 3;
26 }

css

　　3.2 被咬了后

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

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

html

1 .apple-ate {
2     border-radius: 50%;
3     height: 95px;
4     margin-left: 160px;
5     margin-top: 8px;
6     width: 95px;
7 }

css

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

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

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

　　切割图如下：

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

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

　　4.1 向上的圆弧形状如下：

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

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

html

 1 .apple-body-top-left {
 2     height: 15px;
 3     width: 65px;
 4     z-index: 4;
 5 }
 6 
 7 .apple-body-top-left-inside {
 8     border-radius: 50%;
 9     height: 75px;
10     margin-top: 8px;
11     margin-left: -17px;
12     width: 82px;
13 }

css

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

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

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

　　上色后效果和代码如下：

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

html

 1 .apple-body-top-center {
 2     height: 15px;
 3     left: 20px;
 4     top: 4px;
 5     width: 85px;
 6     z-index: 5;
 7 }
 8 
 9 .apple-body-top-center-inside {
10     border-radius: 50%;
11     height: 95px;
12     margin-left: 1px;
13     margin-top: -80px;
14     width: 87px;
15     z-index: 5;
16 }

css

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

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

　　完整代码如下：

 1 <div class="apple-container pos-r m-hoz-auto">
 2         <div class="apple-leaf pos-a m-hoz-auto bacc-white"></div>
 3         <div class="apple-body-top pos-r m-hoz-auto">
 4             <div class="apple-body-top-left oh pos-r pull-left">
 5                 <div class="apple-body-top-left-inside bacc-white"></div>
 6             </div>
 7             <div class="apple-body-top-right oh pos-r pull-left">
 8                 <div class="apple-body-top-right-inside bacc-white"></div>
 9             </div>
10             <div class="apple-body-top-center oh pos-a pull-left">
11                 <div class="apple-body-top-center-inside bacc-black"></div>
12             </div>
13         </div>
14         <div class="apple-body pos-r oh m-hoz-auto">
15             <div class="apple-body-inside pull-left  bacc-white"></div>
16             <div class="apple-ate pos-a pull-left bacc-black"></div>
17         </div>
18         <div class="apple-body-bottom pos-r m-hoz-auto">
19             <div class="apple-body-bottom-left oh pos-r pull-left">
20                 <div class="apple-body-bottom-left-inside bacc-white"></div>
21             </div>
22             <div class="apple-body-bottom-right oh pos-r pull-left">
23                 <div class="apple-body-bottom-right-inside bacc-white"></div>
24             </div>            
25             <div class="apple-body-bottom-center oh pos-a pull-left">
26                 <div class="apple-body-bottom-center-inside bacc-black"></div>
27             </div>
28         </div>        
29     </div>

html

  1 .apple-container {
  2     height: 600px;
  3     margin-top: 100px;
  4     margin-bottom: 100px;
  5     width: 600px;
  6 }
  7 
  8 .apple-leaf {
  9     border-top-left-radius: 100%;
 10     border-bottom-right-radius: 100%;
 11     height: 55px;
 12     left: 49%;
 13     top: -43px;
 14     width: 45px;
 15     z-index: 6;
 16 }
 17 
 18 .apple-body-top {
 19     height: 15px;
 20     width: 130px;
 21 }
 22 
 23 .apple-body-top-left {
 24     height: 15px;
 25     width: 65px;
 26     z-index: 4;
 27 }
 28 
 29 .apple-body-top-left-inside {
 30     border-radius: 50%;
 31     height: 75px;
 32     margin-top: 8px;
 33     margin-left: -17px;
 34     width: 82px;
 35 }
 36 
 37 .apple-body-top-right {
 38     height: 15px;
 39     width: 65px;
 40     z-index: 4;
 41 }
 42 
 43 .apple-body-top-right-inside {
 44     border-radius: 50%;
 45     height: 75px;
 46     margin-top: 8px;
 47     margin-left: 1px;
 48     width: 82px;
 49 }
 50 
 51 .apple-body-top-center {
 52     height: 15px;
 53     left: 20px;
 54     top: 4px;
 55     width: 85px;
 56     z-index: 5;
 57 }
 58 
 59 .apple-body-top-center-inside {
 60     border-radius: 50%;
 61     height: 95px;
 62     margin-left: 1px;
 63     margin-top: -80px;
 64     width: 87px;
 65     z-index: 5;
 66 }
 67 
 68 .apple-body {
 69     height: 150px;
 70     width: 200px;
 71     z-index: 3;
 72 }
 73 
 74 .apple-body-inside {
 75     border-top-left-radius: 60px 70px;
 76     border-top-right-radius: 60px 70px;
 77     border-bottom-left-radius: 100px 115px;
 78     border-bottom-right-radius: 100px 115px;
 79     height: 175px;
 80     margin-top: -5px;
 81     width: 200px;
 82     z-index: 3;
 83 }
 84 
 85 .apple-ate {
 86     border-radius: 50%;
 87     height: 95px;
 88     margin-left: 160px;
 89     margin-top: 8px;
 90     width: 95px;
 91 }
 92 
 93 .apple-body-bottom {
 94     height: 15px;
 95     width: 130px;
 96 }
 97 
 98 .apple-body-bottom-left {
 99     height: 15px;
100     width: 65px;
101     z-index: 4;
102 }
103 
104 .apple-body-bottom-left-inside {
105     border-radius: 50%;
106     height: 75px;
107     margin-top: -66px;
108     margin-left: -7px;
109     width: 70px;
110 }
111 
112 .apple-body-bottom-right {
113     height: 15px;
114     width: 65px;
115     z-index: 4;
116 }
117 
118 .apple-body-bottom-right-inside {
119     border-radius: 50%;
120     height: 75px;
121     margin-top: -66px;
122     margin-left: 2px;
123     width: 70px;
124 }
125 
126 .apple-body-bottom-center {
127     height: 15px;
128     left: 28px;
129     top: -3px;
130     width: 70px;
131     z-index: 5;
132 }
133 
134 .apple-body-bottom-center-inside {
135     border-radius: 50%;
136     height: 95px;
137     margin-left: -6px;
138     width: 87px;
139 }

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