Tutorial como dibujar a Bob Esponja con CSS3

Si eres un diseñador web y eres de las personas como yo que literalmente apestamos a la hora de dibujar te voy a decir algo, aun no estamos perdidos, podemos dibujar con CSS! Por mas extraño que suene podemos hacer dibujos, ilustraciones con nuestras habilidades de diseñador web.

Hace ya unos artículos atrás en el articulo llamado Bob Esponja hecho con CSS y el futuro de las ilustraciones, platicaba de mi experiencia realizando el personaje de caricatura Bob Esponja, te platicaba sobre las nuevas cosas que se están haciendo con CSS3 y sus propiedades pero hoy no te vengo a hablar sobre eso, hoy vas a aprender a dibujar con CSS, vas a poder hacer tu propio bob esponja y sobre todo aprenderás a hacer tus dibujos con CSS, apoco no es genial?.

Demo de Bob Esponja hecho con CSS: https://www.falconmasters.com/demos/bob_esponja/

He decidido hacer un videotutorial para poder enseñarte a hacerlo, pero no te preocupes que también he dejado el código para que puedas corregirlo si tienes algo mal.

Tutorial como dibujar a Bob Esponja con CSS3

Recursos a utilizar:

http://css3generator.com/

Seguramente ya tengas una idea de que se necesita para dibujar con CSS, pero sino, no te preocupes que este tutorial es para eso, para explicarte. Lo primero que tienes que tener en cuenta es que aunque usamos CSS si que necesitamos HTML, como es obvio, asi que vamos a crear una estructura html a la que mas delante le daremos estilo. Esta estructura html son los elementos de nuestro dibujo, por ejemplo para hacer a bob esponja yo he descompuesto el dibujo en 6 partes principales:

• Ojos
• Nariz
• Boca
• Camisa
• Pantalones
• Poros

Dentro de cada una de los elementos principales tenemos mas elementos que conforman todo nuestro dibujo. Por ejemplo, dentro de los ojos, esta cada uno de los ojos y dentro de cada ojo tenemos la parte interna y externa del ojo. Y asi con cada uno de los elementos.

La estructura html de todo nuestro personaje quedaría de la siguiente manera:

Estructura HTML de Bob Esponja:

<div class="body">
		<div class="ojos">
			<div class="ojo">
				<div class="pestanas">
					<div class="pestana primera"></div>
					<div class="pestana segunda"></div>
					<div class="pestana tercera"></div>
				</div>
				<div class="ojo_externo">
					<div class="ojo_interno"></div>
				</div>
			</div>
			<div class="ojo">
				<div class="pestanas">
					<div class="pestana primera"></div>
					<div class="pestana segunda"></div>
					<div class="pestana tercera"></div>
				</div>
				<div class="ojo_externo">
					<div class="ojo_interno"></div>
				</div>
			</div>
		</div>

		<div class="nariz"></div>

		<div class="boca">
			<div class="mejilla primera"></div>
			<div class="dientes">
				<div class="diente"></div>
				<div class="diente"></div>
			</div>
			<div class="mejilla segunda"></div>
		</div>

		<div class="poro primero"></div>
		<div class="poro segundo"></div>
		<div class="poro tercero"></div>
		<div class="poro cuarto"></div>
		<div class="poro quinto"></div>

		<div class="camisa">
			<div class="cuello primero"></div>
			<div class="corbata">
				<div class="cuello_corbata"></div>
			</div>
			<div class="cuello segundo"></div>
		</div>
			<div class="cola_corbata"></div>
		<div class="pantalones">
			<div class="cinturon primero"></div>
			<div class="cinturon segundo"></div>
			<div class="cinturon tercero"></div>
			<div class="cinturon cuarto"></div>
		</div>
	</div>

Vamos a comenzar los estilos CSS iniciando con el cuerpo de Bob Esponja:

.body {
	background:#F5EE31;
	width: 300px;
	height:400px;
	border:5px solid #000;
	position: relative;
	margin:50px auto;
	overflow:hidden;
}

Estilos CSS para los ojos:

/*----- ----- ----- OJOS ----- ----- -----*/
.ojos {
	position: absolute;
	left:40px;
	top:40px;
	width:210px;
	z-index:10;
}

.ojo {
	background:#fff;
	position: relative;
	border:5px solid #000;
	width:100px;
	height:100px;
	margin-right:-17px;
	border-radius:50%;
	display: inline-block;
}

.ojo_externo {
	width: 50px;
	height:50px;
	border-radius:50%;
	position:absolute;
	top:20px;
	left:25px;
	background:#00AEEF;
	border:3px solid #000;
}

