2014-03-05

用CSS3+DIV繪圖

其實網路上很多神人早就利用CSS+div來畫圖了，像畫apple的logo、opera的logo、小叮噹(會叫小叮噹的都是有年紀的了…@@)…等等(更多可看看這裡或這裡)~

我也沒想過要自己試試看，但最近寫了全新專案，想說錯誤頁也要自己訂個有個性一點的，所以就自己畫了超陽春，但純CSS的畫面…..



































我果然沒什麼美術天分，只能想到這種簡單的圖案，哈哈哈~XD

但別看這好像很簡單，其實也是需要很多圖層去疊在一起的呢，尤其是那個S，超難畫的@@

提供一下原始碼，你可以自己到Try it yourself去，在左邊貼上原始碼，按下送出之後看看右邊的結果(IE不行唷~~)。


  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style type="text/css">
  5. body {background-color: #EEEEEE;}
  6. #MainWrapper {min-width: 500px;}
  7. #MainFace {position: relative;margin-top: 50px;position: relative;border: 20px solid #666;background-color: #666;width: 450px;height: 400px;}
  8. #FaceInner {position: relative;border: 20px solid #CBCBCB;background-color: #CBCBCB;height: 360px;}
  9. #LeftEyeWrapper {position: relative;margin-left: 10px;float: left;height: 180px;width: 180px;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-o-transform: rotate(45deg);-ms-transform: rotate(45deg);}
  10. #RightEyeWrapper {position: relative;margin-right: 10px;float: right;height: 180px;width: 180px;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-o-transform: rotate(45deg);-ms-transform: rotate(45deg);}
  11. #MouthWrapper {position: relative;margin-left: auto;margin-right: auto;margin-top: 90px;height: 100px;width: 300px;}
  12. #MainTextWrapper {position: relative;text-align: center;width: 450px;margin-top: 10px;padding-left: 30px;}
  13. .Center {position: relative;margin-left: auto;margin-right: auto;}
  14. .Radius {-webkit-border-radius: 16px;-moz-border-radius: 16px;border-radius: 16px;}
  15. .eye1 {position: absolute;background-color: #666;width: 20px;height: 120px;left: 80px;top: 30px;}
  16. .eye2 {position: absolute;background-color: #666;width: 120px;height: 20px;top: 80px;left: 30px;}
  17. .mouth_line {position: relative;background-color: #666;height: 20px;width: 300px;margin-top: 10px;}
  18. .tongue1 {position: relative;float: right;background-color: #666;height: 60px;width: 50px;border: 2px solid #666;-webkit-border-radius: 20px;-moz-border-radius: 20px;border-radius: 20px;margin-top: -20px;margin-right: 15px;}
  19. .tongue2 {position: relative;margin-left: auto;margin-right: auto;margin-top: 20px;width: 5px;height: 30px;background-color: #777;}
  20. .clearfix {clear: both;}
  21. .CharBorder {position: relative;float: left;width: 78px;margin-right: 0px;margin-left: 4px;border: 1px solid Transparent;}
  22. #TextOOuter {position: absolute;width: 80px;height: 100px;background-color: #D10341;-moz-border-radius: 38px / 50px;-webkit-border-radius: 38px / 50px;border-radius: 38px / 50px;}
  23. #TextOInner {position: absolute;width: 34px;height: 60px;background-color: #EEEEEE;top: 19px;left: 24px;-webkit-border-radius: 16px / 30px;-moz-border-radius: 16px / 30px;border-radius: 16px / 30px;}
  24. #Text-oOuter {position: absolute;width: 60px;height: 70px;background-color: #35A41A;-webkit-border-radius: 28px / 35px;-moz-border-radius: 28px / 35px;border-radius: 28px / 35px;top: 30px;left: 10px;}
  25. #Text-oInner {position: absolute;background-color: #EEEEEE;width: 28px;height: 40px;top: 15px;left: 16px;-webkit-border-radius: 13px / 20px;-moz-border-radius: 13px / 20px;border-radius: 13px / 20px;}
  26. #Text-pOuter {position: absolute;width: 60px;height: 70px;background-color: #CA6020;-webkit-border-radius: 28px / 35px;-moz-border-radius: 28px / 35px;border-radius: 28px / 35px;top: 30px;left: 10px;}
  27. #Text-pInner {position: absolute;background-color: #EEEEEE;width: 28px;height: 40px;top: 15px;left: 16px;-webkit-border-radius: 13px / 20px;-moz-border-radius: 13px / 20px;border-radius: 13px / 20px;}
  28. #Text-pLine{position: absolute;background-color: #CA6020;width: 18px;height: 105px;top: 29px;left: 10px;-webkit-border-radius: 6px;-moz-border-radius: 6px;border-radius: 6px;}
  29. #SWrapper {position: absolute;width: 60px;height: 70px;top: 30px;left: 10px;}
  30. #STopWrapper {position: absolute;width: 60px;height: 40px;top: 0px;}
  31. #SBtmWrapper {position: absolute;width: 60px;height: 40px;top: 32px;}
  32. .SCircle1 {position: relative;width: 60px;height: 38px;background-color: #0B60DF;-webkit-border-radius: 30px / 19px;-moz-border-radius: 30px / 19px;border-radius: 30px / 19px;}
  33. .SCircle2 {position: absolute;width: 24px;height: 14px;background-color: #EEE;top: 12px;left: 18px;-webkit-border-radius: 12px / 7px;-moz-border-radius: 12px / 7px;border-radius: 12px / 7px;}
  34. #SMask1 {position: absolute;background-color: #EEE;width: 30px;height: 10px;left: 26px;top: 22px;-webkit-transform: rotate(26deg);-moz-transform: rotate(26deg);-o-transform: rotate(26deg);-ms-transform: rotate(26deg);}
  35. #SMask2 {position: absolute;background-color: #EEE;width: 34px;height: 10px;left: 4px;top: 39px;-webkit-transform: rotate(26deg);-moz-transform: rotate(26deg);-o-transform: rotate(26deg);-ms-transform: rotate(26deg);}
  36. #SCircle3{position:absolute;background-color: #0B60DF;width: 19px;height: 20px;left: 41px;top: 11px;-webkit-transform: rotate(26deg);-moz-transform: rotate(26deg);-o-transform: rotate(26deg);-ms-transform: rotate(26deg);-webkit-border-radius: 9px / 10px;-moz-border-radius: 9px / 10px;border-radius: 9px / 10px;}
  37. #SCircle4{position:absolute;background-color: #0B60DF;width: 19px;height: 20px;left: 0px;top: 39px;-webkit-transform: rotate(26deg);-moz-transform: rotate(26deg);-o-transform: rotate(26deg);-ms-transform: rotate(26deg);-webkit-border-radius: 9px / 10px;-moz-border-radius: 9px / 10px;border-radius: 9px / 10px;}
  38. #Ex1{position: absolute;background-color:#B304AE;width: 20px;height: 60px;top: 10px;left: 20px;-webkit-border-radius: 18px 18px 18px 18px / 20px 20px 50px 50px;-moz-border-radius: 18px 18px 18px 18px / 20px 20px 50px 50px;border-radius:  18px 18px 18px 18px / 20px 20px 50px 50px;}
  39. #Ex2{position: absolute;background-color: #B304AE;width:20px;height: 20px;top: 80px;left: 20px;-webkit-border-radius: 20px;-moz-border-radius: 20px;border-radius: 20px;}
  40. #sign{position: fixed; color:#EEE; font-family:"Courier New", "Courier"; font-size:.8em; bottom:0px;text-shadow:1px 1px 3px #999;}
  41. </style>
  42. </head>
  44. <body>
  45. <div id="MainWrapper">
  46.   <div id="MainFace" class="Center Radius">
  47.     <div id="FaceInner" class="Radius">
  48.       <div id="LeftEyeWrapper">
  49.         <div class="eye1"></div>
  50.         <div class="eye2"></div>
  51.       </div>
  52.       <div id="RightEyeWrapper">
  53.         <div class="eye1"></div>
  54.         <div class="eye2"></div>
  55.       </div>
  56.       <div class="clearfix"></div>
  57.       <div id="MouthWrapper">
  58.         <div class="mouth_line"></div>
  59.         <div class="tongue1">
  60.           <div class="tongue2"></div>
  61.         </div>
  62.       </div>
  63.     </div>
  64.   </div>
  65.   <div id="MainTextWrapper" class="Center">
  66.     <div class="center">
  67.         <div class="CharBorder">
  68.           <div id="TextOOuter"><div id="TextOInner"></div></div>
  69.         </div>
  70.         <div class="CharBorder">
  71.           <div id="Text-oOuter"><div id="Text-oInner"></div></div>
  72.         </div>
  73.         <div class="CharBorder">
  74.           <div id="Text-pLine"></div>
  75.           <div id="Text-pOuter"><div id="Text-pInner"></div></div>
  76.         </div>
  77.         <div class="CharBorder">
  78.           <div id="SWrapper">
  79.             <div id="STopWrapper">
  80.               <div class="SCircle1"><div class="SCircle2"></div></div>
  81.             </div>
  82.             <div id="SBtmWrapper">
  83.               <div class="SCircle1"><div class="SCircle2"></div></div>
  84.             </div>
  85.             <div id="SMask1"></div>
  86.             <div id="SMask2"></div>
  87.             <div id="SCircle3"></div>
  88.             <div id="SCircle4"></div>
  89.           </div>
  90.         </div>
  91.         <div class="CharBorder">
  92.           <div id="Ex1"></div>
  93.           <div id="Ex2"></div>
  94.         </div>
  95.         <div class="clearfix"></div>
  96.         </div>
  97.   </div>
  98. </div>
  99. <div id="sign">By Eric Chou</div>
  100. </body>
  101. </html>
張貼者： 於
標籤： ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)