CSSだけでハロを描いてみた。
会社の偉い人に「CSSだけでガンダムを描け」と言われたのですが、CSS3は初めてなのでこれで許してください。
画像を一切使わずにCSS3だけでドラえもんを描いてみた を参考にしました。
# Firefox 3.5.x 以上と Chrome 以外で見ると悲しいことになります。
ソースは以下
<div id="haro">
<div id="haro_light"></div>
<div id="holes">
<div class="hole_left"></div>
<div class="hole_right"></div>
</div>
<div id="ears">
<div class="ear_left"></div>
<div class="ear_right"></div>
</div>
<div id="eyes">
<div class="eye_left"></div>
<div class="eye_right"></div>
</div>
<div id="mouth">
<div class="mouth_left"></div>
<div class="mouth_center_wrap"><div class="mouth_center"></div></div>
<div class="mouth_right"></div>
</div>
<div id="haro_shadow"></div>
</div>
body {
margin: 100px;
}
#haro {
-webkit-background-clip: border;
-webkit-background-inline-policy: continuous;
-webkit-background-origin: padding;
-webkit-border-radius: 146px;
-webkit-box-shadow:-5px 10px 15px rgba(0, 0, 0, 0.45);
-moz-background-clip: border;
-moz-background-inline-policy: continuous;
-moz-background-origin: padding;
-moz-border-radius: 146px;
-moz-box-shadow:-5px 10px 15px rgba(0, 0, 0, 0.45);
background: #bcde56 none repeat scroll 0 0;
border:1px solid #65772d;
position:relative;
top: -15px;
width:270px;
height: 270px;
}#haro_light {
-webkit-border-radius: 90px;
-webkit-box-shadow: 90px 90px 80px #FFFFFF;
-webkit-transform: rotate(50deg);
-moz-border-radius: 90px;
-moz-box-shadow: 90px 90px 80px #FFFFFF;
-moz-transform: rotate(50deg);
position: absolute;
top: -140px;
left: 90px;
width: 100px;
height: 100px;
z-index: 30;
}#holes {
position: relative;
top: -5px;
}
.hole_left,
.hole_right {
-webkit-background-clip: border;
-webkit-background-inline-policy: continuous;
-webkit-background-origin: padding;
-webkit-border-radius: 10px / 50px;
-moz-background-clip: border;
-moz-background-inline-policy: continuous;
-moz-background-origin: padding;
-moz-border-radius: 10px / 50px;
background: #444444 none repeat scroll 0 0;
border: 1px solid #000000;
position: absolute;
width: 15px;
height: 130px;
z-index: 40;
}
.hole_left {
-webkit-transform: rotate(-140deg);
-moz-transform: rotate(-140deg);
left: 40px;
}
.hole_right {
-webkit-transform: rotate(140deg);
-moz-transform: rotate(140deg);
left: 213px;
}#ears {
position: relative;
top: -90px;
}
.ear_left,
.ear_right {
-webkit-background-clip:border;
-webkit-background-inline-policy:continuous;
-webkit-background-origin:padding;
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
-moz-border-radius: 200px 30px 100px 100px / 500px 200px 400px 200px;
background:#bcde56 none repeat scroll 0 0;
border:1px solid #65772d;
position: absolute;
width: 40px;
height: 130px;
z-index: 50;
}
.ear_left {
-webkit-border-radius: 100px 100px 30px 200px / 200px 400px 200px 500px;
-webkit-transform: rotate(120deg);
-moz-transform: matrix(-1, 0, 0, 1, 0pt, 0pt) rotate(60deg);
left: 28px;
}
.ear_right {
-webkit-border-radius: 200px 30px 100px 100px / 500px 200px 200px 400px;
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
left: 205px;
}#eyes {
position: relative;
top: 100px;
}
.eye_left,
.eye_right {
-webkit-background-clip: border;
-webkit-background-inline-policy: continuous;
-webkit-background-origin: padding;
-webkit-border-radius: 10px / 35px;
-moz-background-clip: border;
-moz-background-inline-policy: continuous;
-moz-background-origin: padding;
-moz-border-radius: 10px / 35px;
background: #444444 none repeat scroll 0 0;
border: 1px solid #000000;
position: absolute;
width: 8px;
height: 30px;
z-index: 40;
}
.eye_left {
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
left: 103px;
}
.eye_right {
-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
left: 156px;
}#mouth {
position: relative;
top: 170px;
}
.mouth_center_wrap {
position: absolute;
top: 0;
left: 40px;
height: 13px;
overflow: hidden;
}
.mouth_center {
-webkit-border-radius: 60px / 25px;
-moz-border-radius: 60px / 25px;
border-top: 2px solid #333333;
border-right: 1px solid #333333;
border-left: 1px solid #333333;
width: 190px;
height: 50px;
z-index: 40;
}.mouth_right,
.mouth_left {
border-bottom: 2px solid #333333;
position: absolute;
top: -13px;
width: 40px;
height: 30px;
z-index: 40;
}
.mouth_right {
-webkit-border-radius: 0 0 90px 50px / 0 0 90px 30px;
-webkit-transform: rotate(10deg);
-moz-border-radius: 0 0 90px 50px / 0 0 90px 30px;
-moz-transform: rotate(10deg);
border-right: 1px solid #333333;
left: 220px;
}
.mouth_left {
-webkit-border-radius: 0 0 50px 90px / 0 0 30px 90px;
-webkit-transform: rotate(-10deg);
-moz-border-radius: 0 0 50px 90px / 0 0 30px 90px;
-moz-transform: rotate(-10deg);
border-left: 1px solid #333333;
left: 10px;
}#haro_shadow {
-webkit-border-radius: 90px;
-webkit-box-shadow: -10px 240px 90px #000000;
-moz-border-radius: 90px;
-moz-box-shadow: -10px 240px 90px #000000;
opacity: 0.5;
position: absolute;
top: 0;
left: 90px;
width: 100px;
height: 30px;
z-index: 20;
}
