TekCrispyTekCrispy
  • Ciencia
    • Historia
    • Perfiles
  • Tecnología
    • Software
    • Móviles
    • Herramientas Web
    • Redes Sociales
  • Cultura Digital
    • Cine y TV
    • Videojuegos
  • Análisis
Selección del Editor

Presión arterial alta influye negativamente en la recuperación de pacientes con ACV

Jul 1, 2022

¿Qué beneficios para la piel tienen los antioxidantes que no tengan otros productos similares?

Jul 1, 2022

Los pulpos comparten algunos genes cerebrales humanos, ¿acaso ese es el verdadero secreto de su inteligencia?

Jul 1, 2022

Bancos de heces: la nueva propuesta para restaurar nuestra flora intestinal

Jul 1, 2022
Facebook Twitter Instagram TikTok Telegrama
TekCrispyTekCrispy
  • Ciencia

    Presión arterial alta influye negativamente en la recuperación de pacientes con ACV

    Jul 1, 2022

    ¿Qué beneficios para la piel tienen los antioxidantes que no tengan otros productos similares?

    Jul 1, 2022

    Los pulpos comparten algunos genes cerebrales humanos, ¿acaso ese es el verdadero secreto de su inteligencia?

    Jul 1, 2022

    Bancos de heces: la nueva propuesta para restaurar nuestra flora intestinal

    Jul 1, 2022

    ¿Existe una habilidad para reconocer objetos? Estos científicos dicen que sí y la nombraron ‘O’

    Jul 1, 2022
  • Tecnología

    ¿Por qué todavía no tenemos teléfonos a prueba de agua?

    Jun 30, 2022

    Samsung ha superado a TSMC en la producción de chips de 3nm

    Jun 30, 2022

    Ahora podrás reaccionar con cualquier emoji en WhatsApp

    Jun 30, 2022

    Atlas VPN confirma que las apps de seguimiento del embarazo y el período violan la privacidad de las mujeres

    Jun 30, 2022

    ¿Cuál canción te salvará de Vecna? Spotify te muestra tu canción favorita en su nueva playlist del Upside Down

    Jun 30, 2022
  • Cultura Digital

    Lotte Reiniger: la pionera en cine de animación que soñaba con siluetas

    Jun 25, 2022

    Netflix y TikTok apuestan por el mundo de los videojuegos

    Jun 24, 2022

    NZXT se extiende a España, Nueva Zelanda y Reino Unido: ¿Qué trae esto para el Gaming?

    Jun 21, 2022

    PlayStation Store en México: qué es, cómo funciona y qué juegos comprar

    Jun 7, 2022

    ¿Cuáles son los eventos de eSports más esperados del año?

    May 31, 2022
Facebook Twitter Instagram TikTok
TekCrispyTekCrispy
Internet

Pure CSS Francine, la increíble obra de arte hecha en código puro

Por Rosselyn BarroyetaMay 15, 20194 minutos de lectura
Compartir
Facebook Twitter Email Telegrama WhatsApp

Aunque muchos consideren que el alcance de estas herramientas de desarrollo web CSS y HTML puedan ser limitadas, existen personas como Diana Smith que sobrepasan los límites de la imaginación para crear arte del siglo XIX utilizando solo código puro.

“Pure CSS Francine”, es el increíble proyecto de Diana Smith donde ilustra obras de arte del siglo XIX usando código HTML y CSS puro, y aunque muchos alegarán en este momento que la diseñadora pudo apostar por SVG (Vectores optimizados para CSS), Smith aclara en su GitHub que estos quedaron destacartados desde hace un tiempo.

CSS puro Francine: Una serie en curso en la que creo arte usando solo CSS y HTML.

Nota: en un momento estaba usando uno o dos elementos SVG, pero finalmente me cansé de ellos y desde entonces se han eliminado, por lo que esta regla ya no se aplica. Sin ofender a SVG.

Las páginas web están compuestas de una parte código en HTML (HyperText Markup language) que es el responsable de que todo lo que ves, luzca de forma estructurada y ordenada. Pero también, cuenta con otra parte compuesta del código CSS (Cascading style sheets, por sus siglas en inglés), se trata de una hoja de estilos que, como su nombre implica, se encarga de proporcionar los estilos a los elementos que componen la web, desde el color del texto, tamaño de imagen, tamaño de las secciones que conforman el sitio web, bordes, sombras y más, con el fin de darle una estética visualmente atractiva al visitante.

