Crea arte CSS animado

Arte CSS
(Crédito de la imagen: Tiffany Choong)

Crear imágenes CSS es una forma divertida de practicar sus habilidades y crear una obra de arte ordenada. Es un buen descanso del estilo habitual del día a día de los componentes web. Todo lo que necesita para comenzar es un documento en blanco y un archivo CSS; recomendamos usar Sass, que le permitirá reutilizar sus estilos y escribir selectores más simples (consulte nuestra guía para ¿Qué es Sass? para obtener más información sobre este preprocesador).

Comenzaremos con algunos de los mejores consejos para dominar el arte CSS, luego le mostraremos cómo recrear este globo animado Pikachu usando solo CSS (asegúrese de mantener sus archivos seguros en un formato decente almacenamiento en la nube ).

Para obtener más inspiración, explore nuestro resumen de increíbles Ejemplos de animación CSS . ¿Después de algo más básico? Empiece por aprender cómo crear un polo de hielo usando CSS



O, si está iniciando un nuevo sitio, elimine la complejidad con un brillante Creador de sitios web y asegúrate de obtener tu alojamiento web Correcto.

Reducir el diseño a formas simples

Al crear arte CSS, puede ayudar mirar algunas imágenes de referencia en busca de inspiración y luego crear una variación de dibujos animados simplificada a medida que avanza, imaginando el tema usando formas primitivas, que mejoran Formas CSS .

Use un fondo brillante para ayudar con el posicionamiento

Cuando se superponen formas de colores similares, es difícil ver dónde se colocan o cómo se ven. Es útil destacar la forma en la que está trabajando cambiando el color de fondo a algo brillante y alegre, como el magenta. Esto le permite ver fácilmente la posición exacta y la forma de su elemento.

Utilice tamaños de fluido

Cuando se trata de definir un valor px para propiedades, recomendamos usar la unidad rem. En el caso de que decida que desea que su pieza general sea más grande o más pequeña, al usar unidades rem solo tiene que cambiar la base html {tamaño de fuente:… px} en su Sass para escalar toda la obra de arte hacia arriba o hacia abajo.

Al definir las alturas y anchos de los elementos secundarios que deben tener un tamaño relativo al principal, los porcentajes son útiles. Dado que estos valores son siempre relativos a su padre, también deben escalar con el tamaño de fuente html .

Generar CSS

Generate CSS es una conferencia a medida presentada por Creative Bloq, net y Web Designer. ¡Haga clic para reservar su boleto Early Bird!(Crédito de la imagen: Getty / Future)

01. Empiece con contenedores

Un contenedor de envoltura para guardar las piezas de la obra de arte es un buen lugar para comenzar. Dentro del contenedor, podemos colocar tres contenedores internos: la cabeza, el cuerpo y los globos.

¿Por qué es tan difícil conseguir un trabajo de diseño gráfico?
|_+_|

Por lo general, el recipiente debe estar posición: relativa para permitir que otros elementos se coloquen relativamente dentro de él usando posición: absoluta y tener una altura y un ancho bien definidos; de lo contrario, colocar elementos secundarios se vuelve difícil.

En sus estilos, agregue sus colores base como variables Sass para su reutilización. El descarado aligerar() y oscurecer() Las funciones crearán tintes y sombras de sus colores, que se pueden utilizar como luces o sombras para su personaje.

02. Estilo de la cabeza

Con la estructura resuelta, peinemos la cabeza primero. En este caso, la cabeza es un buen punto central para la obra de arte, por lo que en lugar de establecer su posición en absoluta, se puede establecer en relativa. Esto permite que el contenedor tenga un elemento estable dentro de él, dando a los otros elementos absolutos flotantes un punto de anclaje y, por lo tanto, más control sobre su posición.

Los rasgos faciales necesitarán un contenedor para posicionarse, así que cree un dentro del contenedor de la cabeza para la forma amarilla con un ancho, alto y color de fondo; ahora hagamos que este rectángulo se vea más como una forma de cabeza. Una de las propiedades más comunes y útiles en el arte CSS es la radio de borde propiedad, que cambia la curva de la X o Y de las esquinas de una caja y se puede utilizar para crear formas más orgánicas.

Usando esta técnica con una combinación de rem y porcentaje, puede hacer formas similares a manchas en lugar de simples elipses, que escalan naturalmente con el html {tamaño de fuente:… px} :

|_+_|

Después de perfeccionar la cabeza radio de borde , coloque el resto de los rasgos faciales como elementos secundarios de la cabeza, como los ojos, las mejillas, la nariz y las orejas. Como la cabeza, el radio de borde truco será útil ya que radio del borde: 50% puede que no parezca atractivo.

03. Pasar al cuerpo

Un cuerpo Se puede colocar dentro del contenedor del cuerpo detrás de la cabeza y darle forma con el mismo radio de borde técnica, así como los brazos, piernas y cola. Para permitir una superposición adecuada, el cuerpo real debe ser su propio elemento, ya que ciertos elementos internos como las rayas traseras deberán cortarse con desbordamiento: oculto . Para darle más profundidad al cuerpo, el transformar: sesgar () La propiedad puede raspar ligeramente el cuerpo.

La cola del rayo se puede construir usando tres rectángulos separados en lugar de intentar formar esta forma a partir de un elemento. Los rectángulos se pueden girar y colocar uno encima del otro para formar un perno. Los brazos y las piernas pueden usar el color primario más oscuro que creamos con Sass. oscurecer() para que se destaquen.

04. Agrega globos

Ahora que el mouse eléctrico está terminado, atemos globos a su espalda. Agregar algunos s con estilos compartidos con una cadena secundaria y colóquelos agrupados sobre la cabeza. La cuerda es invisible excepto un borde izquierdo , que ayudan a que se vea más como una cuerda.

Para atar la cuerda alrededor de la cintura del personaje, un se puede colocar dentro del cuerpo para permitir un posicionamiento adecuado. La cuerda necesita una ligera curva para parecer como si estuviera atada alrededor del cuerpo, por lo que puede tener una pequeña altura. borde inferior y un borde inferior radio izquierdo y derecho, que forma una línea curva delgada:

|_+_|

05. Animar el CSS

Podemos darle vida al personaje agregando @keyframes animaciones. Los brazos, piernas, orejas y cola se pueden animar con transformar: rotar () . Asegurar la origen de transformación se establece en la 'articulación' (es decir, el centro superior de una pierna) y ajusta la rotación. Este tipo de animación se puede utilizar varias veces en una mezcla de Sass:

|_+_|

Finalmente, agregando 5 lentos transformar: translateY () La animación de fotogramas clave animará al personaje hacia arriba y hacia abajo como si estuviera flotando. Para darle un toque de realismo, una animación parpadeante usando transformar: scaleY (0.1) La propiedad se puede utilizar para que parezca que los ojos se están cerrando.

Este artículo se publicó originalmente en una revista de diseño web creativo. neto . Comprar número 283 o suscribir .

Leer más: