doraemon

doraemon

by Ahmad Najiullah

HTML

<div id="doraemon">
	<div id="face">
    	<div id="head_light"></div>
    	<div id="eyes">
    	<div class="eye eye_left"></div>
        	<div class="black_eye black_left"></div>
        
      	<div class="eye eye_right"></div>
        	<div class="black_eye black_right"></div>
        </div>
        <div id="base">
			<div id="base_white"></div>
				<div id="nose">
					<div id="nose_light"></div>
				</div>
                <div id="nose_line"></div>
                <div id="mouth"></div>
                <div id="mouth_rewrite"></div>
                <div id="firefox_mouth"></div>

				<div class="whiskers whi_right_top rotate160"></div>
				<div class="whiskers whi_right"></div>
				<div class="whiskers whi_right_bottom rotate20"></div>
                    
				<div class="whiskers whi_left_top rotate20"></div>
				<div class="whiskers whi_left"></div>
				<div class="whiskers whi_left_bottom rotate160"></div>
        </div>
	</div>
    <div id="choker">
    	<div id="belt"></div>
    	<div id="bell">
       	  <div id="bell_line"></div>
            <div id="bell_circle"></div>
            <div id="bell_under"></div>
		<div id="bell_light"></div>
		</div>
    </div>
	<div id="body">
    <div id="doutai"></div>
		<div class="base_white2 doutai_center"></div>
        		<div id="pocket">
                	<div id="circle"></div>
                    <div id="circle_rewrite"></div>
                </div>
	</div>
	<div id="hand_right">
    	<div id="arm_right"></div>
		<div class="hand_circle hand_right"></div>
		<div class="arm_rewrite_right"></div>
    </div>
	<div id="hand_left">
    	<div id="arm_left"></div>
		<div class="hand_circle hand_left"></div>
	  <div class="arm_rewrite_left"></div>
    </div>
	<div id="foot">
    	<div id="foot_left"></div>
        <div id="foot_right"></div>
        <div id="foot_rewrite"></div>
    </div>
    	<div id="shadow_doutai_arm"></div>
    	<div id="shadow_doutai_left"></div>
    	<div id="shadow_doutai_right"></div>
       ...

CSS

body{
	background:#fff;
}

#doraemon{
	position:relative;
	margin:50px;	
}

#head_light{
	width:50px;
	height:50px;
	transform: rotate(20deg);
		-webkit-transform: rotate(20deg);
		-moz-transform: rotate(20deg);
		-o-transform: rotate(20deg);
		-ms-transform: rotate(20deg);
	box-shadow:80px 20px 50px #fff;
		-webkit-box-shadow:80px 20px 55px #fff;
		-moz-box-shadow:80px 20px 50px #fff;
	border-radius:45px;
		-webkit-border-radius:45px;
		-moz-border-radius:60px;
	position:absolute;
	top:-20px;
	left:170px;
	opacity:0.5
}

#face{
	position:relative;
	width:310px;
	height:300px;
	border-radius:146px;
		-webkit-border-radius:146px;
		-moz-border-radius:146px;
	background:#07beea;	
	background: linear-gradient(right top, #fff,#07beea 20%, #10a6ce 73% ,#000 95% ,#000 155%); 
		background: -webkit-linear-gradient(right top, #fff,#07beea 20%, #10a6ce 73% ,#000 95% ,#000 155%); 
		background: -moz-linear-gradient(right top, #fff,#07beea 20%, #10a6ce 73% ,#000 95% ,#000 155%); 
		background: -o-linear-gradient(right top, #fff,#07beea 20%, #10a6ce 73% ,#000 95% ,#000 155%); 
		background: -ms-linear-gradient(right top, #fff,#07beea 20%, #10a6ce 73% ,#000 95% ,#000 155%);  
	border:#333 2px solid;
	top:-15px;
	box-shadow:-5px 10px 15px rgba(0,0,0,0.45);
		-webkit-box-shadow:-5px 10px 15px rgba(0,0,0,0.45);
		-moz-box-shadow:-5px 10px 15px rgba(0,0,0,0.45);
	
}

#base{
	position:relative;
	top:-5px;
}

#base_white{
	position:absolute;
	border:#000 2px solid;
	width:264px;
	height:196px;
	border-radius: 150px 150px;
		-webkit-border-radius: 150px 150px;
		-moz-border-radius: 150px 150px;
	background:#FFF;
	background: linear-gradient(right top, #fff,#fff 75%, #eee 83%,#999 90%,#444 95%, #000); 
		background: -webkit-linear-gradient(right top, #fff,#fff 75%, #eee 83%,#999 90%,#444 95%, #000); 
		background: -moz-linear-gradient(right top, #fff,#fff 75%, #eee 83%,#999 90%,#444 95%, #000); 
		background: -o-linear-gradient(right top, #fff,#fff 75%, #eee 83%,#999 90%,#444 95%,...