Aprende como dibujar a Bob Esponja con solo CSS. Tutorial para aprender a dibujar con CSS3.

Share on Pinterest
Comparte con tus amigos










Enviar

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: http://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:

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

Estilos CSS para los ojos:

 Código CSS de la nariz:

Código CSS para los elementos de la boca:

Código CSS para la Camisa y corbata:

Código CSS para la parte de los pantalones:

 Ya por ultimo finalizamos con los poros:

 

Share on Pinterest
Comparte con tus amigos










Enviar

FalconMasters Carlos Arturo

  • Hola, lo he hecho con Canvas y JavaScript. El código lo puedes descargar desde https://www.mediafire.com/?xgdxb6vfpcva40z
    Puedes hacer con el código lo que quieras ;-)
    Gracias

    • Esta genial, si lo pudieras poner en CodePen lo puedo compartir por aquí, saludos :D

      • Acabo de crear cuenta en Code Pen, mira a ver si el enlace es correcto http://codepen.io/silla/public/

      • Nelson Diaz

        Hola , vi tu video y me llamo la atencion , yo hice un minion usando html y css como lo explicas en el video , gracias por tus videos he aprendido mucho viendo tus videos , Saludos!!

        • Wow, muy buena creatividad, felicidades!
          Te quedo genial!

  • Pingback: Dibujando Bob Esponja Con HTML 5 Y Canvas | Linux Music 3.0()

  • leito

    hola soy leo tengo 11 años y sigo tus vídeos. Te admiro mucho, me gusta como das los cursos y a mi parecer me agrada mas que código facilito y que platzi. pienso hacer este bob esponja y le quiero implementar movimiento de ojos y sonido. cuando acabe si quieres te paso el código. muchas gracias por estos vídeos y espero que me contestes pronto. adios

  • David Perez

    Estuvo genial bob esponja espero hacer un personaje muy pronto.. son buenos tus videos FM, me gusta tu experiencia en modo de redactar tus códigos…!! Que Dios te bendiga mucho …Saludos desde Tabasco ;)

  • LuisFFer Jiménez

    Está genial! gracias por tan buenos tutoriales, saludos


Aprende con nuestros cursos

Escribe CSS como un PRO, Curso Básico de SASS

Escribe CSS como un PRO, Curso Básico de SASS

Optimiza, Organiza y escribe tu código CSS como un profesional con SASS.

Inicia el curso
Curso básico de WordPress desde 0

Curso básico de WordPress desde 0

Aprende a utilizar Wordpress desde 0 y crea sitios web, blogs, galerías e incluso tiendas online.

Inicia el curso
Curso cómo hacer un Sitio Web básico con Bootstrap

Curso cómo hacer un Sitio Web básico con Bootstrap

Aprende como hacer un sitio web básico utilizando lo mejor de Bootstrap

Inicia el curso
Curso completo de Bootstrap desde 0

Curso completo de Bootstrap desde 0

Curso básico de Bootstrap, Aprende a crear sitios web adaptables a dispositivos móviles con este poderoso framework.

Inicia el curso