接着之前的[css]我要用css画幅画(六)，今天画的有所不同，画的是哆啦A梦，我们小时候对他的称呼其实是小叮当机器猫。
（PS:这次我要做的事情，很多人已经做过，这并不是什么创新，我只是在学习并记录下学习的过程）
这次就不多说CSS属性的基础概念了。 说说我画的过程吧， 好，进入正题。
因为和之前的瞎画不同，这次是画现有的东西。我认为临摹是比较简单的。 我先上网找了下要临摹的对象，找了个最中规中矩的图片，如下：
这对我来说不是一个简单的任务， 而我处理不简单的任务的解决方案，就是把他拆分再拆分，一直拆到问题无法再拆且可以解决为止。
拆分结果如下：
1. 头
1.1 眼睛
1.2 脸廓
1.3 鼻子
1.4 胡须
1.5 嘴唇
1.6 嘴巴
1.6.1 口腔
1.6.2 舌头
2. 身子
2.1 项圈
2.2 铃铛
2.3 躯干
2.4 肚兜
2.5 百宝袋
2.6 双手
2.6.1 手臂
2.6.2 拳头
2.7 双脚
2.7.1 腿
2.7.2 脚掌
这个画我无法一次性完成，最新的效果可以在这里看到： Demo
代码在这： https://github.com/bee0060/Css-Paint
（请根据关键字carton、doraemon找相应的文件）
之后我会陆续更新这幅画，有些进展之后会记录在该篇博客中。
-------------------------------------------------------------------------- 2015.12.24 start --------------------------------------------------------------------------
到目前为止， 完成了小叮当的头部。 看了效果的会发现，下巴处看起来不对， 没关系，等我加上他的围脖后，就能遮挡住这块不对劲的地方了。
先上代码：
1 <div class="doraemon"> 2 ="circle border-black-1 head" 3 ="eyes" 4 ="circle pos-a bacc-white eye eye-left" 5 ="circle pos-r top-30 eye-pupil eye-pupil-left"></div 6 </ 7 ="circle pos-a bacc-white eye eye-right" 8 ="circle pos-r top-30 eye-pupil eye-pupil-right" 9 10 11 ="border-black-2 bacc-white face"12 ="circle pos-r border-black-2 bacc-brown-red nose"13 ="circle pos-a bacc-white nose-light"14 15 ="m-hoz-auto pos-r bacc-white bread-field"16 17 ="m-hoz-auto bacc-black nasal-groove"18 ="pos-a bacc-black bread bread-left bread-left-1"19 ="pos-a bacc-black bread bread-left bread-left-2"20 ="pos-a bacc-black bread bread-left bread-left-3"21 ="pos-a bacc-black bread bread-right bread-right-1"22 ="pos-a bacc-black bread bread-right bread-right-2"23 ="pos-a bacc-black bread bread-right bread-right-3"24 25 26 27 ="pos-r m-hoz-auto lips"28 ="pos-a bacc-white border-black-2 lips-left"29 ="lips-center-left pull-left"30 ="lips-center-left-inside circle border-black-2 bacc-white"31 32 ="lips-center pull-left bacc-white"33 ="lips-center-inside pos-r m-hoz-auto border-black-2 bacc-mouse-red"34 35 ="lips-center-right pull-left"36 ="lips-center-right-inside border-black-2 bacc-white"> 37 38 ="pos-a border-black-2 bacc-white lips-right"39 40 41 ="mouth border-black-2 m-hoz-auto bacc-mouse-red"42 ="tongue pos-r m-hoz-auto bacc-mouse-red"43 ="tongue-left pos-r pull-left"44 ="tongue-left-inside border-black-2 bacc-mouse-orange"45 46 ="tongue-right pos-r pull-left"47 ="tongue-right-inside border-black-2 bacc-mouse-orange"48 49 50 51 52 53 >
@H_547_301@
1 div { 2 /*border: 1px solid #000;*/ 3 } 4 5 6 位置选择器 7 .pos-a { 8 position: absolute; 9 } 10 11 .pos-r { 12 relative; 13 } 14 15 .pull-left { 16 float: left; 17 } 18 19 .pull-right { 20 right; 21 } 22 23 .m-hoz-auto { 24 margin-left: auto; 25 margin-right: 26 } 27 28 .left-32 { 29 left: 32px; 30 } 31 32 .left-5 { 33 5px; 34 } 35 36 .top-30 { 37 top: 30px; 38 } 39 40 形状选择器 41 .circle { 42 border-radius: 50%; 43 } 44 45 46 样式选择器 47 .bacc-white { 48 background-color: white; 49 } 50 51 .bacc-black { 52 black; 53 } 54 55 .bacc-brown-red { 56 rgb(216,5,23); 57 } 58 59 .bacc-mouse-red { 60 #E80115; 61 } 62 63 .bacc-mouse-orange { 64 #EF6C1C; 65 } 66 67 .border-black-1 { 68 border: 1px solid black; 69 } 70 71 .border-black-2 { 72 2px solid black; 73 } 74 75 .border-black-3 { 76 3px solid black; 77 } 78 79 卡通组件 80 .doraemon { 81 height: 500px; 82 width: 83 } 84 85 .head { 86 rgb(2,159,227); 87 300px; 88 margin: 0px auto; 89 overflow: hidden; 90 310px; 91 } 92 93 .eyes { 94 80px; 95 -5px auto 0; 96 padding-top: 10px; 97 120px; 98 } 99 100 .eye { 101 2px solid #000; 102 Box-sizing: border-Box; 103 104 60px; 105 } 106 107 .eye-left { 108 109 2px; 110 } 111 112 .eye-right { 113 114 58px; 115 } 116 117 .eye-pupil { 118 119 18px; 120 121 } 122 123 .eye-pupil-left { 124 left:125 } 126 127 .eye-pupil-right { 128 129 } 130 131 .face { 132 border-top-left-radius: 45% 60%; 133 border-top-right-radius: 45% 60%; 134 border-bottom-left-radius: 60% 85%; 135 border-bottom-right-radius:136 230px; 137 -30px auto; 138 270px; 139 140 z-index: 5; 141 } 142 143 .nose { 144 38px; 145 16px auto 0; 146 147 } 148 149 .nose-light { 150 151 right:152 8px; 153 154 } 155 156 .nasal-groove{ 157 45px; 158 159 12; 160 } 161 162 .bread-field { 163 44px; 164 240px; 165 10; 166 } 167 168 .bread { 169 170 171 } 172 173 .bread-left { 174 175 -webkit-transform-origin: right top; 176 } 177 178 .bread-left-1 { 179 180 -5px; 181 -webkit-transform: rotate(20deg); 182 } 183 184 .bread-left-2 { 185 186 rotate(5deg); 187 } 188 189 .bread-left-3 { 190 20px; 191 rotate(-15deg); 192 } 193 194 .bread-right { 195 196 left top; 197 } 198 199 .bread-right-1 { 200 201 rotate(-20deg); 202 } 203 204 .bread-right-2 { 205 206 rotate(-5deg); 207 } 208 209 .bread-right-3 { 210 211 rotate(15deg); 212 } 213 214 .lips { 215 216 250px; 217 } 218 219 .lips-center { 220 75px; 221 222 145px; 223 } 224 225 .lips-center-inside { 226 65%; 227 228 border-style: none; 229 border-top-style: solid; 230 231 232 -50px; 233 234 } 235 236 .lips-center-left { 237 40px; 238 239 240 241 } 242 243 .lips-center-left-inside { 244 50% 50%; 245 246 border-top:none; 247 border-left:248 border-right:249 content: " "; 250 display: block; 251 252 -30px; 253 margin-top: -36px; 254 100px; 255 } 256 257 .lips-center-right { 258 259 260 261 } 262 263 .lips-center-right-inside { 264 265 266 267 268 269 270 271 272 -34px; 273 -37px; 274 275 } 276 277 .lips-left { 278 60% 50%; 279 0%; 280 75% 50%; 281 282 283 284 -22px; 285 -59px; 286 287 288 rotate(15deg) ; 289 } 290 291 .lips-right { 292 55% 50%; 293 294 80% 50%; 295 296 297 298 299 300 301 302 rotate(-9deg) ; 303 } 304 305 .mouth { 306 50% 100%; 307 308 309 150px; 310 -50px; 311 312 } 313 314 .tongue { 315 316 317 318 65px; 319 320 321 170px; 322 } 323 324 .tongue-left { 325 326 327 15px; 328 329 330 2; 331 } 332 333 .tongue-left-inside { 334 50% 80%; 335 50% 80%; 336 border-bottom:337 338 339 340 341 342 rotate(-45deg); 343 } 344 345 .tongue-right { 346 347 -67px; 348 83px; 349 350 351 3; 352 } 353 354 .tongue-right-inside { 355 356 357 358 359 -11px; 360 361 362 363 364 rotate(45deg); 365 }
codepen效果： https://codepen.io/bee0060/pen/gjpYLX
这个画画了快一个月，才把头画完，主要是因为懒，三天打鱼两天晒网，其次也在中途遇到几个难点，差点因为这些难点放弃了。
其中最难的要数嘴唇和嘴唇两边的类似半圆形（我叫它们做“嘴唇左边”和“嘴唇右边”）， 其中需要曲线、半圆、倾斜、遮盖来完成。其中最难处理的是曲线，解决了曲线问题后，就比较顺利的完成了后续的画。
嘴唇左边: 这里用了一个半圆加上一定的倾斜实现。但实现之初，半圆会突出到胡子的区域，我就给胡子的容器设置白色背景色，将突出到胡子区域的嘴唇左边部分遮盖。
嘴唇： 因为嘴唇是先向下凸，再向上，又向下的曲线，这里由3个圆角来拼接成这样的曲线，这里做曲线的时间是最长的，遇到的问题和解决方案在下面细说。
嘴唇右边：这里和嘴唇左边采取相同的方法。 只是圆角的角度不相同。
曲线: 我是用圆角来实现曲线的，相信很多人都是这么处理的。但是圆角有个问题，如果只有一面有边框（例如left），且设置圆角，这个边框会在末端慢慢变细，这会影响呈现效果。
我的解决方案是，增加一层容器， 再给容器设置overflow:none,然后真正拥有圆角边框的对象在容器内， 然后调整容器和圆角对象的大小，让边框变细的部分超出容器，以此隐藏掉变细的部分。
画这幅画的过程一点也不优雅， 我无法通过数学的方式优雅的计算出每个对象的位置，每个圆角的弧度，每个倾斜的角度。 我采用最低级的方法， 在chrome中，选中元素并不断调整各种css属性，最终实现现在的效果。 所以这么做非常低效。 如果各位有什么好的工具或方法， 请不吝赐教。 在此先谢过。
到目前为止，只完成了头部， 之后（应该）会陆续完善直至完成。
谢谢观看。另外，圣诞快乐。
-------------------------------------------------------------------------- 2015.12.24 end --------------------------------------------------------------------------
-------------------------------------------------------------------------- 2015.12.27 start --------------------------------------------------------------------------
今天的更新不说功能， 只说一说这幅画的CSS规范和策略。
本画尽量遵照OOCSS的建议：http://www.w3cplus.com/css/oocss-concept
看了本画代码的同学可能会觉得很多html对象都用了一大串的class，但是细心的可能会发现有些类选择器出现过多次。
我这么写的目的是，在css的不同选择器中，尽量减少同名且同值的css属性代码。
在html上，可以像组件一样引用各种需要的选择器来实现效果。
这样可以让css尽量短小，且不重复。 虽然html对象的class属性很长，但是可以像组件一样更灵活的变换组合出需要的效果。
在本画中，只使用类选择器，即class选择器。
类选择器的种类主要分为4种：
1. 组件 - 用于描述哆啦A梦的各组成部分，如头(.head)、脸(.face)、眼睛(.eyes)等， 其中包含的css属性为以下3种不包含的，其实就是那些不知道怎么放进以下三种选择器中的css属性。
2. 形状 - 用于描述对象形状的，如正圆形， 暂时只有.circle类， 其中只有一个属性： border-radius: 50%;
3. 位置 - 这里不包括left、top等直接描述位置的，因为各组件的具体位置基本不可重用。这里描述的位置是：position、float，还有特殊的如margin纵向居中的类。
4. 样式 - 如背景色类、边框颜色类、边框宽度类等。 例如看原图可以看出， 这画其实主要就那么3、4种颜色， 所以我把颜色抽出来，就不需要在一大堆类中写重复的颜色css了。
类选择器的命名：
我用的编辑器是Sublime Text 2， 有一个非常好用也很常用的组件是Emmet，Emmet其中一个功能是可以打很少的字符来输入css，于是我的类选择器，如果其中只设置一个属性的话，一般就用这个属性和值在Emmet中的简写来表示，还有些用属性名的简写加上对应值的名称，用横杠链接来表示。如：
/* 2 左边为Emmet 中的简写，右边为表示的css属性 3 pos ==> position 4 bacc ==> background-color 5 于是我有如下类选择器： 6 7 8 9 10 } 11 12 13 14 15 }
在html中使用选择器时， 也按照选择器类别的顺序： 组件->形状->位置->样式， 如下：
1 ="eye eye-left circle pos-a bacc-white"> 2 >
其中组件有可能有扩展和子组件的关系，就根据组件选择器的辈份从前到后排列。
好了，我的html和css书写规范说完了。 下次更新应该至少会画个围脖（或叫项圈）吧。
谢谢观看。
-------------------------------------------------------------------------- 2015.12.27 end --------------------------------------------------------------------------
-------------------------------------------------------------------------- 2016.01.04 end --------------------------------------------------------------------------
经过几天断断续续的努力， 终于把这个画给完成了。 掌握了基本技巧之后，要完成这幅画的难度就降低很多了。最基本的技巧不外乎：
· 圆角
· 遮盖
· overflow hidden
· 倾斜
1. 项圈 - 用一个较宽的椭圆实现， 只显示下半圆的大部分，用容器把不需要的超出部分隐藏。 铃铛里的曲线也是用会超出容器的两个上下并排的圆实现
2. 身体 - 用不规则的椭圆实现
3. 百宝袋 - 用两个不规则椭圆实现上边和下边
4. 双手 - 用椭圆和倾斜实现手臂，再用正圆的手掌遮盖不需要的部分
5. 双脚 - 用两个不规则椭圆实现左右两腿， 用一个白底黑边的椭圆实现裤裆（~。~），并遮盖在两腿之间，实现最终效果。 用椭圆和倾斜实现双脚。
大体上已经完成， 细节还是看得出差异，不过我个人已经比较满意这个效果了。 之后可能只会花一点点时间去微调一下细节部分。
所以， 这幅画到此结束。 谢谢观看。
-------------------------------------------------------------------------- 2016.01.04 end --------------------------------------------------------------------------
完.....
Code pen效果: http://codepen.io/bee0060/pen/rxjKxP
关键html：
="doraemon pull-left"="head pos-r m-hoz-auto circle border-black-1 bacc-blue"="eye-pupil eye-pupil-left circle pos-r top-30"="eye eye-right circle pos-a bacc-white"="eye-pupil eye-pupil-right circle pos-r top-30"="face border-black-2 bacc-white"="nose circle pos-r border-black-2 bacc-brown-red"="nose-light circle pos-a bacc-white"="bread-field m-hoz-auto pos-r bacc-white"="nasal-groove m-hoz-auto bacc-black"="bread bread-left bread-left-1 pos-a bacc-black"="bread bread-left bread-left-2 pos-a bacc-black"="bread bread-left bread-left-3 pos-a bacc-black"="bread bread-right bread-right-1 pos-a bacc-black"="bread bread-right bread-right-2 pos-a bacc-black"="bread bread-right bread-right-3 pos-a bacc-black"="lips pos-r m-hoz-auto"="lips-left pos-a bacc-white border-black-2"="lips-right pos-a border-black-2 bacc-white"="mouth m-hoz-auto border-black-2 bacc-mouse-red"53 54 ="collar pos-r m-hoz-auto oh"55 ="collor-border-top pos-a circle border-black-2"56 ="collar-inside circle"57 ="collor-border-bottom pos-a circle border-black-2"58 59 ="bell pos-r m-hoz-auto oh circle bacc-bell-yellow border-black-2"60 ="bell-middle-curve bell-middle-curve-1 circle border-black-2"61 ="bell-middle-curve bell-middle-curve-2 circle border-black-2"62 ="bell-hole circle bacc-white border-black-2"63 ="bell-gap m-hoz-auto border-black-1"64 65 ="body pos-r m-hoz-auto"66 ="body-inside pos-r m-hoz-auto border-black-2 bacc-blue"67 ="belly pos-r m-hoz-auto border-black-2 bacc-white"68 ="bag pos-r m-hoz-auto oh"69 ="bag-top pos-a border-black-2"70 ="bag-bottom pos-r border-black-2"71 72 73 ="left-hand pos-r"74 ="left-arm pos-r border-black-2 bacc-blue"75 ="left-palm pos-a circle border-black-2 bacc-white"76 77 ="right-hand pos-r"78 ="right-arm pos-r border-black-2 bacc-blue"79 ="right-palm pos-a circle border-black-2 bacc-white"80 81 ="left-leg pos-r oh"82 ="left-leg-inside pos-r border-black-2 bacc-blue"83 84 ="crotch pos-a m-hoz-auto oh"85 ="crotch-inside border-black-2 bacc-white"> 86 87 88 ="right-leg pos-r oh"89 ="right-leg-inside pos-r border-black-2 bacc-blue"90 91 92 ="left-foot pos-a border-black-2 bacc-white"93 ="right-foot pos-a border-black-2 bacc-white"94 95 >
完整css：
.bacc-blue { .bacc-bell-yellow { #F5D600; 79 80 81 } 82 83 84 85 } 86 87 .oh { 89 } 90 91 92 93 95 } 96 97 .head { 98 99 100 102 } 103 104 105 106 107 109 } 110 111 112 115 116 } 117 118 125 126 } 127 128 129 130 131 132 } 133 134 136 } 137 138 139 140 } 141 142 143 147 148 149 150 152 } 153 154 155 156 158 } 159 160 161 162 165 } 166 167 168 176 177 } 178 179 190 192 193 } 194 195 197 198 } 199 200 202 203 } 204 205 207 208 } 209 210 212 213 } 214 215 217 218 } 219 220 228 } 229 230 241 242 243 245 } 246 247 252 } 253 254 255 256 257 261 262 263 266 } 267 268 272 } 273 274 275 276 277 286 } 288 289 290 291 298 300 } 302 303 304 305 312 313 314 } 315 316 322 323 } 324 325 35px; 331 332 333 334 } 335 336 337 341 349 352 354 355 } 356 357 363 364 } 365 366 367 368 369 370 371 372 373 374 375 376 377 } 378 379 .collar { 380 -40px; 381 382 220px; 383 384 } 385 386 .collar-inside { 387 20px solid rgb(216,1)">388 50px; 389 390 -19px; 391 392 } 393 394 .collor-border-top { 395 55px; 396 -38px; 397 0px; 398 399 } 400 401 .collor-border-bottom { 402 73px; 403 -75px; 404 -17px; 405 406 } 407 408 .bell { 409 53px; 410 -15px; 411 412 413 } 414 415 .bell-middle-curve { 416 417 418 } 419 420 .bell-middle-curve-1 { 421 12px; 422 -27px; 423 } 424 425 .bell-middle-curve-2 { 426 -48px; 427 428 } 429 430 .bell-hole { 431 432 -46px; 433 21px; 434 435 } 436 437 .bell-gap { 438 16px; 439 26px; 440 441 } 442 443 .body { 444 162px; 445 -65px; 446 430px; 447 1; 448 } 449 450 .body-inside { 451 15% 75%; 452 12% 75%; 453 15% 50%; 454 25% 50%; 455 180px; 456 457 458 459 } 460 461 .belly { 462 37% 50%; 463 464 465 466 125px; 467 -165px; 468 175px; 469 470 } 471 472 .bag { 473 474 475 476 146px; 477 } 478 479 .bag-top { 480 40%; 481 482 -42px; 483 -20px; 484 485 } 486 487 .bag-bottom { 488 50% 32%; 489 490 140px; 491 -83px; 492 493 142px; 494 } 495 496 .left-hand { 497 498 -139px; 499 25px; 500 501 0; 502 } 503 504 .left-arm { 505 45% 40%; 506 45% 30%; 507 508 33px; 509 510 95px; 511 512 rotate(-30deg); 513 left bottom; 514 } 515 516 .left-palm { 517 518 519 520 521 } 522 523 .right-hand { 524 525 -115px; 526 225px; 527 528 529 } 530 531 .right-arm { 532 533 534 535 536 537 538 539 rotate(30deg); 540 right bottom; 541 } 542 543 .right-palm { 544 545 -52px; 546 547 548 } 549 550 .left-leg { 551 63px; 552 553 101px; 554 555 556 } 557 558 .left-leg-inside { 559 35% 100%; 560 25% 55%; 561 100% 20%; 562 563 564 -16px; 565 566 } 567 568 .crotch { 569 570 571 192px; 572 573 574 } 575 576 .crotch-inside { 577 50% 60%; 578 579 580 581 582 } 583 584 .right-leg { 585 586 -62px; 587 209px; 588 589 590 } 591 592 .right-leg-inside { 593 594 595 596 597 598 599 -4px; 600 601 } 602 603 .left-foot { 604 60% 60%; 605 50% 85%; 606 43% 75%; 607 50% 55%; 608 609 -32px; 610 72px; 611 133px; 612 613 614 } 615 616 .right-foot { 617 618 619 620 43% 75%; 621 622 623 218px; 624 625 626 627 }
（在这里再发一次demo链接， 希望可以省去你滚动回本文顶部的时间）
（至于画完这个接着做什么， 现在有几个想法可以做， 也可能做其他东西， 管他呢，随心而至就是了）
有任何问题或意见，欢迎交流。
如果发现本文有什么问题（如错别字），请不吝告知，谢谢。
转载请注明出处：[css]我要用css画幅画(七) - 哆啦A梦
