Con frecuencia olvido como centrar un elemento, div, imagen, botón o cualquier cosa en CSS, por eso en este post voy a ver como centrar un elemento en vertical y horizontal. Para ello voy a ir desde el principio creando un contenedor y dentro del contenedor estará el elemento. 1. Leer más…
Introducción: Un día escuchando una platica de @kj con @Crayder sobre programación vino a mi la idea de hacer una Ruleta en css como reto. 🤯🤓🤔 Más adelante a medida que terminaba la ruleta pesé que seria buena idea darle una animación.🤔 Cabe destacar la ayuda y el seguimiento Leer más…
Introducción: Hola chicos, hoy veremos la animación de «Homer Simpson» y su «donut». Antes tengo que aclarar que «Homer Simpson» no esta hecho en CSS, en realidad es una imagen svg; pero la «donut» si fue creada con CSS puro. Nota: Ahora que uso Grid en CSS la alineación de Leer más…
Introducción: En testa animación encontraremos 3 pequeñas animaciones, las cuales son: Movimiento infinito de una imagen svg en vertical. Imagen svg de globos que se vuelven invisibles y visibles de forma infinita. Parpadeo infinito de unos puntos (círculos), que cambian de color. Nota: Para el alineamiento de los elementos Leer más…
Introducción: La idea es sencilla todo lo que quería era replicar la tarjeta Tinycards de Doulingo con CSS y HTML, para luego agregarle una animación que consiste en hacer que gire 360º grados sobre su eje. Respecto al código intentare dar una breve explicación de ello a continuación. 1. Estructura Leer más…
Introducción: Hola chicos, no he podido dejar de hacer animaciones, así que hoy les traigo otra, esta vez vamos a hacer un corazón muy bonito, el cual vamos a clonar 4 veces para luego darle 3 animaciones. Creando corazones con CSS En este caso lo primero que hice fue crear Leer más…
Introducción: En este ejemplo vamos a crear un muñeco o minion (la verdad no se bien como llamarlo); pero la idea es que este muñequito sonríe, en eso consiste esta animación. Se que es sencillo, al menos esta vez puse las etiquetas en el orden adecuado (eso creo).😋 Creando un Leer más…
Introducción: En este ejemplo crearemos un gusanito rosado (litle pink worm) y lo animaremos con CSS como podemos verlo en el vídeo de abajo. 1. Creando un gusanito con CSS Bien, lo primero que tenemos que hacer es crear una etiqueta div en HTML, ponerle tamaño y color para Leer más…
Introducción: Para empezar mi conocimiento de CSS y HTML son mínimos, esa es la verdad; pero al pensar en un fondo animado si tenia algo claro. Quería que fuera como el Tetris, con figuras cayendo desde la parte superior de forma aleatoria y sobre todo con colores bonitos; porque si Leer más…
Introducción: Hey hola, el artículo de hoy tenia pesado hacerlo hace mucho tiempo; pero tenia como prioridad otros temas a escribir y como no suelo recordar como comentar en HTML vi la necesidad de escribir este artículo de una vez. Así que vamos a ello. ¿Qué es un comentario? Leer más…