Una de las mejores formas de practicar CSS es aplicarlo haciendo cosas divertidas, y bueno si no eres un buen dibujante a lápiz y papel, quizás si lo seas con el código.
Conocí el CSS de la mano con el HTML y luego de ponerle colores a los botones y a los títulos, comencé a probar hacer cosas divertidas.
¿Cómo empezar?
- Busca una imagen que replicar que tenga conceptos geométricos simples, es decir que tu lo veas y digas, este gráfico esta hecho de círculos y cuadrados.
⚠️¡ Si recién estas empezando! no te arriesgues por imágenes
muy elaboradas, empieza por cosas simples y poco a poco sube de nivel para que no te frustres a la primera.
En este caso yo encontré el osito, que esta hecho de círculos
2. Sabemos que las etiquetas de HTML van formando cajas a lo largo de la página, y por eso comenzaremos creando el contenedor principal de nuestro oso. Una gran caja cuadrada de 500px y dentro de este, comenzaremos a crear todo el osito.
⚠️Para efectos prácticos las “cajas” que tanto menciono son la etiqueta html “div”. No tengamos miedo de caer en la “divitis” para estos miniproyectos personales, recién estamos empezando y no es un maquetado web así que libérate de las reglas, relajate y crea.
3. Es recomendable comenzar a observar el dibujo e ir viendo cuantas cajas vas a crear y qué cajas van a ir dentro de otras cajas. Suena medio raro, pero si lo comienzas a ver de esa manera vas a tener una ruta más clara y ordenada para trabajar.
Vamos a separar todas las partes, y cuando hablo de todas son TODAS.
Esta es una forma de hacerlo, realizarlo así me ayuda a tener una ruta de lo que debo de ir construyendo. Con esto tengo claro que necesito crear 15 div y además sé que divs están dentro de otros.
⚠️Puedes encontrar otra forma más interesante y práctica de organizarlo,
déjame tus sugerencias .
4. Un paso importante es tener los colores ya definidos en variables, lo bueno es que CSS3 ya nos permite hacer eso, y así nos vamos volviendo más eficientes a la hora de colocar los colores. Para esto definí estas variables con nombres referentes a las secciones que voy a colorear para que se me haga más fácil ubicarlos.
Empecemos a crear
1 . El contenedor principal según la imagen es circular, así que un border-radius de 50% no le caería mal. Además, si queremos centrar la cara del osito es necesario ponerle flex y alinearlo centralmente tanto vertical como horizontalmente.
2. La cabeza “head” es un div ovalado, y este aloja todos los componentes. Así que dentro de él colocaremos todos los elementos con clases que describan explicitamente sus partes ,ejemplo : eye, nose, ear, mood,etc., ya con estas clases podemos ir asignando estilos específicos a cada parte.
3. Sabemos que hay elementos que van a repetir estilos como las orejas, los ojos y los corbatines, pero también necesitamos ser específicos, es por eso que colocamos clases adicionales con nombres referentes a su ubicación, ejemplo : eye-right , eye-left . Estos nos ayuda para posicionarlos en la dirección adecuada.
Es aquí cuando empezamos con nuestros mejores amigo “position:relative” y “position:absolute”, estos compañeros nos van a acompañar en casi todos los elementos para ubicarlos de manera precisa y ordenada en la posición deseada.
⚠️Dato importante : Recordando que debemos asignar al elemento contenedor como “position: relative”, para que los elementos hijos tengan una referencia del espacio donde deben moverse. Y es obvio que nuestro querido elemento “head” tiene que tener si o si un “position : relative”.
4. Para posicionar elementos como los ojos necesitamos trabajar con la misma distancia de derecha e izquierda, entonces debemos respetar la misma medida de distancia de “left” y “right”, con esto nos aseguremos que las distancias sean precisas.
5. Para el caso de la hocico y la nariz, hemos observado que uno esta dentro de la otra, entonces definimos que el hocico debe poseer un “position: relative” y la nariz debe posicionarse dentro de este pequeño espacio tambien con position: relative. Lo posicionamos con left y top, y listo ya lo tenemos donde lo queríamos. Lo mismo haríamos con las orejas y sus círculos internos y los corbatines.
6. Para que el ocico se visualice sobre la cabeza, necesitamos usar nuestro famoso “z-index”, esto es muy importante porque queremos que este elemento este delante la capa de la cabeza y así se pueda visualizar como el diseño, sino lo colocamos podría aparecer detrás. El número que asignamos al z-index puede ir desde 1 hasta el número que desees. Mientras más grande, más delante esta de todo.
Tu tienes el poder de mover las capas como quieras.
7. Para el caso de las orejas y el corbatin, necesitamos ubicarlos un poco fuera del contenedor, para este caso necesitamos usar “position:absolute”, ya que nos permite salirnos del flujo normal.
Y listo, moviendo y moviendo elementos podemos ir haciendo diseños muy bonitos.
Este tipo de miniproyectos nos ayudan a mejorar nuestras habilidades front de una forma divertida y a su vez llenamos más nuestro portafolio.
Hay muchos desarrolladores que realizan este tipo de cosas, y lo hacen asombrosamente. Revisa https://css-art.com/ y veras las cosas asombrosas que se pueden hacer.
🚨Revisa lo que ha construido esta capa, es una maestra en el CSS : https://diana-adrianne.com/
Así empece, con esto de los dibujos CSS ahora, ya estoy animando estas creaciones para que se vean mucho más espectaculares.
Muy pronto colocaré más miniproyectos de este tipo.
Gracias por llegar hasta aquí.
