10 consejos para empezar a practicar CSS haciendo arte.
“Las opiniones, hechos e interpretaciones expresadas en esta publicación, que no han sido sometida a revisión editorial o de otro tipo, son de exclusiva responsabilidad de sus autoras y pueden no coincidir con las de Adalab.”
Box-sizing, ¿position absolute o relative?, flexbox, ese botón no quiere colocarse donde le toca haga lo que haga, ¿BEM? ¿cuando usaba align y cuando justify? ahora añade transiciones, animaciones, z-index… Pfff… Todos hemos pasado por esto.
Mil cosas para practicar, aclarar, y no saber por donde empezar. Si te gustan los dibujos, una forma divertida de empezar a practicar es utilizando todo esto para crear dibujos sencillos.
Si, se puede, y se pueden llegar a hacer maravillas como estas:
Te recomiendo también que eches un ojo a estos perfiles de codepen para ver las locuras que se pueden hacer:
Si ya tienes los dientes largos y ganas de ponerte manos a la obra, te recomiendo parar 3 minutos y leer estos consejos antes de empezar.
1.- Empieza por algo sencillo.
Querer que tu primer dibujo en CSS sea La Mona Lisa puede llegar a ser algo frustrante a la vez que imposible. Recuerda las limitaciones de lo que estás utilizando para dibujar, esto no es un programa de dibujo, es CSS. Utiliza formas sencillas como cuadrados, círculos, etc.
2.- Planifica, al menos lo básico.
Haz un esquema en papel y divide tu dibujo en formas sencillas. Te ayudará a la hora de visualizar los elementos que necesitas crear.
3.- ¡<div> para todos!
Estás haciendo un dibujo, no necesitas usar HTML semántico. Lo más sencillo es usar la etiqueta <div> para todo. Una cosa menos en la que pensar, que con el CSS y/o JavaScript vas a tener suficiente. Aquí tienes unas idea de como transformar esos <div> en formas básicas.
4.- Usa BEM o alguna forma clara de nombrar las clases.
A lo mejor para 5 <div>no es muy necesario, pero en cuanto te animes a hacer algo un poco más complejo te va a ayudar mucho. Es una forma fácil y lógica de nombrar clases de los elementos que agiliza el trabajo.
5.- Centrar tu dibujo.
Habrá veces en las que quieras que el dibujo aparezca centrado en la página en lugar de pegado a una esquina o arriba. Coloca todo tu dibujo dentro de un contenedor y céntralo. Una forma rápida y sencilla es usando este código:
.general-container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}6.- Colores.
¿Como sería el código hexadecimal de este color que tengo en mente? ¿Si ya he puesto este objeto color “azul ballena espacial” cual le pongo al de al lado? Quiero hacer este personaje en concreto, pero no se exactamente que color es el de su gorra… Aquí tienes unos enlaces que solucionan todas estas dudas :)
- https://coolors.co: Paletas de colores que funcionan bien de forma rápida.
- https://mycolor.space: Genera paletas a partir de un color dado.
- http://www.colorzilla.com/gradient-editor/ Generador de gradientes.
- Color picker: Haz una búsqueda de estas palabras en google y te aparecerá una herramienta con selector de color que te da el código para que puedas usarlo.
- www.imagecolorpicker.com/es : Te permite subir una imagen y te da el código exacto del color que necesites.
7.- Sombras y volúmenes.
Puedes utilizar box-shadow para añadir sombras tanto fuera como dentro (añadiendo inset ) del elemento. Puedes utilizar la sombra interna también para dar luces y volumen a los elementos.
8.- Animaciones y transiciones.
Usar animaciones y transiciones es una muy buena forma de aportar a tu dibujo dinamismo y una forma de interactuar con quien lo vea, a la vez que practicas. Pueden ser desde cosas sencillas como una transición con :hover, hasta complicarte algo más haciendo una animación con todos los “frames” que quieras.
9.- Haz que crezca contigo.
Personalmente, una cosa que me está gustando mucho es ir añadiendo detalles y cosas nuevas según voy aprendiendo a hacerlas. Así puedes trabajar desde una base que ya has creado en lugar de empezar desde cero, e ir complicándolo poco a poco sin abrumarte desde el principio con todo lo que quieres hacer.
10.- !Compártelo!
Aunque solo lo hagas para practicar, ¡compártelo! Tiene muchas cosas positivas, desde nuevas ideas para aplicar, consejos para mejorar… Seguro que a mucha gente le gusta y puede ayudarles o animarles a hacer sus propios dibujos :)
Ahora si, !corre a hacer tu primer dibujo con CSS!
