Mortadelo CSS

by JuanMa

HTML

<div class="mortadelo">
	<div class="camisa"></div>
	<div class="corbata2"></div>
	<div class="corbata1"></div>
	<div class="cuello"></div>
	<div class="cabeza">
		<div class="boca"></div>
	</div>
	<div class="cejas"></div>
	<div class="ojo-dch">
		<div class="parpados"></div>
	</div>
	<div class="ojo-iz">
		<div class="parpados"></div>
	</div>
	<div class="nariz"></div>
	<div class="gafas"></div>
	<div class="oreja"></div>
	<div class="firma">OLMID</div>
</div>

CSS

.mortadelo{
	position: relative;
	width: 31.5em;
	height: 31.5em;
	top: .6em;
	left: .6em;
	border: 0em solid #000;
	display:inline-block;
	overflow:hidden;
}
.mortadelo .cabeza{
	position: absolute;
	width: 17.5em;
	height: 13em;
	top: 1.8em;
	left: 2.15em;
	border-left: .7em solid #000;
	border-top: .3em solid #000;
	border-right: .15em solid #000;
	border-bottom: .15em solid #000;
	border-radius: 100% 90% 160% 50% / 100% 120% 100% 100%;
	background: #fcd798;
	background: -moz-linear-gradient(top,  #fcd798 0%, #ee8e54 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fcd798), color-stop(100%,#ee8e54));
	background: -webkit-linear-gradient(top,  #fcd798 0%,#ee8e54 100%);
	background: -o-linear-gradient(top,  #fcd798 0%,#ee8e54 100%);
	background: -ms-linear-gradient(top,  #fcd798 0%,#ee8e54 100%);
	background: linear-gradient(to bottom,  #fcd798 0%,#ee8e54 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcd798', endColorstr='#ee8e54',GradientType=0 );
	overflow:hidden;
}
.mortadelo .cejas{
	position: absolute;
	width: 12em;
	height: 5em;
	top: 0em;
	left: 6.5em;
	border: 0em solid #000;
}
.mortadelo .cejas:before, .mortadelo .cejas:after{
	content:"";
	position: absolute;
	width: 3.5em;
	height: 2em;
	top: .25em;
	left: 6.5em;
	border-left: 1em solid transparent;
	border-top: 1em solid #000;
	border-right: .2em solid transparent;
	border-bottom: .2em solid transparent;
	border-radius: 80% 100% 60% 50% / 100% 100% 80% 80%;
	-webkit-transform: rotate(5deg);
	-moz-transform: rotate(5deg);
	-ms-transform: rotate(5deg);
	-o-transform: rotate(5deg);
	transform: rotate(5deg);
}
.mortadelo .cejas:after{
	top: 1em;
	left: 1em;
	border-right: 1.1em solid transparent;
	border-top: 1.25em solid #000;
	border-left: .2em solid transparent;
	border-bottom: .2em solid transparent;
	-webkit-transform: rotate(-55deg);
	-moz-transform: rotate(-55deg);
	-ms-transform: rotate(-55deg);
	-o-transform:...