Como dibujar a Bob Esponja con CSS3

Aprende como realizar el dibujo de Bob Esponja con solo CSS3.
🚀 Blog de diseño web:
www.falconmast...
⭐ Curso de Diseño Web desde Cero:
www.desarrollo...
⭐ Curso de PHP y MYSQL desde Cero:
www.desarrollo...
⭐ Curso de React y Firebase desde Cero:
www.desarrollo...
⭐ Curso de Bootstrap:
www.desarrollo...
⭐ Curso de Woocommerce:
www.desarrollo...
---
♦ Tutorial escrito, recursos y códigos;
www.falconmaste...
---
Redes Sociales:
♦ Twitter @falconmasters:
/ falconmasters
♦ Pagina de Facebook:
www.falconmaste...
♦ Curso patrocinado por okhosting:
www.okhosting.com

[@EDteam]

Muy bueno el video, pero algunas observaciones: 1. No es necesario poner border-bottom: 3px solid transparent, basta con border-bottom: none; 2. z-index: 15px no existe, es z-index: 15; 3. Si pones un guion antes de transform (así: -transform) y pulsas tab emmet te genera automáticamente todos los prefijos propietarios para que no tengas que ir al css3 generator. Que paciencia para hacer el dibujo. Felicitaciones.

[@FalconMasters]

Gracias, si que tienes razón, se me ha ido la olla en el video, y lo de -transform no lo sabia. Saludos

[@MaxUnch]

Gracia spor compartir eso! NOs viene bien! :D

[@elchente859]

Edteam y pensar que han crecido de forma extraordinaria ustedes dos!.

[@dark-er]

MIRA DONDE TE ENCUENTRO ALVARO

[@rapeandoraps3044]

@@dark-er Jaja,pues bueno mira aquí me tienes ya tío ehh mi bro Gonzalo,vaya tela ehh,mi brotherick jaja.

[@FalconMasters]

Muchas gracias a todos por ver el tutorial, seria genial que comentaran quien finalizo el tutorial y cual fue resultado. :D

[@ronaldfdmusik]

Recién lo acabo de terminar y me sirvió de mucho. Gracias FalconMasters SIGUE ASÍ. Realizare muchos mas dibujos para practicar.

[@joksansuriel6059]

Muchas gracias a ti por crear esta clase de super contenido :D Me guardaré el link para intentar hacerlo, será una buena experiencia c:

[@hellenmerchan8389]

Bueno ah pasado mucho tiempo, pero hasta hace unos meses vi el vídeo y ya termine de realizarlo con unos cambios y lo subi a Git Hub *-*

[@ImDash]

Vengo desde el curso de Udemy y la verdad es que eres lo mejor de esta tierra amigooooo. De verdad me has ayudado mucho y por cierto. Que bien manejas el css que hasta ya puedes hacer lo que se te de la gana. Sigue asi bro, super buen contenido.

[@FalconMasters]

Gracias!

[@zlCybermanlz]

Nunca había visto tanta creatividad en un solo video, muchas gracias por el tutorial, mucha información valiosa, voy por la mitad del video, pero no me aguanto las ganas de agradecerte ! Like!

[@FalconMasters]

Genial, la verdad esque tengo que darte yo a ti las gracias por ver mi contenido y apreciarlo, ya vas por la mitad, eso es genial! espero que lo termines, mucha suerte.

[@vangeluz777]

Jajajaja que tremendo como dominas el CSS a tal punto de hacer lo que quieras !!! Excelente trabajo !!!! sigue asi !!

[@FalconMasters]

Vangeluz Pechera Muchas gracias

[@MaxUnch]

Muy ingenioso, destaclable en un diseñador y desarrollador web, te felicito porque eres un experto. Me encantaría que hicieras uno pero con CANVAS, si es que puedes y tienes tiempo, gracias de nuevo! Espero que sigas creciendo, gracias por tus tutoriales, espero llegues a ser grande! Saludos!!

[@jeronimocordero2786]

Te felicito FalconMasters realmente este y todos tus tutoriales y cursos son geniales. Siempre miro tu página y pronto intentaré hacer mi propio dibujo. Sigue con el buen trabajo y aqui estaremos aguardando por más!

[@sergiocastromartin9678]

Me gusto el tutorial y me atreví hacerlo incluso le puse color a las solapas de la camiseta. Muy divertido

[@JorgeRodriguez-rs6bh]

Gracias por compartir estos conocimientos tan valiosos , ya lo termine , me costo no me salian los pantalones , haber si logro hacerle manos y pies ejejej de nuevo mil gracias y toma tu like :P.

[@gianfrancogerman8889]