Francine, la obra de arte creada con código puro

La impresionante pintura al óleo de Smith está causando revuelo en las redes sociales, principalmente en el entorno de desarrolladores web, pues nadie se puede imaginar que esta ilustración del siglo XIX esté construida a mano prácticamente usando código HTML y CSS puro, sin trucos. Demostrando una vez más lo poderoso que puede ser el dominio de CSS para cualquier desarrollador web.

Tengo que escribir cada elemento primero, y luego escribir una regla de estilo para cada uno de esos elementos, no es tan fácil ni rápido como cargar la pintura en el pincel.

Debido a que la diseñadora utilizó las herramientas Chrome Developer Tools y ‘pintó’ usando el navegador Chrome como determinado, el resultado no será el mismo en otros navegadores, que como algunos saben cuentan con sus intérpretes de CSS diferentes.

Debido a la naturaleza artística de este proyecto, no me he preocupado por la compatibilidad entre navegadores, por lo que la vista previa en vivo probablemente se verá ridícula en cualquier otra cosa que no sea Chrome.

El código incrustado en la siguiente imagen permite que esta ilustración luzca diferente en otros navegadores, pero si estás usando Chrome posiblemente obtengas la visión de Smith.

Smith dice que este proyecto surgió por simple creatividad, solo por arte, y afirma que: “Estos navegadores que fueron creados en el pasado, no anticiparon que la gente estaría haciendo arte CSS; era solo el Internet donde vive la información y todo lo que necesita es un rectángulo y quizás algo de color” y continuó: “Cuando miras esta imagen en diferentes navegadores, estás mirando la historia de Internet y lo que se exigía en ese momento”.

Sin duda el trabajo que hace Smith va mucho más allá de simple diversión, pues este trabajo implica extensas horas de dedicación, kilos de paciencia y arte, ya que cada elemento, cada mínimo detalle requiere de miles de líneas de código y reglas css, además de diferentes pruebas hasta llegar al resultado esperado y aunque existen actualmente infinidades de herramientas que pueden facilitar la ilustración de imágenes, esta diseñadora prefirió la más larga de todas.

“Mucha gente te lo dirá, si estás tratando de aprender programación, encuentra una API gratuita y crea un proyecto a partir de ella“, continuó. “Debería ser lo mismo con CSS, porque en ese momento no estás haciendo nada por un empleador, solo estás jugando con el código, divirtiéndote con el proceso e intentando desafiarte a ti mismo. Y esta es una manera de hacer eso”.

Así que de ahora en adelante tendremos que pensarlo dos veces antes de acudir al diseñador para que haga esa imagen de 16×16, porque Smith ha demostrado que con un conocimiento amplio CSS y toneladas de paciencia, nada es imposible en el mundo del desarrollo web.

Arte codigo CSS HTML navegador Pure CSS Francine

Artículos Relacionados

Así es como el arte puede ayudar a los pacientes con cáncer a superar su ansiedad

¿Quieres aprender sobre tecnología? Aquí te recomendamos los mejores cursos de informática

3 críticas que Microsoft Edge debe enfrentar de cara al 2022

Añadir un comentario

Dejar una respuesta Cancelar respuesta

Selección del Editor

¿Por qué las personas hacen ghosting en las redes sociales?

Jun 20, 2022

Los caballos y los cerdos pueden distinguir si eres positivo o pesimista por el sonido de tu voz

Jun 17, 2022

¿La leche realmente es buena para los dientes?

Jun 17, 2022

¿No usas zapatos deportivos para caminar? Te explicamos por qué deberías

Jun 17, 2022
Síguenos en las redes
  • Facebook
  • Twitter
  • Instagram
  • TikTok
Facebook Twitter Instagram LinkedIn TikTok
  • Publicidad
  • Contacto
  • Política de Privacidad
  • Acerca de TekCrispy
© 2022 CRISPYMEDIA LLC. DERECHOS RESERVADOS.

Escriba arriba y pulse Enter para buscar. Pulse Esc para cancelar.