Consejos para ilustraciones CSS complejas

1. Tiempo y practica
2. El rastreo es perfectamente aceptable.
3. Presta atención a la capacidad de respuesta.
4. Mida dos veces, corte una vez
5. Utilice el posicionamiento absoluto en todas las cosas.
6. Cíñete a un enfoque
7. Mantén una estructura sólida para tus estilos.
8. Manejando formas incómodas
9. clip-pathes tu amigo
10. border-radiuses tu otro amigo
11. Técnicas de sombreado
12. Los preprocesadores son muy útiles
13. ¡Eso es todo!

Si me preguntaras qué pregunta escuchas más sobre el desarrollo front-end, dirías: “¿Cómo puedo mejorar en CSS?”. Esa pregunta suele surgir después de compartir una ilustración CSS que hice. Es algo que me encanta hacer en CodePen.

Para muchos, CSS es esta bestia mítica que no se puede domar. Este tweet de Chris me hizo reír porque, aunque es irónico, hay mucho de cierto en él. Dicho esto, ¿qué pasaría si te dijera que estás a sólo unas pocas propiedades y técnicas de crear lo que deseas? La verdad es que estás tan cerca.

Hace tiempo que quería redactar un artículo como este, pero es un tema difícil de abordar porque hay tantas posibilidades y tantas técnicas que a menudo hay más de una forma de lograr lo mismo. Lo mismo ocurre con las ilustraciones CSS. No existe una forma correcta o incorrecta de hacerlo. Todos usamos el mismo lienzo. Simplemente existen tantas herramientas diferentes para colocar esos píxeles en la página.

Si bien no existe un enfoque único para la ilustración CSS, lo que puedo ofrecer es un conjunto de técnicas que pueden ayudarle en su viaje.

Tiempo y practica

La ilustración CSS requiere mucho tiempo y práctica. Cuanto más precisa quieras ser y más complicada sea la ilustración, más tiempo llevará. La parte que requiere mucho tiempo no suele ser decidir qué propiedades usar y cómo, sino hacer retoques para que las cosas luzcan bien. ¡Prepárate para familiarizarte con el inspector de estilos en las herramientas de desarrollo de tu navegador! También recomiendo probar VisBug si aún no lo has hecho.

Dos fantásticos artistas de CSS son Ben Evans y Diana Smith. Ambos han hablado recientemente sobre el consumo de tiempo al referirse a la ilustración CSS.

Publiqué una imagen parecida a un meme sobre una taza y la respuesta de Ben resumió las cosas perfectamente:

Tuve la tentación de crear esto en CSS cuando vi el tweet por primera vez, pero luego pensé que mi respuesta tardaría aproximadamente un mes.

¡Toma tiempo!

Ilustración CSS pic.twitter.com/vqpQLKTte5

– Jhey (@jh3yy) 10 de mayo de 2020

El rastreo es perfectamente aceptable.

A menudo tenemos una idea de qué es lo que queremos ilustrar. Después de todo, este artículo no trata sobre diseño.; se trata de tomar una imagen y renderizarla con DOM y CSS. Estoy bastante seguro de que esta técnica ha existido desde los albores de los tiempos. Pero es uno que he estado compartiendo durante los últimos meses.

• Encuentra o crea una imagen de lo que quieres ilustrar.
• Inclúyalo en su HTML con una imgetiqueta.
• Colóquelo de manera que quede debajo de su ilustración.
• Reduzca la opacidad de la imagen para que siga siendo visible pero no demasiado abrumadora.
• Rastreelo con el DOM.

Para mi sorpresa, esta técnica no es de conocimiento común. Pero es invaluable para crear ilustraciones CSS necesarias.

Vea este truco en acción aquí:

Aquí hay un lapso de tiempo de la creación de ese CSS @eggheadio

Ajusté las sombras con ruta de clip después ️

https://t.co/XhDRspwwFg vía @CodePen #webdev #codificación #CSS #animación #diseñoweb #diseño #creativo #100DaysOfCode #HTML #Timelapse https://t.co/ZQ1hyzcoSA pic.twitter.com/iPf7ksYCGX

– Jhey (@jh3yy) 1 de mayo de 2020

Y pruébalo aquí:

Presta atención a la capacidad de respuesta.

Si hay dos técnicas para aprender de este artículo, que sea la de “Rastreo” de arriba y la siguiente.

Existen algunos ejemplos fantásticos de ilustración CSS. Pero lo desafortunado de algunos de ellos es que no están diseñados, ni siquiera visibles, en pantallas pequeñas. Vivimos en una época en la que las primeras impresiones con la tecnología son importantes. Considere el ejemplo de un teclado ilustrado con CSS. Alguien se encuentra con tu trabajo, lo abre en su teléfono inteligente y lo recibe solo la mitad de la ilustración o una pequeña sección de ella. ¡Probablemente se perdieron las partes más interesantes de la demostración!