Luego de ver el tema de posicionamiento de cajas, este tutorial me hizo entender mas de las posiciones relativas y absolutas(Y)

[@Gonza2432]

Muy bueno! Ya me voy a ver tus tutos.. Saludos desde Argentina!

[@FalconMasters]

Genial! muchas gracias!

[@adrianbanuelas8786]

Estoy viendo tu curso desde udemy, tengo cierto problemas con el posicionamiento las cajas, me has ayudado mucho.

[@edwinloaiza1017]

excelente aprendizaje con este video gracias arturo.

[@BakiMasters]

En verdad eres grande falcon me as ayudado mucho, Gracias por estos grandiosos Tutoriales te felicito y sigue adelante → ise el dibujo entero

[@MegaBraiann]

+Baki Master como haces para tener el mismo logo de Falcon masters?

[@BakiMasters]

Lo copie de un video de el

[@ricardoontiveros4264]

Muy buena practica, yo compre el curso en udemy y lo recomiendo bastante, gracias por el aporte

[@CPC-Cesar-Berrospi]

increible no sabia que se podia dibujar con css3, saludos desde Peru, buen tuto

[@m4estudio]

Vengo desde tu curso de udemy solo a ver al bob esponga... ¡Te quedo increíble!

[@FalconMasters]

Hey muchas gracias! Es algo sencillo, pero me alegra que te gustara.

[@mariomegulearn5272]

2022 practicando, muy buen tutorial!!!

[@ArtbyKhater]

Brilliant , i didn't understand most of the words though :D

[@LilianeFerreee]

Me encantó, justamente me dejaron de tarea hacer un Bob Esponja, y tuve que hacer unas pequeñas modificaciones para que me quedara bien en CSS, HTML y en el software Visual Studio XD, pero estoy satisfecha con los resultados, excelente tuto

[@FalconMasters]

¿Te dejaron hacer de tarea un bob esponja en HTML y CSS?

[@LilianeFerreee]

@@FalconMasters Siiii, suena raro, pero siiii, solo que el Bob esponja que tenía que hacer era diferente jejeje

[@FalconMasters]

@@LilianeFerreee Que raro pero genial que te haya servido!

[@LilianeFerreee]

@@FalconMasters :D 🤙🏻👌🏻

[@hanniacamacho5857]

Supe de este video por tu excelente curso de Diseño Web en udemy, gracias por compartir tus conocimientos!! excelente trabajo!

[@FalconMasters]

Muchas gracias a ti por ver mis videos!

[@JamelSeyek]

Excelente! me gustó el truco para hacer la nariz :D

[@RichardGuzmanBrito]

Muy bueno para practicar el CSS!!

[@PXNDX880]

Muy buen video, aunque nos podríamos ahorrar mucho código si usamos flexbox. Ejemplo: .pantalones{ width: 100%; height: 50px; background-color: #6a3d13; position: absolute; bottom: 0; border-top: 5px solid #000; z-index: 10; display: flex; justify-content: space-around; align-items: center; } .cinturon{ width: 40px; height: 15px; top: 20px; background-color: #000; } Y con eso además de que estarán distribuidas perfectamente, nos ahorramos clases como .primero en .cinturón y posicionarlos uno por uno.

[@FrankGP.com.]

increible!!! gracias por el tutorial!!!

[@tvexpressmexico]

Interesante y entretenido video siempre hay cosas q hay q aprender Saludos

[@BrianMarriaga]

Demasiado bueno, la parte de la nariz fue la mejor!! Un saludo!!!

[@FalconMasters]

Genial! me alegra que te haya gustado. saludos!

[@edgargiobanny]

Excelente amigo muy bueno la verdad me gusto mucho saludos

[@FalconMasters]

Genial! me alegra bastante que te haya gustado :D

[@josecontreras548]

amigo muy bueno el tutorial, me agrade decir que complete el tutorial y me quedo genial el amigo Bob te felicito amigo por la buena disposición al realizar el tutorial saludos cordiales : )

[@FalconMasters]

Increible! felicidades por completar todo el tutorial, que la verdad es que si es bastante largo, muchas gracias a tu por seguir el tutorial y finalizarlo. Saludos!

[@AngelAvila-qw2lx]

sos un CRaCk!!! muy buen Video!!!

[@juang7405]

Excelente video. Gracias!!

[@Romel174]

Amigos muchas gracias tus vídeos son excelentes me han a ayudado mucho.

[@FalconMasters]

Genial, muchas gracias a ti por ver el video. Seria increible si pudieras compartir el video en facebook twitter, te lo agradecería mucho. saludos

[@IBMboy]

ojo interno : pupila ojo externo: iris

