flex-wrap Es una propiedad del flexbox que nos ayuda con la distribución de los elementos en el contenedor. A continuación veremos 3 valores de flex-wrap. 1. nowrap El valor nowrap es el valor por defecto o inicial de flex-wrap, hace que los elementos o ítems entren todos en una Leer más…
¿Qué es flexbox? Es un método o procedimiento de diseño de páginas webs unidimensional osea que solo tiene una dimensión. En otras palabras al ser flexbox unidimensional estamos indicando que: flexbox solo maneja una dimensión a la vez, esta puede ser fila o columna pero no ambas al mismo tiempo. Leer más…
Llevo mucho tiempo usando css grid y aun hay cosas que no tengo claras, por ese motivo hoy quiero revisar y hacer ejemplos sobre justify-items y justify-conyent. Empecemos definiendo que hace cada una de estas propiedades. justify-items: justify-items es una propiedad que alinea el elemento en el eje x (lado Leer más…
align-self align-self es una propiedad de css que aliena (o reposiciona) el elemento respecto al eje Y de una cuadrícula o grilla. Nota: align-self solo se aplica a un único elemento o casilla de la cuadrícula. Entre los valores de align-self se encuentran los siguientes: – start – end Leer más…
rem y em en css Son unidades de longitud relativa. ¿Pero relativo a que? En el caso de em quiere decir que es relativo o toma el tamaño de letra de su elemento padre. Mientras que rem toma el tamaño de letra del elemento raíz (root). Nota: Es importante saber Leer más…
blur() css blur es una función de css que genera un desenfoque gaussiano esto es un efecto de suavidad o difuminado. En otras palabras blur genera un efecto borroso más o menos.😅 Yo probé esto en una imagen, texto y elemento div. Nota: Cuando blur esta en 0 no se Leer más…
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…