Este es mi truco: aprovecha las unidades de ventana gráfica para tus ilustraciones y crea tu propia unidad de escalada.

Para dimensionar y posicionar, tiene la opción de utilizar una unidad de escalada o un porcentaje. Esto es particularmente útil cuando necesita usar una sombra de cuadro porque la propiedad acepta unidades de ventana gráfica pero no porcentajes.

Considere el logotipo CSS egghead.io que creé arriba. Encontré la imagen que quería usar y la instalé en el DOM con una etiqueta img.

image src='egghead.png'/

img { height: 50vmin; left: 50%; opacity: 0.25; position: fixed; top: 50%; transform: translate(-50%, -50%);}

La altura, 50vmin, es el tamaño deseado de la ilustración CSS. La opacidad reducida nos permite “calcar” la ilustración claramente a medida que avanzamos.

Luego, creamos nuestra unidad de escalada.

/** * image dimensions are 742 x 769 * width is 742 * height is 769 * my desired size is 50vmin*/:root { --size: 50; --unit: calc((var(--size) / 769) * 1vmin);}

Con las dimensiones de la imagen en su lugar, podemos crear una unidad uniforme que se escalará con nuestra imagen. Sabemos que la altura es la unidad más grande, así que la usamos como base para crear una unidad fraccionaria.

Obtenemos algo como esto:

--unit: 0.06501950585vmin;

Parece extraño, pero créeme, está bien. Podemos usar esto para dimensionar el contenedor de nuestra ilustración usando calc().

.egg { height: calc(769 * var(--unit)); position: relative; width: calc(742 * var(--unit)); z-index: 2;}

Si usamos porcentajes o nuestra nueva --unitpropiedad personalizada para diseñar elementos dentro del contenedor de nuestra ilustración CSS, obtendremos ilustraciones CSS responsivas... ¡y todo lo que hizo falta fueron unas pocas líneas matemáticas usando variables CSS!

Cambie el tamaño de esta demostración y verá que todo se mantiene en proporción, siempre utilizando 50 vmin como restricción de tamaño.

Mida dos veces, corte una vez

Otro consejo es medir las cosas. ¡Diablos, incluso puedes tomar una cinta métrica si estás trabajando con un objeto físico!

Esto puede parecer un poco extraño, pero medí esta escena. Es el combo de TV que tengo en mi salón. Esas medidas equivalen a centímetros. Los usé para obtener una unidad que respondiera según la altura real del televisor. Podemos darle a ese número (y a todos los demás) un nombre que facilite recordar para qué sirve, gracias a las propiedades personalizadas.

:root { --light-switch: 15; --light-switch-border: 10; --light-switch-top: 15; --light-switch-bottom: 25; --tv-bezel: 15; --tv-unit-bezel: 4; --desired-height: 25vmin; --one-cm: calc(var(--desired-height) / var(--tv-height)); --tv-width: 158.1; --tv-height: 89.4; --unit-height: 42; --unit-width: 180; --unit-top: 78.7; --tv-bottom: 114.3; --scaled-tv-width: calc(var(--tv-width) * var(--one-cm)); --scaled-tv-height: calc(var(--tv-height) * var(--one-cm)); --scaled-unit-width: calc(var(--unit-width) * var(--one-cm)); --scaled-unit-height: calc(var(--unit-height) * var(--one-cm));}

Tan pronto como calculamos una variable, podemos usarla en todas partes. Sé que mi televisor mide 158,1 cm de ancho y 89,4 cm de alto. Revisé el manual. Pero en mi ilustración CSS, siempre escalará a 25vmin.

Utilice el posicionamiento absoluto en todas las cosas.

Éste le ahorrará algunas pulsaciones de teclas. La mayoría de las veces, buscará posicionar los elementos de manera absoluta. Sálvate y pon esta regla en alguna parte. Relatos Cortos

