Módulo 5
"Flujo de cajas CSS"
Para empezar con el manejo de flujo de elementos contamos con una propiedad CSS denominada display que especifica si un elemento es tratado como bloque o elemento en línea y el diseño usado por sus hijos, como flow layout(Diseño de Flujo), grid(Cuadricula) o flex(Flexible), algunos de estos pueden ser:
- Block: Los elementos aparecen uno debajo de otro ocupando todo el ancho
disponible. - Inline: Los elementos aparecen uno al lado del otro en una línea y saltan a la línea
siguiente al ocupar el espacio disponible. - Inline-block: el elemento se muestra como un bloque pero permite que otros elementos se muestren en línea a su lado. Es decir, el elemento se comporta como un bloque pero permite que otros elementos se muestren en línea con él. Esto puede ser útil cuando se desea que un elemento tenga el comportamiento de bloque pero que se muestre en línea con otros elementos.
- Flex: Al definir este valor se convierte en un elemento flexible y permite que sus elementos secundarios sean controlados mediante diferentes propiedades CSS. En este mismo nos vamos a centrar más ya que es el más requerido y util para manejar el diseño y flujo de cajas en css.
FlexBox
Flexbox es un modo de diseño que nos permite crear estructuras para sitios web de una forma más fácil. Si ya sabes de HTML y CSS probablemente alguna vez habrás visto que los sitios web se realizan utilizando la propiedad float, para desplazar contenedores. Con Flexbox ya no necesitarás usar float para posicionar tus elementos, al contrario, con Flexbox podrás posicionar y distribuir los elementos como tú quieras.
Aprendé jugando 🎮
Podes aprender mucho sobre flexbox jugando un juego que hay en internet llamado FlexFroggy, podes probarlo haciendo click aqui.
A continuación te dejamos un archivo descargable de regalo desde CSS-TRICKS, es un resúmen gráfico y bien ejemplificado de la forma en que podés aplicar FlexBox, lo podés descargar haciendo click aqui.
Grids
Grid en CSS se refiere a la función de diseño de cuadrícula que permite crear diseños complejos y flexibles en una página web. Con CSS Grid, se puede crear una cuadrícula bidimensional que se compone de filas y columnas, y luego se pueden ubicar elementos dentro de esa cuadrícula. Esto permite un mayor control sobre la distribución de los elementos y su comportamiento en diferentes tamaños de pantalla. Con la ayuda de las funciones de Grid en CSS, se pueden crear diseños modernos y personalizados para cualquier sitio web.
A continuación te dejamos un archivo descargable de regalo desde CSS-TRICKS, es un resúmen gráfico y bien ejemplificado de la forma en que podés aplicar Grids, lo podés descargar haciendo click aqui.
Pseudo-clases y Pseudo-elementos
Las pseudo-clases son palabras clave que se agregan a los selectores de CSS para seleccionar y estilizar elementos en función de su estado o relación con otros elementos del documento.
Los pseudo-elementos, por otro lado, son selectores que permiten estilizar partes específicas de un elemento, como la primera letra o línea de un párrafo, o incluso generar contenido adicional.
Pseudo-clases
Pseudo-elementos
Animaciones en CSS
Son una forma de crear efectos visuales en una página web mediante la transición suave de una propiedad CSS a otra. Estas animaciones se definen utilizando la propiedad «animation» en CSS y se pueden aplicar a elementos HTML para lograr una amplia variedad de efectos. Las animaciones en CSS pueden ser personalizadas mediante la configuración de la duración, la dirección, la velocidad, el retraso y otros parámetros de la animación. Además, es posible controlar cuándo se activa la animación mediante el uso de eventos del usuario o de la página.