.ojo_interno {
	width:30px;
	height:30px;
	background:#000;
	border-radius:50%;
	position:relative;
	top:10px;
	left:10px;
}

.pestanas {
	position:relative;
	bottom:28px;
	left:12px;
}

.pestana {
	width:15px;
	height:5px;
	background:#000;
	transform:rotate(90deg);
	-moz-transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
	-o-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	margin-right:10px;
	display:inline-block;
}

.pestana.primera {
	position:relative;
	top:10px;
	transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
}

.pestana.tercera {
	position:relative;
	top:10px;
	transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
}

 Código CSS de la nariz:

/*----- ----- ----- NARIZ ----- ----- -----*/
.nariz {
	width:20px;
	height:40px;
	background:#F5EE31;
	position: absolute;
	top:110px;
	left:130px;
	border:5px solid #000;
	border-bottom:5px solid transparent;
	border-radius:42.5%;
	z-index:10;
}

Código CSS para los elementos de la boca:

/*----- ----- ----- BOCA ----- ----- -----*/
.boca {
	width:200px;
	height:80px;
	background:transparent;
	position:absolute;
	top:120px;
	left:50px;
	border-radius:50%;
	border-bottom:5px solid #000;
	z-index:10;
}
.dientes {
	position:relative;
	top:80px;
	left:65px;

}
.diente {
	width:20px;
	height:20px;
	background:#fff;
	border:5px solid #000;
	display: inline-block;
}

.mejilla {
	width:30px;
	height:20px;
	background:transparent;
	position:absolute;
	top:30px;
	border:3px solid #F1592A;
	border-bottom:5px transparent;
	border-radius:50% 50% 20% 20%;
}

.mejilla.primera {
	left:-15px;
}

.mejilla.segunda {
	left:175px;
}

Código CSS para la Camisa y corbata:

/*----- ----- ----- CAMISA ----- ----- -----*/
.camisa {
	width:100%;
	height:50px;
	background:#fff;
	position: absolute;
	bottom:50px;
	border-top:5px solid #000;
	z-index:10;
	overflow:hidden;
}

.cuello {
	width:50px;
	height:30px;
	position: absolute;
	background:#fff;
	top:-25px;
	border:5px solid #000;
	-moz-transform: rotate(30deg);
	-webkit-transform: rotate(30deg);
	-o-transform: rotate(30deg);
	-ms-transform: rotate(30deg);
	transform: rotate(30deg);
}

.cuello.primero {
	left:60px;
}

.cuello.segundo {
	left:180px;
	-moz-transform: rotate(-30deg);
	-webkit-transform: rotate(-30deg);
	-o-transform: rotate(-30deg);
	-ms-transform: rotate(-30deg);
	transform: rotate(-30deg);
}

.corbata {
}

.cuello_corbata {
	width:40px;
	height:40px;
	background:#F00200;
	border:5px solid #000;
	position:absolute;
	left:130px;
	bottom:30px;
	z-index:50;
	-moz-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}

.cola_corbata {
	width:55px;
	height:55px;
	background:#F00200;
	border:5px solid #000;
	position:absolute;
	left:123px;
	bottom:0px;
	z-index:50;
	-moz-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}

Código CSS para la parte de los pantalones:

/*----- ----- ----- PANTALONES ----- ----- -----*/
.pantalones {
	width:100%;
	height:50px;
	background:#6A3D13;
	position: absolute;
	bottom:0%;
	border-top:5px solid #000; 
	z-index:10;
}

.cinturon {
	width:40px;
	height:15px;
	position:absolute;
	top:20px;
	background:#000;
}

.cinturon.primero {
	left:20px;
}

.cinturon.segundo {
	left:90px;
}

.cinturon.tercero {
	right:80px;
}

.cinturon.cuarto {
	right:20px;
}

 Ya por ultimo finalizamos con los poros:

/*----- ----- ----- POROS ----- ----- -----*/
.poro {
	background:#C0A402;
	height:40px;
	width:40px;
	position:absolute;
	border-radius:50%;
	z-index:1;
}

.poro.primero {
	top:230px;
	left:20px;
	height:50px;
	width:50px;
}

.poro.segundo {
	top:200px;
	left:280px;
}

.poro.tercero {
	top:50px;
	left:260px;
	height:15px;
	width:15px;
}

.poro.cuarto {
	top:300px;
	height:30px;
	width:30px;
	left:50px;
}

.poro.quinto {
	top:250px;
	left:200px;
}

.poro.sexto {
	top:;
	left:;
}

.poro.septimo {
	top:;
	left:;
}

.poro.octavo {
	top:;
	left:;
}