[@FalconMasters]

Que bueno que no soy doctor, ya habría matado a alguien haha

[@socorristamadrid6468]

Eres lo mas! Lo tengo!

[@dantemercurial1957]

Eres un genio, like!

[@CurieDiene]

Me acabas de salvar la tarea! Gracias!

[@luismolinavasquez415]

Felicidades por el vídeo te quedó genial

[@planetahiit3074]

Minuto 29: 01. Eso se llama Lapsus!!! O lapsus cálami.

[@JavierRodriguez-xz5og]

TE AMO GRACIAS...

[@quimeinc]

Hola, saludos. Excelente tu tutorial. Gracias por compartirlo. He hecho todo según las instrucciones. Lo único que no me va cuadrando es la nariz, pues me ha tocado acomodar sus valores en la posición top y left para que coincidan con el dibujo y no queden fuera; pero igual se desacomoda cuando cambio el tamaño a la pantalla del navegador. ¿Hay alguna forma de solucionarlo por CSS? Gracias de nuevo.

[@zoeastronomy]

Buenisimoo!!!

[@13060manuel]

Exelente video pero tengo una curiosidad se podria dibujar algo mas complejo como por ejemplo dragomball o las imagenes MMORPG bueno suerte

[@FalconMasters]

Si que se puede, pero seria algo quiza 50 veces mas complejo que este dibujo.

[@MaxUnch]

Por eso el dijo que usaba figuras geométricas simples, te aconcejo comenzar con homero simpson, como idea te lo digo. Saludos!!!

[@omarocampo7662]

Falcon EXPLICAME el snippet que haces para pasar el nombre que escribes, a la class dentro del div. Porfavor, necesito saber como se manejan las variables dentro del snippet

[@asf4]

Gracias buena practica

Jejeje. Mi siguiente reto. Jojojo, Carlos, ¿no tienes límites ehh? Jajaja. Increíble dibujar a bob esponja con Html5 y CSS3, Que crack! 😂😂😂

[@katycazares8069]

Chido! Gracias

[@JoseRobertoAguirrePortillo]

Mira hago todo lo que haces en el vídeo pero al momento de visualizarlo en el navegador no se ve.

[@haditahhh30]

Jajajja buenisimo!!! :D

[@FalconMasters]

Muchas gracias! me alegra que haya gustado.

[@yilmerumbo3178]

muy buen video, como hisiste en el 3:26 ?

[@marioorochena3066]

¡AHÍ ESTÁ!

[@GuíaTechAI]

hola me gusto tu video y como haria un perrito qe mueva la cola y la cabeza con html y css

[@CarlosGomes-mu3rc]

¿Dibujar en css es mas liviano que cargarle imagenes a la pagina? Es decir, ¿el mismo Bob Esponja en jpg es mas o menos liviano que el codigo en css? ¿Sabes de algun programa que permita dibujar iconos y que lo convierta a codigo css? De antemano gracias.

[@steelspikes]

Creo Adobe Illustrator CC tiene una opción así, necesitas checarlo

[@Rymlaptopc]

me gusto haz a batman

[@hydraxz6822]

Ayudaa no me salen los pantalones y hice todo lo que está en el vídeo : (((((

[@mariarubiano2556]

muy bueno sera que no tendras algun curso de diseño de slider reponsive desinge

[@FalconMasters]

No, pero pronto el tutorial :D

[@mariarubiano2556]

FalconMasters lo estare esperando gracias ;)

[@ricardorugama5837]

Me gustaria dibujar un Transformer.

[@daliajazminvictorianogarci894]

y para hacer manos es que se me complica :(

[@johanna_fajardo__]

al final no me sale ni dos rayitas del cinturón ni la cola de la corbata :(

[@FalconMasters]

Revisa que tengas todo tu código correctamente escrito, si tienes algo mal no se va a ejecutar correctamente.

[@aa_9610]

Solo me aparece un ojo :/

[@samueleliseoprieto6357]

Hola me gustaría como dibujar a mickey mouse

[@CPC-Cesar-Berrospi]

como haces para pones las etiquetas con el (.) y te salga todo el texto escrito, yo lo escribo pero no me sale nada jajajaj gracias

[@FalconMasters]

Tengo un plugin para sublime text, aquí tengo un tutorial de como usarlo e instalarlo. www.falconmasters.com/recursos-herramientas/como-escribir-mas-rapido-codigo-html-y-css-emmet/

[@CPC-Cesar-Berrospi]

listo lo hare, muchas gracias !!!

[@NiixonJavier]

Like si vienes de Udemy

[@VanHelsing2021]

dure 3 horas y media.