<div id="koRilakkuma"> <div id="face"> <div class="eye leftEye"></div> <div class="eye rightEye"></div> <div id="snout"> <div id="nose"></div> <div id="mouth"> <div class="lip leftLip"></div> <div class="lip rightLip"></div> </div> </div> <div id="button"> <div class="buttonHole"></div> <div class="buttonHole"></div> <div class="buttonHole"></div> <div class="buttonHole"></div> </div> <div class="clear"></div> </div> </div>
/* Colors Ko-Rilakkuma: feecc6 (beige) Eyes and nose: 60474a (dk brown) Button: E51024 (red) */ #koRilakkuma { background-color: #feecc6; } #face { width: 500px; margin: 0 auto 0; position: relative; padding: 100px 0 100px; } .eye { width: 90px; height: 90px; border-radius: 45px; /* Opera 10.5, IE 9, Saf5, Chrome */ -moz-border-radius: 45px; /* FF1+ */ -webkit-border-radius: 45px; /* Saf3-4 */ background-color: #60474a; } .leftEye { float: left; } .rightEye { float: right; } #snout { background-color: #FDFCF3; float: left; height: 185px; margin: 16px 26px 26px; width: 268px; border-radius: 140px; /* Opera 10.5, IE 9, Saf5, Chrome */ -moz-border-radius: 140px; /* FF1+ */ -webkit-border-radius: 140px; /* Saf3-4 */ } #nose { width: 70px; height: 70px; border-radius: 35px; /* Opera 10.5, IE 9, Saf5, Chrome */ -moz-border-radius: 35px; /* FF1+ */ -webkit-border-radius: 35px; /* Saf3-4 */ background-color: #60474a; margin: 20px auto -35px; } #mouth { margin: 0 auto; width: 220px; } .lip { float: left; background-color: #60474a; width: 110px; height: 40px; border-radius: 20px; /* Opera 10.5, IE 9, Saf5, Chrome */ -moz-border-radius: 20px; /* FF1+ */ -webkit-border-radius: 20px; /* Saf3-4 */ } .leftLip { -moz-transform-origin: top right; /* FF1+ */ -webkit-transform-origin: top right; /* Saf3-4 */ -o-transform-origin: top right; /* Opera 10.5+ */ -ms-transform-origin: top right; /* IE9 */ transform-origin: top right; -moz-transform: rotate(-45deg); /* FF3.5+ */ -o-transform: rotate(-45deg); /* Opera 10.5 */ -webkit-transform: rotate(-45deg); /* Saf3.1+, Chrome */ -ms-transform: rotate(-45deg); /* IE9 */ transform: rotate(-45deg); } .rightLip { -moz-transform-origin: top left; /* FF1+ */ -webkit-transform-origin: top left; /* Saf3-4 */ -o-transform-origin: top left; /* Opera 10.5+ */ -ms-transform-origin: top left; /* IE9 */ transform-origin: top left; -moz-transform: rotate(45deg); /* FF3.5+ */ -o-transform: rotate(45deg); /* Opera 10.5 */ -webkit-transform: rotate(45deg); /* Saf3.1+, Chrome */ -ms-transform: rotate(45deg); /* IE9 */ transform: rotate(45deg); } #button { background-color: #E51024; clear: both; height: 80px; margin: 0 auto; padding: 30px; width: 80px; border-radius: 70px; /* Opera 10.5, IE 9, Saf5, Chrome */ -moz-border-radius: 70px; /* FF1+ */ -webkit-border-radius: 70px; /* Saf3-4 */ } .buttonHole { background-color: #FFFFFF; float: left; height: 30px; margin: 5px; width: 30px; border-radius: 15px; /* Opera 10.5, IE 9, Saf5, Chrome */ -moz-border-radius: 15px; -webkit-border-radius: 15px; /* Saf3-4 */ } .clear { clear:both; }