Una de las preguntas más frecuentes en el ambiente de los desarrolladores es: “¿Cómo puedo mejorar en CSS?” esta cuestión se popularizó con ilustraciones publicadas CSS basadas y diseñadas con CodePen, por lo que presentamos algunas recomendaciones para ilustraciones CSS complejas.
Para muchos, CSS es una bestia que viene de alguna mitología y que no puede ser domesticada. Sin embargo, ¿qué pasaría si supieras que con algunos atributos y técnicas se puede obtener lo que quisieras?, la verdad es que realmente estás tan cerca.
Este tópico es un tema difícil de abordar porque hay muchas posibilidades y diversas técnicas para lograr lo mismo. Pasa lo mismo con las ilustraciones CSS. No hay una forma correcta o incorrecta de hacerlo. Todos usamos el mismo lienzo y hay muchas herramientas para obtener esos píxeles en la página.
Si bien no existe una fórmula única para la ilustración CSS, se puede plantear una serie de técnicas que pueden ayudar en este viaje.
Tiempo y práctica
La ilustración CSS requiere de mucho tiempo y práctica. Cuanta más precisión desees y más complicada sea la ilustración, más tiempo llevará. Lo que generalmente consume mucho tiempo no es decidir qué propiedades usar y cómo, sino los retoques de hacer que las cosas se vean bien. Sugerimos que te vayas familiarizando con Styles Inspector en las herramientas de desarrollo de tu navegador! También se recomendaría probar VisBug
Dos artistas de CSS han sobresalido últimamente: Ben Evans y Diana Smith. Ambos han hablado recientemente sobre el tiempo que se gasta en una ilustración CSS.
En el caso de Smith por ejemplo, con esta imagen se tardó dos largos fines de semana en completarse. Ella habla sobre algunas de sus técnicas: “Si tienes el tiempo, la paciencia y el impulso, ciertamente será posible”, destaca.
El rastreo es entendible y aceptable
A menudo tenemos una idea de cómo queremos ilustrar una web y aunque este texto no trata sobre diseño, se trata de tomar una imagen y renderizarla con DOM y CSS. Es casi seguro que esta técnica ha existido desde el principio de los tiempos, pero es algo que ha sido utilizado en los últimos meses.
- Selecciona una imagen para ilustrar.
- Integrarlo en tu HTML con la etiqueta <img>.
- Colócalo a manera que quede debajo de tu ilustración.
- Reduce la opacidad de la imagen para que sea visible sin ser demasiado abrumadora.
- Rastrearlo con el DOM.
Para la sorpresa de muchos, esta técnica no es común. Pero es relevante a la hora de crear ilustraciones CSS precisas.
Pon atención a la capacidad de respuesta
Hay dos técnicas principales en este artículo, el “Rastreo” y el que se describirá a continuación:
Hay ejemplos fantásticos de ilustración CSS por la web. Pero lo desafortunado de algunos, es que no están diseñados para las pantallas pequeñas. Por lo que primeramente hay que considerar que vivimos en una época en la que las primeras impresiones con la tecnología son importantes.
Considera el ejemplo de un panel ilustrado con CSS. Alguien encuentra tu trabajo, lo abre en su móvil y sólo abre la mitad de la ilustración o una pequeña sección. ¡Probablemente se perdieron las partes más geniales de la demo!
Aquí está el truco: aprovechar las unidades de la vista para las ilustraciones y crear tu propia unidad a escala.
Para dimensionar y posicionar, puedes usar la opción de una unidad escalada o un porcentaje. Esto es particularmente útil cuando necesitas usar una sombra de cuadro porque la propiedad acepta unidades de ventana gráfica pero no porcentajes.
Usa el posicionamiento absoluto en las cosas
Esto te ahorrará algunas pulsaciones de teclas. La mayoría de las veces, buscará posicionar los elementos. Considera esto y pon esta regla en alguna parte.
/* Your class name may vary */
.css-illustration *,
.css-illustration *:after,
.css-illustration *:before,
.css-illustration:after,
.css-illustration:before {
box-sizing: border-box;
position: absolute;
}
¡Tu teclado te lo agradecerá!
O puedes jugar con este patio de posicionamiento:
Apégate a un enfoque
Esto es, con mucho, lo más difícil de hacer. ¿Cómo abordar una ilustración CSS? ¿Por dónde empiezas?, ¿Deberías comenzar con la parte más externa y avanzar? Esto no funciona tan bien.
Lo más probable es que intentes algunos enfoques y encuentres una mejor manera de hacerlo. Sin duda, será un proceso más simplificado, pero, cuanto más practique, mejor podrás detectar patrones y desarrollar un enfoque que se adecue a tu trabajo.
Es común conocer el enfoque sobre cómo crearía una imagen vectorial donde las ilustraciones están formadas por capas, lo usual es dividirlo y dibujarlo en papel si es necesario. Pero, te recomendamos comenzar desde abajo y continuar hacia arriba. Esto tiende a abarcar formas más grandes y detalles más finos para después. Siempre puedes jugar con el índice de apilamiento cuando se necesita mover elementos.
