Primer intento Dibujando con CSS - Mario's Mushroom PowerUp
Tags: codepen, css
Published: 2021-08-13 06:48:26

Es mi primera vez intentando dibujar con CSS, la verdad me sorprendí con el resultado. Siempre que veía a los desarrolladores que publicaban sus dibujos hechos con HTML y CSS me decía a mi mismo "Woow, espero algún día poder hacer dibujos así de buenos con CSS" y pues hoy me animé.

Todo comenzó al estar revisando mis suscripciones en YouTube, encontré un video donde @midudev estaba desarrollado un componente o app llamado <a href="https://codi.link" target="_blank">codi.link</a> que más que nada es para picar código de manera rápida (y si que es rápido) en fin, mientras la utilizaba se me ocurrió hacer este dibujo del honguito de Mario por curioso y cuando vi el resultado quede impactado (<a href="https://codi.link/PGgyPkNTUyBEcmF3PC9oMj4NCjxwPk1hcmlvIEJyb3RoZXIncyBNdXNocm9vbSBQb3dlciBVcDwvcD4NCjxkaXYgY2xhc3M9Im11c2hyb29tIj4NCiAgICA8ZGl2IGNsYXNzPSJtdXNocm9vbS10b3AiPg0KICAgICAgICA8ZGl2IGNsYXNzPSJtdXNocm9vbS10b3AtbWFyayI+PC9kaXY+DQogICAgPC9kaXY+DQogICAgPGRpdiBjbGFzcz0ibXVzaHJvb20tYm90dG9tIj48L2Rpdj4NCjwvZGl2Pg==%7CKnsNCiAgICBtYXJnaW46MDsNCiAgICBib3gtc2l6aW5nOiBib3JkZXItYm94Ow0KfQ0KDQpib2R5ew0KICAgIGRpc3BsYXk6IGZsZXg7DQogICAgZmxleC1mbG93OiBjb2x1bW47DQogICAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7DQogICAgYWxpZ24taXRlbXM6IGNlbnRlcjsNCiAgICB3aWR0aDogMTAwdnc7DQogICAgaGVpZ2h0OiAxMDB2aDsNCiAgICBmb250LWZhbWlseTogSGVsdmV0aWNhLCBzYW5zLXNlcmlmOw0KICAgIGNvbG9yOiAjMWExYTFhOw0KfQ0KDQpwew0KICAgIG1hcmdpbi1ib3R0b206IDIuNXJlbTsNCn0NCg0KLm11c2hyb29tew0KICAgIGRpc3BsYXk6IGJsb2NrOw0KICAgIHBvc2l0aW9uOiByZWxhdGl2ZTsNCiAgICBmaWx0ZXI6IGRyb3Atc2hhZG93KDAgNHB4IDEycHggcmdiYSgwLDAsMCwuMikpOw0KICAgIHdpZHRoOiAxNTBweDsNCiAgICBoZWlnaHQ6IDE1MHB4Ow0KICB0cmFuc2Zvcm06IHNjYWxlKC44MCk7DQogIHRyYW5zZm9ybS1vcmlnaW46IGJvdHRvbTsNCiAgdHJhbnNpdGlvbjogdHJhbnNmb3JtIC4ycyBlYXNlLW91dDsNCiAgY3Vyc29yOiBwb2ludGVyOw0KfQ0KDQoubXVzaHJvb206aG92ZXJ7DQogIHRyYW5zZm9ybTogc2NhbGUoLjgzKTsNCn0NCg0KLm11c2hyb29tLnBvd2VyVXB7DQogIHRyYW5zZm9ybTogc2NhbGUoMSk7DQp9DQoNCi5tdXNocm9vbS5wb3dlclVwOmhvdmVyew0KICB0cmFuc2Zvcm06IHNjYWxlKC45Nyk7DQp9DQoNCi5tdXNocm9vbS10b3B7DQogICAgZGlzcGxheTogYmxvY2s7DQogICAgcG9zaXRpb246IHJlbGF0aXZlOw0KICAgIHdpZHRoOiAxMDAlOw0KICAgIGhlaWdodDogOTAlOw0KICAgIGJhY2tncm91bmQtY29sb3I6ICNmNjE5MTk7DQogICAgLyogYmFja2dyb3VuZC1pbWFnZTogbGluZWFyLWdyYWRpZW50KHRvIGJvdHRvbSwgcmVkLCBkYXJrcmVkKTsgKi8NCiAgICBib3gtc2hhZG93OiBpbnNldCAtMTVweCAtMzBweCA2MHB4IHJnYmEoNTQsIDEwLCAxMCwgMC42KTsNCg0KICAgIGJvcmRlci10b3AtcmlnaHQtcmFkaXVzOiA5NSUgMTIwJTsNCiAgICBib3JkZXItdG9wLWxlZnQtcmFkaXVzOiA5NSUgMTIwJTsNCiAgICBib3JkZXItYm90dG9tLXJpZ2h0LXJhZGl1czogNjAlIDgwJTsNCiAgICBib3JkZXItYm90dG9tLWxlZnQtcmFkaXVzOiA2MCUgODAlOw0KDQogICAgb3ZlcmZsb3c6IGhpZGRlbjsNCn0NCg0KLm11c2hyb29tLXRvcC1tYXJrLCAubXVzaHJvb20tdG9wLW1hcms6OmJlZm9yZSwgLm11c2hyb29tLXRvcC1tYXJrOjphZnRlcnsNCiAgICB3aWR0aDogNTUlOw0KICAgIGhlaWdodDogNTclOw0KICAgIGJhY2tncm91bmQtY29sb3I6ICNmM2YyZTQ7DQogICAgYm94LXNoYWRvdzogaW5zZXQgLTVweCAtMTVweCAyMHB4IHJnYmEoMCwwLDAsLjE1KTsNCiAgICB6LWluZGV4OiAxMDsNCiAgICBwb3NpdGlvbjogYWJzb2x1dGU7DQogICAgYm9yZGVyLXJhZGl1czogMTMwcHg7DQogICAgbGVmdDogNTAlOw0KICAgIHRvcDogNTAlOw0KICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlKC01MCUsIC04MCUpOw0KfQ0KDQoubXVzaHJvb20tdG9wLW1hcms6OmJlZm9yZXsNCiAgICBjb250ZW50OiIiOw0KICAgIHdpZHRoOiA2MCU7DQogICAgaGVpZ2h0OiAxMDUlOw0KICAgIHRvcDogMjAlOw0KICAgIGxlZnQ6IC04NSU7DQogICAgdHJhbnNmb3JtOiBub25lOw0KfQ0KDQoubXVzaHJvb20tdG9wLW1hcms6OmFmdGVyew0KICAgIGNvbnRlbnQ6IiI7DQogICAgd2lkdGg6IDYwJTsNCiAgICBoZWlnaHQ6IDEwNSU7DQogICAgdG9wOiAyMCU7DQogICAgbGVmdDogYXV0bzsNCiAgICByaWdodDogLTg1JTsNCiAgICB0cmFuc2Zvcm06IG5vbmU7DQp9DQoNCi5tdXNocm9vbS1ib3R0b217DQogICAgcG9zaXRpb246IHJlbGF0aXZlOw0KICAgIGRpc3BsYXk6IGZsZXg7DQogICAganVzdGlmeS1jb250ZW50OiBzcGFjZS1iZXR3ZWVuOw0KICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7DQogICAgcGFkZGluZy1ib3R0b206OCU7DQogICAgcGFkZGluZy1sZWZ0OiAyMCU7DQogICAgcGFkZGluZy1yaWdodDogMjAlOw0KICAgIGJhY2tncm91bmQtY29sb3I6ICNmMGRlOTU7DQogICAgd2lkdGg6IDY1JTsNCiAgICBoZWlnaHQ6IDM3LjUlOw0KICAgIG1hcmdpbjotMjQlIGF1dG8gMDsNCg0KICAgIGJveC1zaGFkb3c6DQogICAgICAgIGluc2V0IC0yMHB4IC0xNnB4IDZweCByZ2JhKDU4LCA0MywgMTksIDAuMSksDQogICAgICAgIGluc2V0IC0xMHB4IC0xNXB4IDE1cHggcmdiYSg1OCwgNDMsIDE5LC4zNSksDQogICAgICAgIGluc2V0IDAgNXB4IDVweCByZ2JhKDU4LCA0MywgMTksLjIpOw0KDQogICAgYm9yZGVyLXRvcC1yaWdodC1yYWRpdXM6IDYwJSAzNSU7DQogICAgYm9yZGVyLXRvcC1sZWZ0LXJhZGl1czogNjAlIDM1JTsNCiAgICBib3JkZXItYm90dG9tLXJpZ2h0LXJhZGl1czogNDAlIDgwJTsNCiAgICBib3JkZXItYm90dG9tLWxlZnQtcmFkaXVzOiA0MCUgODAlOw0KfQ0KDQoubXVzaHJvb20tYm90dG9tOjpiZWZvcmUsIC5tdXNocm9vbS1ib3R0b206OmFmdGVyew0KICAgIGNvbnRlbnQ6IiI7DQogICAgZGlzcGxheTogYmxvY2s7DQogICAgaGVpZ2h0OiA1MCU7DQogICAgd2lkdGg6IDIxJTsNCiAgICBiYWNrZ3JvdW5kLWNvbG9yOiB3aGl0ZTsNCiAgICBib3gtc2hhZG93Og0KICAgICAgICBpbnNldCAwIC0xOHB4IDVweCByZ2JhKDAsMCwwLCAuOCksDQogICAgICAgIGluc2V0IDAgLTlweCA2cHggcmdiYSgwLDAsMCwuNiksDQogICAgICAgIGluc2V0IDAgMnB4IDRweCByZ2JhKDAsMCwwLC4zNSk7DQogICAgDQogICAgYm9yZGVyLXRvcC1yaWdodC1yYWRpdXM6IDYwJSA0MCU7DQogICAgYm9yZGVyLXRvcC1sZWZ0LXJhZGl1czogNjAlIDQwJTsNCiAgICBib3JkZXItYm90dG9tLXJpZ2h0LXJhZGl1czogNjAlIDQwJTsNCiAgICBib3JkZXItYm90dG9tLWxlZnQtcmFkaXVzOiA2MCUgNDAlOw0KfQ==%7CY29uc3QgbXVzaHJvb20gPSBkb2N1bWVudC5xdWVyeVNlbGVjdG9yKCcubXVzaHJvb20nKQ0KDQptdXNocm9vbS5hZGRFdmVudExpc3RlbmVyKCdjbGljaycsIGUgPT57DQogIG11c2hyb29tLmNsYXNzTGlzdC50b2dnbGUoJ3Bvd2VyVXAnKQ0KfSk=)" target="_blank">resultado en codi.link</a>) pero cómo no pude guardarlo salvo por la posibilidad de compartir el enlace pues me pase a hacerlo en <a href="https://codepen.io/betocabadev" target="_blank">codepen</a> para guardarlo y comenzar a subir en un futuro.

Las reglas serán sencillas, escoger un dibujo e intentar realizarlo con HTML y CSS sin ver tutoriales, de ser necesario documentación para llegar al mejor resultado posible.

Espero les guste, aquí el código:

{% codepen https://codepen.io/betocabadev/pen/poPYdaM %}