/* 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á!

El posicionamiento es un concepto complicado en CSS. Puede leerlo en el Almanaque CSS para obtener más información sobre cómo usarlo.

O bien, juegue con este pequeño campo de juego de posicionamiento:

Cíñete a un enfoque

Esto es, con diferencia, lo más difícil de hacer. ¿Cómo abordas una ilustración CSS? ¿Por dónde empezar? ¿Deberías empezar por la parte más exterior y avanzar hacia dentro? Eso no funciona tan bien.

Lo más probable es que pruebes algunos enfoques y encuentres una mejor manera de hacerlo. Seguramente harás un poco de ida y vuelta, pero cuanto más practiques, mejor podrás detectar patrones y desarrollar un enfoque que funcione mejor para ti.

Tiendo a relacionar mi enfoque con la forma en que crearías una imagen vectorial donde las ilustraciones se componen de capas. Divídelo y dibújalo en papel si es necesario. Pero comience desde abajo y avance hacia arriba. Esto tiende a significar formas más grandes primero y detalles más finos después. Siempre puedes jugar con el índice de apilamiento cuando necesites mover elementos.

Mantén una estructura sólida para tus estilos.

Eso nos lleva a la estructura. Intente evitar una estructura DOM plana para su ilustración. Mantener las cosas atómicas hace que sea más fácil mover partes de tu ilustración. También hará que sea mucho más fácil mostrar y ocultar partes de la ilustración o incluso animarlas más tarde. Considere la demostración de CSS Snorlax. Los brazos, pies, cabeza, etc. son elementos separados. Eso hizo que animar el brazo fuera mucho más fácil que si hubiera intentado mantener las cosas juntas, ya que simplemente podía aplicar la animación a la .snorlax__arm-leftclase.

Aquí hay una toma en timelapse de mí creando la demostración:

Intenté armar un timelapse del CSS Snorlax que construimos anoche

¡Divertido verlo de nuevo!

https://t.co/vbVYmFUN5V a través de @CodePen#webdev #codificación #HTML #CSS #diseño web #100DaysOfCode #creativo #diseño #animación pic.twitter.com/0mJtLPRQfP

– Jhey (@jh3yy) 28 de abril de 2020

Manejando formas incómodas

Hay un artículo bastante bueno aquí sobre CSS-Tricks para crear formas con CSS. Pero ¿qué pasa con las formas más “incómodas”, como una curva larga o incluso una curva exterior? En estos escenarios, debemos pensar de manera innovadora. Propiedades como overflow, border-radiusy clip-pathson de gran ayuda.

Considere esta demostración de CSS Jigglypuff. Activa la casilla de verificación.

¡Esa es la clave para crear formas curvas! Tenemos un elemento mucho más grande que el cuerpo con un border-radiusaplicado. Luego aplicamos overflow: hiddensobre el cuerpo para cortar esa parte.

¿Cómo podríamos crear una curva exterior? Éste es un poco complicado. Pero un truco que me gusta usar es un elemento transparente con un borde grueso. Luego aplique border-radiusy recorte el exceso, si es necesario.

Si presionas el interruptor, se revela el elemento que estamos usando para cruzar esa esquina. Otro truco podría ser superponer un círculo que coincida con el color de fondo. Esto está bien hasta que necesitemos cambiar el color de fondo. Está bien si tienes una variable o algo implementado para ese color. Pero podría hacer que las cosas sean un poco más difíciles de mantener.

clip-pathes tu amigo

Es posible que hayas notado un par de propiedades CSS interesantes en la última demostración, incluida la ruta del clip. Lo más probable es que lo necesites clip-pathsi quieres crear formas CSS complejas. Es especialmente útil para cortar fragmentos de elementos cuando no es posible ocultar el desbordamiento del cuadro principal.

Aquí hay una pequeña demostración que creé hace algún tiempo y que muestra diferentes clip-pathposibilidades.

También hay esta demostración que toma ideas del artículo "Formas de CSS" y las recrea con clip-path.

border-radiuses tu otro amigo

Vas a necesitar border-radiuscrear curvas. Un truco poco común es utilizar una sintaxis "doble". Esto le permite crear un radio horizontal y vertical para cada esquina.

Juega con esta demostración para apreciar realmente el poder de border-radius. Recomiendo el uso de porcentajes en todos los ámbitos para mantener la capacidad de respuesta.

Técnicas de sombreado

Tienes todas las formas, todo está muy bien diseñado y todos los colores correctos están en su lugar... pero algo aún luce mal. Lo más probable es que sea falta de sombra.

El sombreado añade profundidad y crea una sensación de realismo. Considere esta creación de una ilustración de Gal Shir. Gal es fantástica usando sombras y degradados para crear hermosas ilustraciones. Pensé que sería divertido recrearlo e incluir un interruptor que alterne el sombreado para ver la diferencia que hace.

Los efectos de sombreado a menudo se crean con una combinación box-shadowy background-image.

La clave de estas propiedades es que podemos apilarlas en una lista separada por comas. Por ejemplo, el caldero de la demostración tiene una lista de gradientes que se utilizan en todo el cuerpo.

.cauldron { background: radial-gradient(25% 25% at 25% 55%, var(--rim-color), transparent), radial-gradient(100% 100% at -2% 50%, transparent, transparent 92%, var(--cauldron-color)), radial-gradient(100% 100% at -5% 50%, transparent, transparent 80%, var(--darkness)), linear-gradient(310deg, var(--inner-rim-color) 25%, transparent), var(--cauldron-color);}

Tenga en cuenta que aquí se utilizan radial-gradient()y a y no siempre con valores numéricos perfectamente redondos. linear-gradient()Una vez más, esos números están bien. De hecho, pasarás mucho tiempo modificando y modificando cosas en el inspector de estilo.

Generalmente es lo mismo trabajar con box-shadow. Sin embargo, con eso, también podemos usar el valor de inserción para crear bordes complicados y profundidad adicional.

.cauldron__opening { box-shadow: 0 0px calc(var(--size) * 0.05px) calc(var(--size) * 0.005px) var(--rim-color) inset, 0 calc(var(--size) * 0.025px) 0 calc(var(--size) * 0.025px) var(--inner-rim-color) inset, 0 10px 20px 0px var(--darkness), 0 10px 20px -10px var(--inner-rim-color);}

Ciertamente, hay ocasiones en las que tendrá más sentido optar filter: drop-shadow()por obtener el efecto que desea.

a.singlediv.com de Lynn Fisher es un brillante ejemplo de estas propiedades en acción. Eche un vistazo a ese sitio e inspeccione algunas de las ilustraciones para encontrar excelentes formas de usarlas box-shadowy background-imageen ellas.

box-shadowes tan poderoso que podrías crear toda tu ilustración con él. Una vez bromeé acerca de crear una ilustración CSS de un dólar.

En CSS, ¿verdad? #webdev #CSS #animación #diseño web #codificación #100DaysOfCode #HTML https://t.co/VmyeySsK83

– Jhey (@jh3yy) 22 de abril de 2020

Utilicé un generador para crear la ilustración con un solo div. Pero Álvaro Montoro fue un poco más allá y escribió un generador que lo hace con box-shadow.

Los preprocesadores son muy útiles

Si bien no son necesarios, el uso de preprocesadores puede ayudar a mantener el código limpio y ordenado. Por ejemplo, Pug hace que escribir HTML sea más rápido, especialmente cuando se trata de usar bucles para manejar un montón de elementos repetidos. A partir de ahí, podemos definir el alcance de las propiedades personalizadas de CSS de manera que solo necesitemos definir estilos una vez y luego sobrescribirlos cuando sea necesario.

Aquí hay otro ejemplo que demuestra una estructura DRY. Las flores se construyen con el mismo marcado, pero cada una tiene su propia clase de índice que se utiliza para aplicar propiedades CSS con ámbito.

La primera flor tiene estas propiedades:

.flower--1 { --hue: 190; --x: 0; --y: 0; --size: 125; --r: 0;}

Es el primero, por lo que todos los demás se basan en él. Observe cómo la segunda flor está hacia la derecha y ligeramente hacia arriba. Todo lo que se necesita es asignar diferentes valores a las mismas propiedades personalizadas:

.flower--2 { --hue: 320; --x: 140; --y: -75; --size: 75; --r: 40;}

¡Características animadas y responsivas de CSS Leif en el último CodePen Spark! ✨

Para aquellos que no conocen Animal Crossing, Leif es un perezoso con pulgares verdes que visita su isla.

¡Aquí hay un lapso de tiempo!

https://t.co/tkHX4nWXp7 a través de @CodePen pic.twitter.com/naJIrsSlYM

– Jhey (@jh3yy) 19 de mayo de 2020

¡Eso es todo!

¡Adelante, utiliza estos consejos, crea los tuyos propios, compártelos y comparte tus obras maestras de CSS! Y oye, si tienes tu propio consejo, ¡compártelo también! Este es definitivamente el tipo de cosas que se aprenden a través de muchas pruebas y errores: lo que funciona para mí puede parecer diferente de lo que funciona para usted y podemos aprender de esos diferentes enfoques.

Tal vez te puede interesar:

1. ¿Cómo se hace el tamaño máximo de fuente en CSS?
2. Cambiar el tamaño de los valores en pasos en CSS
3. ¿Qué hace “revertir” en CSS?
4. CSS4 es una mala idea

Consejos para ilustraciones CSS complejas

Tiempo y practicaEl rastreo es perfectamente aceptable.Presta atención a la capacidad de respuesta.Mida dos veces, corte una vezUtilice el posicionamiento abs

programar

es

https://aprendeprogramando.es/static/images/programar-consejos-para-ilustraciones-css-complejas-1555-0.jpg

2024-09-30

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente