Ir al contenido principal

Entradas

Barra de carga con animaciones CSS

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º.
Entradas recientes

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

Agregar un botón de Cafecito a tu blog de Blogger

Tips y Tutoriales para Blogger

Cafecito es una plataforma de crowdfunding que busca unir a creadores de contenido, ONGs o proyectos con gente que quiera aportar a lo que hacen. Si tenés un blog en Blogger y te gustaría dar la posibilidad a tus lectores de apoyar tu contenido con pequeños aportes monetarios, entonces esta nueva plataforma argentina te va a ayudar mucho. Crearte una cuenta en Cafecito es muy sencillo y es importante que vincules tu Mercado Pago para recibir por ahí los pagos. En unos segundos ya podés compartir el link de tu perfil con tus lectores. También podés incluir un botón como éste en tus publicaciones o incluso insertarlo dentro de un gadget HTML/JavaScript. Buscá el código HTML para insertar tu botón en Perfil 👉 Editar perfil 👉 Botones Además, tenés varios colores para elegir el que mejor se adapte a la paleta de colores de tu blog.

Simulando una colisión con CSS

Tips y Tutoriales para Blogger

Volví a Blogger después de tanto tiempo. Una pena haber dejado abandonado blogdesign  y retomar muy pocas veces el hábito de indagar acerca de las novedades en el CSS y el diseño web. Ahora ya casi iniciando los años universitarios, me gustaría volver a escribir acerca de ésto que un tiempo me apasionó y aún me sigue sorprendiendo y fue clave en la elección de mi carrera. Hace unos días ingresé a mi cuenta de Codepen tras intentos e intentos de acertar con mi usuario y contraseña. Quedé sorprendido de las ingenuidades que publicaba hace años, y mi interés sobre cómo pude lograr todo eso a través de la programación volvió a despertar. El último pen de mi propiedad se titula "Simulating collision with CSS". A continuación insertado. See the Pen Simulating collision with CSS by Lucas Maidana ( @LucasMaidana ) on CodePen . Lo que quise demostrar era cómo simular el evento de colisión (que seguido vemos en vídeo juegos) sólo utilizando CSS y sin recurrir a otros lenguajes má

Personalizando el Formulario de Contacto de Blogger

Tips y Tutoriales para Blogger

Hace no mucho tiempo Blogger lanzó un nuevo gadget: el formulario de contacto. Podemos optar por utilizarlo como gadget o en una página estática . Ya que es fácil acceder al código de este gadget lo podemos personalizar a gusto modificando el HTML y añadiendo CSS. HTML El formulario consta de dos entradas de texto, una para el nombre y otra para el correo electrónico, un textarea para ingresar el mensaje y un input de tipo submit para enviarlo todo. Para darle un toque más profesional, vamos a suprimir los textos "Nombre" "Correo electrónico" "Mensaje" por un placeholder en el interior de cada cuadro de texto. Para que entiendas aquí te muestro la diferecia. Formulario original Para lograr esto, debemos modificar el HTML del gadget. Primero nos dirigimos a la parte de la plantilla donde se encuentra el widget, lo expandimos, expandimos el includable y encontraremos algo como esto: <b:widget id='ContactForm1' locked='false' title=

SlideToogle con CSS

Tips y Tutoriales para Blogger

Esto lo vi en Google Play, la tienda virtual de Google para aplicaciones Andriod. La descripción de la aplicación se puede mostrar u ocultar con un botón en la esquina inferior derecha. Esto es muy útil para mostrar resúmenes que pueden ser extendidos a gusto del lector. En Google Play usan javascript pero se logra el mismo resultado utilizando sólo CSS. Lo que hacemos es camuflar un input de tipo checkbox en forma de botón utilizando la etiqueta label. Cuando el input esta activado, el contenido se exapande. Como no es posible utilizar transiciones con la propiedad height , utilizamos max-height . See the Pen SlideToogle con CSS :checked by Lucas Maidana ( @LucasMaidana ) on CodePen . Fuentes Slidetoogle sólo con CSS en el blog de Emilio Cobos, de aquí sacamos cómo realizar la transición utilizando la propiedad max-height . Efecto de texto con CSS en el blog de Emilio Cobos. Aquí explica cómo lograr el efecto de continuidad del texto.

Botón circular 3D realista con CSS

Tips y Tutoriales para Blogger

El secreto está en la propiedad box-shadow . Luego border-radius para darle forma y ya lo obtenemos. See the Pen Botón tridimensional realista. by Lucas Maidana ( @LucasMaidana ) on CodePen . El HTML típico de un botón. <a class='boton' href='URL-DEL-BOTON'></a> Y el CSS. .boton {   background: url( http://www.ashleyjt.net/windows/images/Android.png )  /* Url de la imagen */  no-repeat center center, #62BC0F /* Color del botón */ ; background-size: 60%;  /* Tamaño de la imagen */   height: 200px;   /* Alto del botón */   width: 200px;   /* Ancho del botón */   display: table;   border-radius: 100%;   cursor: pointer;     box-shadow: /* Sombras externa */ inset 0 10px 15px rgba(255,255,255,.35), inset 0 -10px 15px rgba(0,0,0,.05), inset 10px 0 15px rgba(0,0,0,.05), inset -10px 0 15px rgba(0,0,0,.05), /* Sombra interna */ 0 5px 20px rgba(0,0,0,.1); } /* Al presionar */ .boton:active {   box-shadow: inset 0 5px 30px rgba(0,0,0,.2);  /* S