老宅筆記本: 用CSS3+DIV繪圖

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

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

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

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

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

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {background-color: #EEEEEE;}
#MainWrapper {min-width: 500px;}
#MainFace {position: relative;margin-top: 50px;position: relative;border: 20px solid #666;background-color: #666;width: 450px;height: 400px;}
#FaceInner {position: relative;border: 20px solid #CBCBCB;background-color: #CBCBCB;height: 360px;}
#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);}
#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);}
#MouthWrapper {position: relative;margin-left: auto;margin-right: auto;margin-top: 90px;height: 100px;width: 300px;}
#MainTextWrapper {position: relative;text-align: center;width: 450px;margin-top: 10px;padding-left: 30px;}
.Center {position: relative;margin-left: auto;margin-right: auto;}
.Radius {-webkit-border-radius: 16px;-moz-border-radius: 16px;border-radius: 16px;}
.eye1 {position: absolute;background-color: #666;width: 20px;height: 120px;left: 80px;top: 30px;}
.eye2 {position: absolute;background-color: #666;width: 120px;height: 20px;top: 80px;left: 30px;}
.mouth_line {position: relative;background-color: #666;height: 20px;width: 300px;margin-top: 10px;}
.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;}
.tongue2 {position: relative;margin-left: auto;margin-right: auto;margin-top: 20px;width: 5px;height: 30px;background-color: #777;}
.clearfix {clear: both;}
.CharBorder {position: relative;float: left;width: 78px;margin-right: 0px;margin-left: 4px;border: 1px solid Transparent;}
#TextOOuter {position: absolute;width: 80px;height: 100px;background-color: #D10341;-moz-border-radius: 38px / 50px;-webkit-border-radius: 38px / 50px;border-radius: 38px / 50px;}
#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;}
#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;}
#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;}
#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;}
#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;}
#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;}
#SWrapper {position: absolute;width: 60px;height: 70px;top: 30px;left: 10px;}
#STopWrapper {position: absolute;width: 60px;height: 40px;top: 0px;}
#SBtmWrapper {position: absolute;width: 60px;height: 40px;top: 32px;}
.SCircle1 {position: relative;width: 60px;height: 38px;background-color: #0B60DF;-webkit-border-radius: 30px / 19px;-moz-border-radius: 30px / 19px;border-radius: 30px / 19px;}
.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;}
#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);}
#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);}
#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;}
#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;}
#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;}
#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;}
#sign{position: fixed; color:#EEE; font-family:"Courier New", "Courier"; font-size:.8em; bottom:0px;text-shadow:1px 1px 3px #999;}
</style>
</head>

<body>
<div id="MainWrapper">
  <div id="MainFace" class="Center Radius">
    <div id="FaceInner" class="Radius">
      <div id="LeftEyeWrapper">
        <div class="eye1"></div>
        <div class="eye2"></div>
      </div>
      <div id="RightEyeWrapper">
        <div class="eye1"></div>
        <div class="eye2"></div>
      </div>
      <div class="clearfix"></div>
      <div id="MouthWrapper">
        <div class="mouth_line"></div>
        <div class="tongue1">
          <div class="tongue2"></div>
        </div>
      </div>
    </div>
  </div>
  <div id="MainTextWrapper" class="Center">
    <div class="center">
        <div class="CharBorder">
          <div id="TextOOuter"><div id="TextOInner"></div></div>
        </div>
        <div class="CharBorder">
          <div id="Text-oOuter"><div id="Text-oInner"></div></div>
        </div>
        <div class="CharBorder">
          <div id="Text-pLine"></div>
          <div id="Text-pOuter"><div id="Text-pInner"></div></div>
        </div>
        <div class="CharBorder">
          <div id="SWrapper">
            <div id="STopWrapper">
              <div class="SCircle1"><div class="SCircle2"></div></div>
            </div>
            <div id="SBtmWrapper">
              <div class="SCircle1"><div class="SCircle2"></div></div>
            </div>
            <div id="SMask1"></div>
            <div id="SMask2"></div>
            <div id="SCircle3"></div>
            <div id="SCircle4"></div>
          </div>
        </div>
        <div class="CharBorder">
          <div id="Ex1"></div>
          <div id="Ex2"></div>
        </div>
        <div class="clearfix"></div>
        </div>
  </div>
</div>
<div id="sign">By Eric Chou</div>
</body>
</html>

老宅筆記本

2014-03-05

用CSS3+DIV繪圖

沒有留言:

張貼留言