Vengo a contarles cómo hice una barra de carga (o loader) con animaciones CSS . La iniciativa surgió hace unas semanas en Twitter a partir del challenge de @AndreusCafe : Ustedes saben que me encanta CSS, y por sobre todo las cosas creativas. Así que, este desafío consiste en hacer un pequeño loader en CSS. No hay definiciones ni requerimientos técnicos. Simplemente un pequeño componente gráfico de carga en CSS; uds eligen el estilo. pic.twitter.com/rqsivfSp3d — Andrés (@AndreusCafe) November 27, 2020 Me surgió la idea de hacer un spinner y barra de progreso a la vez, ya que no me decidía por cuál opción ir. El desafío fue escribir los keyframes para que la animación sea cíclica y lo más fluida posible. Tomé lápiz y papel para esquematizar las líneas de tiempo y pude tener una visión de lo que quería lograr y lo que debería plasmar en mi código. Por un lado, tenemos la animación rotate que hace girar la barra. Primero espera, luego gira 180º, vuelve a esperar y vuelve a girar 180º.
Simplificá los estilos de tus botones y todos sus estados con filtros CSS
Tips y Tutoriales para Blogger
¡Hola! Les traigo un tip muy útil para cuando tienen que escribir los estilos de botones o links, y deben tener en cuenta los distintos estados de los mismos. Este es un ejemplo de dos tipos de botones y sus estados. El proceso lógico es empezar por los estilos del botón en su estado inicial y después desarrollar los estados mediante las pseudoclases correspondientes. Lo recomendable es que si estás replicando una interfaz de un wireframe o estás utilizando un UI kit, respetes todos los colores y estilos acordados. En cambio, si estás programando tu propia UI y sólamente querés que tus botones queden funcionales, te voy a mostrar cómo podés alivianarte mucho el trabajo. Obviamente también suponemos que no vas a usar una librería UI. Lo que lleva mucho tiempo al momento de estilizar los botones es buscar los colores correctos para los distintos estados, y se complica más aún si no tenés conocimientos sobre colores en UI. Y todavía más complicado si queremos tener botones con degradado