cssadvanced235 snippets

CSS3: La Guía Visual

No más adivinanzas con display o position. Domina Flexbox, Grid y layouts responsivos visualmente en segundos.

Secciones12

🎯 Selectores Básicos

16 snippets

Esta sección aborda los fundamentos de la selección de elementos HTML usando CSS, permitiendo aplicar estilos a elementos específicos, grupos de elementos o elementos con identificadores únicos.

Selector de Elemento: Párrafo

Selecciona todos los elementos de párrafo (<p>) en el documento HTML y les aplica el color azul para el texto. Este es el tipo de selector más fundamental, que actúa directamente sobre el nombre de la etiqueta HTML.

css

p { color: blue; }

Selector de Elemento: Título H1

Selecciona todos los elementos de título de nivel 1 (<h1>) en el documento HTML y define el tamaño de la fuente a 2 veces el tamaño de la fuente predeterminado del elemento padre. Útil para estilizar todos los títulos de un determinado nivel de forma consistente.

css

h1 { font-size: 2em; }

Selector de Elemento: División

Selecciona todas las divisiones (<div>) en el documento HTML y aplica un margen de 10 píxeles en los cuatro lados (superior, derecha, inferior, izquierda). Usado para espaciado externo uniforme de todos los bloques div.

css

div { margin: 10px; }

Selector de Elemento: Span

Selecciona todos los elementos span (<span>) y garantiza que se comporten como elementos en línea, ocupando solo el espacio necesario para su contenido. Aunque `inline` es el estándar para `span`, esta declaración puede usarse para reforzar o sobrescribir estilos heredados.

css

span { display: inline; }

Selector de Clase Genérico

Selecciona todos los elementos HTML que poseen el atributo `class="classe"` y define el color del texto a rojo. Los selectores de clase son ideales para aplicar estilos a múltiples elementos no relacionados o para la reutilización de estilos.

css

.classe { color: red; }

Selector de Clase: Botón Primario

Selecciona elementos con la clase `btn-primary` y define el color de fondo a azul. Comúnmente utilizado para estilizar botones principales en interfaces de usuario.

css

.btn-primary { background: blue; }

Selector de Clase: Texto Centrado

Selecciona elementos con la clase `text-center` y centra el texto dentro de ellos. Una clase utilitaria común para la alineación de texto.

css

.text-center { text-align: center; }

Selector de Clase: Elemento Oculto

Selecciona elementos con la clase `hidden` y los elimina completamente del flujo del documento, haciéndolos invisibles y no interactivos. A diferencia de `visibility: hidden;`, `display: none;` no ocupa espacio.

css

.hidden { display: none; }

Selector de ID: Encabezado

Selecciona el elemento HTML que posee el atributo `id="header"` y lo posiciona de forma fija en la viewport. Los selectores de ID deben usarse para elementos únicos en la página.

css

#header { position: fixed; }

Selector de ID: Contenido Principal

Selecciona el elemento con el ID `main-content` y define su ancho máximo a 1200 píxeles. Esto asegura que el contenido principal no exceda un ancho específico, manteniéndolo legible en pantallas grandes.

css

#main-content { max-width: 1200px; }

Selector de ID: Barra Lateral

Selecciona el elemento con el ID `sidebar` y define su ancho a 300 píxeles. Usado para definir dimensiones fijas para componentes de layout específicos.

css

#sidebar { width: 300px; }

Selector de ID: Pie de Página

Selecciona el elemento con el ID `footer` y aplica un margen superior de 50 píxeles. Esto crea un espaciado entre el pie de página y el contenido encima de él.

css

#footer { margin-top: 50px; }

Selector Combinado: Div con Clase

Selecciona solo los elementos `div` que también poseen la clase `container`, definiendo su ancho al 100%. Este selector combina un selector de elemento con un selector de clase para mayor especificidad.

css

div.container { width: 100%; }

Selector Combinado: Ítem de Lista en Navegación

Selecciona todos los ítems de lista (<li>) que son descendientes de una lista no ordenada (<ul>) con la clase `nav`, haciendo que se comporten como elementos en línea. Comúnmente usado para crear menús de navegación horizontales.

css

ul.nav li { display: inline; }

Selector Combinado: Elemento con Clase dentro de ID

Selecciona el elemento con la clase `logo` que es un descendiente de un elemento con el ID `header`, haciéndolo flotar a la izquierda. Esto es útil para posicionar elementos específicos dentro de un contenedor identificado.

css

#header .logo { float: left; }

Selector Combinado: Título H2 en Artículo

Selecciona todos los títulos de nivel 2 (<h2>) que son descendientes de un elemento `<article>` con la clase `post`, definiendo su color a un tono de gris oscuro. Ayuda a estilizar títulos dentro de un contexto específico de contenido.

css

article.post h2 { color: #333; }

📦 Box Model

20 snippets

El Box Model es un concepto fundamental en CSS que describe cómo los elementos HTML se renderizan como cajas rectangulares. Cada caja tiene contenido, padding, border y margin.

Ancho del Elemento

Define el ancho explícito del contenido del elemento a 300 píxeles. Esta propiedad controla la dimensión horizontal del elemento.

css

width: 300px;

Altura del Elemento

Define la altura explícita del contenido del elemento a 200 píxeles. Esta propiedad controla la dimensión vertical del elemento.

css

height: 200px;

Ancho Máximo

Define el ancho máximo que el elemento puede ocupar para el 100% de su contenedor padre. Esto es crucial para hacer que elementos, como imágenes, sean responsivos, garantizando que no se desborden en pantallas más pequeñas.

css

max-width: 100%;

Altura Mínima

Define la altura mínima del elemento al 100% de la altura de la viewport (altura visible de la ventana del navegador). Garantiza que el elemento ocupe al menos la altura total de la pantalla, útil para diseños de página completa.

css

min-height: 100vh;

Box Sizing: Border-Box

Cambia el Box Model predeterminado, haciendo que el ancho y la altura de un elemento incluyan el padding y el borde, pero no el margen. Esto simplifica el cálculo de dimensiones y el diseño, ya que el tamaño total del elemento permanece consistente independientemente del padding o borde añadidos.

css

box-sizing: border-box;

Margen en Todos los Lados

Aplica un margen de 10 píxeles en los cuatro lados (superior, derecha, inferior, izquierda) del elemento. El margen crea espacio externo entre el elemento y otros elementos adyacentes.

css

margin: 10px;

Margen Vertical y Horizontal

Aplica un margen de 10 píxeles en la parte superior e inferior, y 20 píxeles en la izquierda y derecha del elemento. Esta es una sintaxis abreviada para definir márgenes verticales y horizontales de forma diferente.

css

margin: 10px 20px;

Margen Individual por Lado

Define márgenes específicas para cada lado del elemento, en el orden: superior (10px), derecha (15px), inferior (20px) e izquierda (25px). Permite un control granular sobre el espaciado externo.

css

margin: 10px 15px 20px 25px;

Margen Solo en la Parte Superior

Aplica un margen de 20 píxeles exclusivamente en la parte superior del elemento, sin afectar los otros lados. Útil para crear espaciado vertical específico.

css

margin-top: 20px;

Centrar Horizontalmente

Define el margen superior e inferior como 0 y los márgenes laterales como "auto". Para elementos de bloque con un ancho definido, esto los centra horizontalmente dentro de su contenedor padre.

css

margin: 0 auto;

Padding en Todos los Lados

Aplica un relleno (padding) de 15 píxeles en los cuatro lados del contenido del elemento. El padding crea espacio interno entre el contenido y el borde del elemento.

css

padding: 15px;

Padding Vertical y Horizontal

Aplica un padding de 10 píxeles en la parte superior e inferior, y 20 píxeles en la izquierda y derecha del elemento. Sintaxis abreviada para definir padding vertical y horizontal de forma diferente.

css

padding: 10px 20px;

Padding Individual por Lado

Define padding específicos para cada lado del elemento, en el orden: superior (5px), derecha (10px), inferior (15px) e izquierda (20px). Permite un control granular sobre el espaciado interno.

css

padding: 5px 10px 15px 20px;

Padding Solo a la Izquierda

Aplica un padding de 30 píxeles exclusivamente en la parte izquierda del elemento, sin afectar los otros lados. Útil para crear espaciado interno específico.

css

padding-left: 30px;

Padding con Unidad Relativa

Aplica un padding de 1 "em" en todos los lados. La unidad `em` es relativa al tamaño de la fuente del propio elemento, haciendo que el espaciado sea escalable con el texto.

css

padding: 1em;

Borde Completo

Define un borde de 1 píxel de ancho, estilo sólido y color gris claro (`#ccc`) en los cuatro lados del elemento. Esta es una propiedad abreviada para `border-width`, `border-style` y `border-color`.

css

border: 1px solid #ccc;

Bordes Redondeados

Aplica un radio de 5 píxeles a las esquinas del elemento, haciéndolas redondeadas. Un valor mayor resulta en esquinas más redondeadas.

css

border-radius: 5px;

Forma Circular/Ovalada

Aplica un radio del 50% a las esquinas del elemento. Si el elemento es cuadrado, se convertirá en un círculo perfecto; si es rectangular, se convertirá en una forma ovalada.

css

border-radius: 50%;

Borde Superior Estilizado

Define un borde de 2 píxeles de ancho, estilo discontinuo (`dashed`) y color rojo solo en la parte superior del elemento. Permite estilizar bordes individuales de forma independiente.

css

border-top: 2px dashed red;

Eliminar Borde

Elimina completamente cualquier borde existente en el elemento. Es una forma concisa de asegurar que un elemento no tenga bordes.

css

border: none;

📝 Tipografía

20 snippets

Esta sección detalla las propiedades CSS para controlar la apariencia del texto y las fuentes, incluyendo familia, tamaño, peso, estilo, decoración, alineación y espaciado.

Familia de Fuentes Predeterminada

Define la familia de fuentes para el texto. El navegador intentará usar "Arial" primero; si no está disponible, usará cualquier fuente genérica "sans-serif" (sin serifa). Es una buena práctica proporcionar fuentes de respaldo.

css

font-family: Arial, sans-serif;

Familia de Fuentes con Espacios

Define la familia de fuentes, usando comillas para nombres de fuentes que contienen espacios, como "Helvetica Neue". Si la primera no está disponible, "Helvetica" se usará como respaldo.

css

font-family: "Helvetica Neue", Helvetica;

Fuente Serif

Define la familia de fuentes a una fuente con serifa, como "Times New Roman". Las fuentes serifadas se usan tradicionalmente para textos largos en impresión.

css

font-family: "Times New Roman", serif;

Fuente Monoespaciada

Define la familia de fuentes a una fuente monoespaciada, como "Courier New". Las fuentes monoespaciadas son aquellas en las que todos los caracteres tienen el mismo ancho, ideal para bloques de código o datos tabulares.

css

font-family: "Courier New", monospace;

Fuentes Alternativas

Define una secuencia de fuentes alternativas. El navegador intentará "Georgia", luego "Times New Roman" y, por último, cualquier fuente genérica "serif" disponible, garantizando compatibilidad.

css

font-family: Georgia, "Times New Roman", serif;

Tamaño de Fuente en Píxeles

Define el tamaño de la fuente a 16 píxeles. Las unidades de píxel proporcionan un control de tamaño fijo y preciso, pero pueden ser menos flexibles para la responsividad.

css

font-size: 16px;

Tamaño de Fuente Relativo al Padre (em)

Define el tamaño de la fuente a 1 "em", que es equivalente al tamaño de la fuente del elemento padre. Esto permite que el texto se adapte proporcionalmente a su contenedor.

css

font-size: 1em;

Tamaño de Fuente Relativo a la Raíz (rem)

Define el tamaño de la fuente a 1 "rem", que es equivalente al tamaño de la fuente del elemento raíz (<html>). `rem` es ideal para mantener una escala de fuente consistente en todo el documento, facilitando la responsividad.

css

font-size: 1rem;

Peso de la Fuente: Negrita

Define el peso de la fuente a negrita. Puede usarse para destacar texto importante. Otros valores incluyen `normal`, `lighter`, `bolder` o valores numéricos de 100 a 900.

css

font-weight: bold;

Peso de la Fuente Numérico

Define el peso de la fuente usando un valor numérico (entre 100 y 900, en múltiplos de 100). `300` generalmente corresponde a una fuente "light" o "fina", si está disponible en la familia de fuentes.

css

font-weight: 300;

Estilo de la Fuente: Itálica

Define el estilo de la fuente a itálica. Usado para enfatizar texto o para estilos tipográficos específicos. Otros valores incluyen `normal` y `oblique`.

css

font-style: italic;

Decoración de Texto: Subrayado

Aplica una línea debajo del texto, es decir, lo subraya. Comúnmente usado para enlaces, pero puede aplicarse a cualquier texto.

css

text-decoration: underline;

Eliminar Decoración de Texto

Elimina cualquier decoración de texto predeterminada, como el subrayado en enlaces (<a>). Esencial para estilizar enlaces de forma personalizada.

css

text-decoration: none;

Transformación de Texto: Mayúsculas

Convierte todo el texto del elemento a letras mayúsculas, sin alterar el contenido original en el HTML. Útil para títulos o destaque visual.

css

text-transform: uppercase;

Transformación de Texto: Capitalizar

Convierte la primera letra de cada palabra en el texto del elemento a mayúscula. Útil para títulos o nombres propios.

css

text-transform: capitalize;

Alineación de Texto: Centrado

Centra horizontalmente el texto dentro de su elemento contenedor. Se aplica a elementos de bloque o celdas de tabla.

css

text-align: center;

Alineación de Texto: Justificado

Distribuye el texto uniformemente entre los márgenes izquierdo y derecho, añadiendo espacio extra entre las palabras según sea necesario. Comúnmente usado en bloques de texto largos para una apariencia formal.

css

text-align: justify;

Altura de Línea

Define la altura de línea a 1.5 veces el tamaño de la fuente del elemento. Un `line-height` sin unidad es el más recomendado, ya que escala proporcionalmente con el `font-size`, mejorando la legibilidad.

css

line-height: 1.5;

Espaciado Entre Letras

Añade un espaciado extra de 1 píxel entre los caracteres del texto. Puede usarse para ajustar la densidad visual del texto.

css

letter-spacing: 1px;

Espaciado Entre Palabras

Añade un espaciado extra de 2 píxeles entre las palabras del texto. Puede usarse para ajustar la legibilidad de frases.

css

word-spacing: 2px;

🎨 Colores y Fondos

20 snippets

Esta sección explora las propiedades CSS para definir colores de texto, colores e imágenes de fondo, así como gradientes y otros efectos visuales.

Color Hexadecimal

Define el color del texto usando un código hexadecimal de 6 dígitos (o 3), donde cada par representa los valores de rojo, verde y azul (RGB). `#333333` es un tono de gris oscuro.

css

color: #333333;

Color RGB

Define el color del texto usando el modelo RGB (Red, Green, Blue), con valores de 0 a 255 para cada componente. `rgb(51, 51, 51)` es equivalente a `#333333`.

css

color: rgb(51, 51, 51);

Color RGBA (con Transparencia)

Define el color del texto usando el modelo RGBA, que incluye un canal alfa (transparencia) con valor de 0 (totalmente transparente) a 1 (totalmente opaco). `0.8` significa 80% de opacidad.

css

color: rgba(51, 51, 51, 0.8);

Color HSL

Define el color del texto usando el modelo HSL (Hue, Saturation, Lightness). `Hue` (matiz) es un grado en el círculo de colores (0-360), `Saturation` (saturación) es la intensidad del color (0-100%), y `Lightness` (luminosidad) es el brillo (0-100%). `hsl(0, 0%, 20%)` es un gris oscuro.

css

color: hsl(0, 0%, 20%);

Heredar Color del Padre

Hace que el elemento herede el color del texto de su elemento padre. Útil para mantener la consistencia de colores en elementos anidados.

css

color: inherit;

Color de Fondo Sólido

Define un color de fondo sólido para el elemento usando un código hexadecimal. `#f5f5f5` es un tono de gris muy claro, casi blanco.

css

background-color: #f5f5f5;

Gradiente Lineal de Fondo

Aplica un gradiente lineal como color de fondo, que transita de un color a otro en una dirección específica. `to right` indica que el gradiente va de izquierda a derecha, con los colores `#ff7e5f` (naranja rojizo) y `#feb47b` (melocotón).

css

background: linear-gradient(to right, #ff7e5f, #feb47b);

Gradiente Radial de Fondo

Aplica un gradiente radial como color de fondo, que se extiende a partir de un punto central. `circle` define la forma del gradiente, transicionando de `#ff7e5f` en el centro a `#feb47b` en los bordes.

css

background: radial-gradient(circle, #ff7e5f, #feb47b);

Imagen de Fondo

Define una imagen como fondo del elemento. La ruta de la imagen se especifica dentro de `url()`. Por defecto, la imagen se repetirá para cubrir todo el elemento.

css

background: url("image.jpg");

Tamaño de la Imagen de Fondo: Cover

Ajusta el tamaño de la imagen de fondo para que cubra completamente el área del elemento, recortando las partes que exceden. Mantiene la proporción de la imagen.

css

background-size: cover;

No Repetir Imagen de Fondo

Impide que la imagen de fondo se repita. Si la imagen es más pequeña que el elemento, aparecerá solo una vez.

css

background-repeat: no-repeat;

Posición de la Imagen de Fondo: Centro

Posiciona la imagen de fondo en el centro horizontal y vertical del elemento. Puede combinarse con `background-repeat: no-repeat;` para mostrar una única imagen centralizada.

css

background-position: center center;

Fondo Fijo al Desplazarse

Hace que la imagen de fondo permanezca fija en la viewport mientras el resto del contenido de la página se desplaza. Crea un efecto de paralaje.

css

background-attachment: fixed;

Modo de Mezcla de Fondos

Define cómo las imágenes de fondo (o colores) de un elemento deben mezclarse entre sí. `multiply` multiplica los colores de fondo, resultando en colores más oscuros.

css

background-blend-mode: multiply;

Transparencia del Elemento

Define el nivel de opacidad (transparencia) de todo el elemento, incluyendo su contenido. Un valor de `0.8` significa 80% opaco (20% transparente).

css

opacity: 0.8;

Color Actual del Elemento

Define el color de un elemento al valor actual de la propiedad `color` del propio elemento. Útil para elementos como bordes o rellenos de SVG que deben coincidir con el color del texto.

css

color: currentColor;

Color de Relleno (SVG)

Define el color de relleno de una forma SVG. Se aplica a elementos SVG como `<path>`, `<circle>`, `<rect>`, etc., rellenando su interior con el color especificado.

css

fill: #333;

Color del Borde (SVG)

Define el color del borde (contorno) de una forma SVG. Se aplica a elementos SVG, dibujando un contorno con el color especificado.

css

stroke: #666;

Filtro: Ajuste de Brillo

Aplica un filtro de brillo al elemento. Un valor de `1.2` (o 120%) aumenta el brillo en un 20%. `1` es el valor normal, `0` es totalmente negro.

css

filter: brightness(1.2);

Filtro: Saturación

Aplica un filtro de saturación al elemento. Un valor de `1.5` (o 150%) aumenta la saturación de los colores en un 50%, haciéndolos más vibrantes. `1` es el valor normal, `0` es totalmente desaturado (escala de grises).

css

filter: saturate(1.5);

📐 Layout y Posicionamiento

21 snippets

Propiedades CSS esenciales para controlar el layout y posicionamiento de elementos en la página, incluyendo tipo de display, posicionamiento relativo/absoluto/fijo y técnicas de float.

Display: Bloque

Hace que el elemento se comporte como un elemento de bloque. Ocupa todo el ancho disponible, fuerza un salto de línea antes y después de él y permite la aplicación de `width`, `height`, `margin` y `padding`.

css

display: block;

Display: En Línea

Hace que el elemento se comporte como un elemento en línea. Ocupa solo el ancho necesario para su contenido, no fuerza saltos de línea e ignora `width`, `height` y `margin-top`/`margin-bottom`.

css

display: inline;

Display: En Línea con Bloque

Combina características de `inline` y `block`. El elemento se comporta como `inline` (no fuerza salto de línea), pero acepta `width`, `height`, `margin` y `padding` como un elemento `block`.

css

display: inline-block;

Display: Ocultar Elemento

Elimina completamente el elemento del flujo del documento. No se renderiza, no ocupa espacio y no es interactivo. Diferente de `visibility: hidden;`, que solo oculta el elemento visualmente, pero mantiene su espacio.

css

display: none;

Display: Contenedor Flexbox

Transforma el elemento en un contenedor flexible, activando el contexto Flexbox para sus hijos directos. Permite crear layouts de una dimensión (fila o columna) de forma eficiente y responsiva.

css

display: flex;

Display: Contenedor Grid

Transforma el elemento en un contenedor de cuadrícula, activando el contexto CSS Grid para sus hijos directos. Permite crear layouts bidimensionales (filas y columnas) complejos y responsivos.

css

display: grid;

Position: Estático (Predeterminado)

Es el valor predeterminado para todos los elementos. Elementos con `position: static;` se posicionan de acuerdo con el flujo normal del documento y las propiedades `top`, `right`, `bottom`, `left` y `z-index` no tienen efecto.

css

position: static;

Position: Relativo

El elemento se posiciona de acuerdo con el flujo normal del documento, pero puede ser desplazado de su posición original usando `top`, `right`, `bottom` y `left`. El espacio original del elemento se mantiene en el diseño.

css

position: relative;

Position: Absoluto

El elemento es removido del flujo normal del documento y posicionado en relación a su ancestro posicionado más cercano (no `static`). Si no se encuentra ningún ancestro posicionado, se posiciona en relación al `<html>`. Las propiedades `top`, `right`, `bottom` y `left` controlan su desplazamiento.

css

position: absolute;

Position: Fijo

El elemento se elimina del flujo normal del documento y se posiciona en relación con la viewport (ventana del navegador). Permanece en la misma posición incluso cuando la página se desplaza, ideal para encabezados o menús fijos.

css

position: fixed;

Position: Sticky

El elemento se posiciona de forma relativa hasta que su posición de desplazamiento alcanza un límite especificado (definido por `top`, `right`, `bottom` o `left`), después de lo cual se vuelve fijo en la pantalla. Útil para elementos que se "pegan" al desplazarse.

css

position: sticky;

Coordenada: Distancia desde la Parte Superior

Define la distancia del elemento con respecto al borde superior de su contenedor posicionado (para `absolute`, `fixed`, `relative`, `sticky`). `0` lo alinea perfectamente a la parte superior.

css

top: 0;

Coordenada: Distancia desde la Derecha

Define la distancia del elemento con respecto al borde derecho de su contenedor posicionado. `0` lo alinea perfectamente a la derecha.

css

right: 0;

Coordenada: Distancia de la Base

Define la distancia del elemento en relación con el borde inferior de su contenedor posicionado. `0` lo alinea perfectamente a la base.

css

bottom: 0;

Coordenada: Distancia desde la Izquierda

Define la distancia del elemento con respecto al borde izquierdo de su contenedor posicionado. `0` lo alinea perfectamente a la izquierda.

css

left: 0;

Z-Index: Apilamiento de Elementos

Controla el orden de apilamiento de elementos posicionados. Elementos con un `z-index` mayor aparecerán encima de elementos con un `z-index` menor. Funciona solo en elementos con `position` diferente de `static`.

css

z-index: 100;

Float: Flotar a la Izquierda

Remueve el elemento del flujo normal del documento y lo posiciona a la izquierda de su contenedor, permitiendo que otros contenidos fluyan a su alrededor. Usado históricamente para diseños de múltiples columnas.

css

float: left;

Float: Flotar a la Derecha

Elimina el elemento del flujo normal del documento y lo posiciona a la derecha de su contenedor, permitiendo que otros contenidos fluyan a su alrededor.

css

float: right;

Clear: Limpiar Flotaciones (Ambos)

Impide que el elemento se posicione junto a elementos flotantes anteriores, tanto a la izquierda como a la derecha. Fuerza al elemento a comenzar en una nueva línea debajo de todos los elementos flotantes.

css

clear: both;

Clear: Limpiar Flotación (Izquierda)

Impide que el elemento se posicione junto a elementos flotantes a la izquierda. Fuerza al elemento a comenzar en una nueva línea debajo de cualquier elemento flotante a la izquierda.

css

clear: left;

Overflow: Hidden (Clearfix)

Cuando se aplica a un contenedor padre, esta propiedad puede "contener" los elementos flotantes dentro de él, evitando que el contenedor colapse. Es una técnica común de "clearfix" para asegurar que el padre envuelva correctamente a sus hijos flotantes.

css

overflow: hidden;

🔧 Flexbox

24 snippets

Flexbox es un módulo de layout unidimensional de CSS diseñado para distribuir espacio entre los items de un contenedor y alinearlos. Extremadamente eficaz para layouts flexibles y responsivos.

Crear Contenedor Flex

Transforma el elemento en un contenedor flexible, activando el contexto Flexbox para sus hijos directos (ítems flex). Los ítems flex se organizarán en una única línea por defecto.

css

display: flex;

Dirección de los Ítems: Fila (Predeterminado)

Define la dirección principal de los ítems flex a horizontal (de izquierda a derecha en idiomas LTR). Este es el comportamiento predeterminado de Flexbox.

css

flex-direction: row;

Dirección de los Ítems: Columna

Define la dirección principal de los ítems flex a vertical (de arriba a abajo). Los ítems se apilarán uno debajo del otro.

css

flex-direction: column;

Permitir Salto de Línea

Permite que los ítems flex salten a la siguiente línea (o columna, dependiendo de `flex-direction`) si no hay suficiente espacio en el contenedor. El valor predeterminado es `nowrap`, que intenta mantener todos los ítems en una sola línea/columna.

css

flex-wrap: wrap;

Alinhamento Horizontal (Eixo Principal)

Alinha os itens flex ao longo do eixo principal (horizontal por padrão) do contêiner flex. `center` centraliza os itens. Outras opções incluem `flex-start`, `flex-end`, `space-between`, `space-around`, `space-evenly`.

css

justify-content: center;

Alineación Vertical (Eje Cruzado)

Alinea los ítems flex a lo largo del eje cruzado (vertical por defecto) del contenedor flex. `center` centra los ítems verticalmente. Otras opciones incluyen `flex-start`, `flex-end`, `stretch`, `baseline`.

css

align-items: center;

Justify Content: Alinear al Inicio

Alinea los ítems flex al inicio del eje principal del contenedor flex. En `row`, los ítems se alinean a la izquierda.

css

justify-content: flex-start;

Justify Content: Alinear al Final

Alinea los ítems flex al final del eje principal del contenedor flex. En `row`, los ítems se alinean a la derecha.

css

justify-content: flex-end;

Justify Content: Centrar

Centra los ítems flex a lo largo del eje principal del contenedor flex.

css

justify-content: center;

Justify Content: Espaciar Entre Ítems

Distribuye el espacio extra uniformemente entre los ítems flex. El primer ítem se alinea al inicio y el último al final del contenedor.

css

justify-content: space-between;

Justify Content: Espaciar Alrededor de los Ítems

Distribuye el espacio extra uniformemente alrededor de los ítems flex, resultando en la mitad del espacio en los extremos del contenedor y espacio total entre los ítems.

css

justify-content: space-around;

Justify Content: Espaciado Igual

Distribuye el espacio extra de forma que el espacio entre cada par de ítems y el espacio entre los ítems y los bordes del contenedor sean iguales.

css

justify-content: space-evenly;

Align Items: Estirar para Rellenar

Estira los ítems flex para rellenar la altura total del contenedor flex a lo largo del eje cruzado, siempre que no tengan una altura explícita definida. Este es el comportamiento predeterminado.

css

align-items: stretch;

Align Items: Alinear al Topo

Alinea los ítems flex al inicio del eje cruzado del contenedor flex. En `row`, los ítems se alinean al topo.

css

align-items: flex-start;

Align Items: Alinear a la Base

Alinea los ítems flex al final del eje cruzado del contenedor flex. En `row`, los ítems se alinean a la base.

css

align-items: flex-end;

Align Items: Centrar Verticalmente

Centra los ítems flex a lo largo del eje cruzado del contenedor flex. En `row`, los ítems se centran verticalmente.

css

align-items: center;

Align Items: Alinear en la Línea Base

Alinea los ítems flex de forma que sus líneas base de texto queden alineadas a lo largo del eje cruzado.

css

align-items: baseline;

Align Content: Alinear Líneas (con Wrap)

Cuando hay múltiples líneas de ítems flex (debido a `flex-wrap: wrap;`), esta propiedad alinea esas líneas como un grupo dentro del contenedor flex. `center` centraliza todas las líneas verticalmente. Similar a `justify-content` pero para el eje cruzado y múltiples líneas.

css

align-content: center;

Ítem Flexible: Crecimiento Igual

Propiedad abreviada para `flex-grow: 1; flex-shrink: 1; flex-basis: 0%;`. Hace que el ítem flex crezca y se encoja para llenar el espacio disponible igualmente entre los otros ítems flexibles. Cada ítem con `flex: 1;` tendrá el mismo tamaño relativo.

css

flex: 1;

Elemento Flexible: Crecimiento Proporcional

Propiedad abreviada que hace que el elemento flex crezca el doble que los elementos con `flex: 1;`. `flex-grow: 2; flex-shrink: 1; flex-basis: 0%;`.

css

flex: 2;

Capacidad de Crecer

Define la capacidad del elemento flex de crecer para ocupar el espacio extra disponible en el contenedor. Un valor de `1` significa que ocupará una parte proporcional del espacio extra.

css

flex-grow: 1;

No Encoger

Define la capacidad del elemento flex de encogerse cuando no hay suficiente espacio en el contenedor. Un valor de `0` impide que el elemento se encoja por debajo de su `flex-basis` (o contenido mínimo).

css

flex-shrink: 0;

Tamaño Base del Elemento

Define el tamaño inicial de un elemento flex antes de que se distribuya cualquier espacio extra. Puede ser un valor fijo como `200px` o un porcentaje.

css

flex-basis: 200px;

Alineación Individual del Elemento

Permite sobrescribir la propiedad `align-items` del contenedor flex para un elemento flex individual. `center` centra este elemento específico verticalmente, independientemente de cómo estén alineados los otros elementos.

css

align-self: center;

🔲 CSS Grid

21 snippets

CSS Grid Layout es un sistema de layout bidimensional que permite organizar elementos en filas y columnas, ofreciendo un control robusto sobre posicionamiento y dimensionamiento.

Crear Contenedor Grid

Transforma el elemento en un contenedor de cuadrícula, activando el contexto CSS Grid para sus hijos directos (ítems de cuadrícula). Permite definir filas y columnas explícitas para el diseño.

css

display: grid;

Definir 3 Columnas Iguales

Define tres columnas en la cuadrícula, donde `1fr` significa una fracción del espacio disponible. Cada columna ocupará una parte igual del espacio restante del contenedor.

css

grid-template-columns: 1fr 1fr 1fr;

Columnas Fija y Flexible

Define dos columnas: la primera con un ancho fijo de 200 píxeles y la segunda ocupando el resto del espacio disponible (`1fr`).

css

grid-template-columns: 200px 1fr;

Repetir Columnas

Una función abreviada que crea tres columnas, cada una ocupando una fracción igual del espacio disponible. Equivalente a `1fr 1fr 1fr`.

css

grid-template-columns: repeat(3, 1fr);

Definir Filas de la Cuadrícula

Define tres filas en la cuadrícula: la primera y la última fila se ajustan automáticamente al contenido (`auto`), y la fila del medio ocupa el resto del espacio disponible (`1fr`).

css

grid-template-rows: auto 1fr auto;

Espaciado Entre Ítems (Gap)

Define el espaciado (gutter) de 20 píxeles entre las filas y columnas de la cuadrícula. Es una propiedad abreviada para `grid-row-gap` y `grid-column-gap`.

css

gap: 20px;

Definir Áreas de la Cuadrícula

Inicia la definición de áreas nombradas dentro del layout de la cuadrícula. Permite crear layouts visuales de forma intuitiva, asignando nombres a bloques de celdas.

css

grid-template-areas:

Área de Grid: Primera Fila (Encabezado)

Define la primera fila del grid como un área llamada "header" que se extiende por tres columnas. Las comillas indican una fila, y los nombres dentro de ellas representan las celdas.

css

  "header header header"

Área de Grid: Segunda Fila (Sidebar y Main)

Define la segunda fila del grid con tres celdas: la primera es una "sidebar" y las dos siguientes son "main".

css

  "sidebar main main"

Área de la Cuadrícula: Tercera Fila (Pie de Página)

Define la tercera y última fila de la cuadrícula como un área llamada "footer" que se extiende por tres columnas. El punto y coma finaliza la declaración de `grid-template-areas`.

css

  "footer footer footer";

Asignar Elemento a un Área

Asigna un ítem de grid a un área nombrada previamente definida en `grid-template-areas`. El elemento con esta propiedad ocupará todas las celdas del área "header".

css

grid-area: header;

Ocupar Columnas Específicas

Hace que un ítem de grid comience en la línea de cuadrícula 1 y termine en la línea de cuadrícula 3, ocupando, por lo tanto, las columnas 1 y 2. El número después de la barra es exclusivo.

css

grid-column: 1 / 3;

Ocupar Filas Específicas

Hace que un ítem de grid comience en la línea de cuadrícula 2 y termine en la línea de cuadrícula 4, ocupando, por lo tanto, las filas 2 y 3.

css

grid-row: 2 / 4;

Ocupar Múltiples Columnas

Hace que un ítem de grid ocupe dos columnas a partir de su posición inicial. `span` es útil cuando la posición inicial no es fija.

css

grid-column: span 2;

Ocupar Múltiples Filas

Hace que un ítem de grid ocupe tres filas a partir de su posición inicial.

css

grid-row: span 3;

Posición Completa del Ítem

Propiedad abreviada para definir la posición de un ítem de grid usando `grid-row-start`, `grid-column-start`, `grid-row-end` y `grid-column-end`. En este caso, el ítem comienza en la fila 1, columna 1, y se extiende hasta la fila 3 (exclusivo) y columna 4 (exclusivo).

css

grid-area: 1 / 1 / 3 / 4;

Alinear Ítems Horizontalmente

Alinea el contenido de cada ítem de grid individualmente a lo largo del eje de la fila (horizontal) dentro de su propia celda de grid. `center` centra el contenido horizontalmente.

css

justify-items: center;

Alinear Ítems Verticalmente

Alinea el contenido de cada ítem de grid individualmente a lo largo del eje de la columna (vertical) dentro de su propia celda de grid. `center` centraliza el contenido verticalmente.

css

align-items: center;

Alinear Grid Horizontalmente

Alinea el grid completo (las pistas de columna) a lo largo del eje de la fila (horizontal) dentro del contenedor de grid, cuando hay espacio extra. `center` centraliza el grid.

css

justify-content: center;

Alinear Grid Verticalmente

Alinea la cuadrícula completa (las pistas de fila) a lo largo del eje de la columna (vertical) dentro del contenedor de cuadrícula, cuando hay espacio extra. `center` centra la cuadrícula.

css

align-content: center;

Alinear Elementos y Contenido (Ambos)

Propiedad abreviada que define `justify-items` y `align-items` simultáneamente. `center` centra el contenido de cada elemento de cuadrícula tanto horizontal como verticalmente dentro de su celda.

css

place-items: center;

📱 Responsividad

16 snippets

Técnicas y propiedades CSS para crear layouts que se adaptan a diferentes tamaños de pantalla y dispositivos. Crucial para una experiencia de usuario consistente.

Media Query: Dispositivos Móviles

Inicia un bloque de estilos que se aplicará solamente cuando el ancho de la viewport sea igual o menor que 768 píxeles. Esto se usa comúnmente para dirigir estilos específicos a tablets y smartphones.

css

@media (max-width: 768px) {

Ajuste para Móvil

Dentro de una media query para dispositivos móviles, define el ancho de un elemento con la clase `container` al 100%. Esto garantiza que el contenedor ocupe todo el ancho disponible en pantallas más pequeñas.

css

  .container { width: 100%; }

Cerrar Media Query

Cierra el bloque de estilos de la media query, indicando el fin de las reglas CSS condicionales.

css

Media Query: Dispositivos Más Grandes

Inicia un bloque de estilos que se aplicará solamente cuando el ancho de la viewport sea igual o mayor que 769 píxeles. Esto es comúnmente usado para dirigir estilos específicos a escritorios y pantallas más grandes.

css

@media (min-width: 769px) {

Ajuste para Escritorio

Dentro de una media query para dispositivos más grandes, define el ancho de un elemento con la clase `container` a 750 píxeles. Esto puede usarse para limitar el ancho del contenido en pantallas grandes.

css

  .container { width: 750px; }

Cerrar Media Query

Cierra el bloque de estilos de la media query, indicando el fin de las reglas CSS condicionales.

css

Imagen Responsiva

Define el ancho máximo de una imagen al 100% de su contenedor. Combinado con `height: auto;`, esto asegura que la imagen nunca exceda el ancho de su padre y mantenga su proporción original al redimensionar.

css

max-width: 100%;

Mantener Proporción de Imagen

Define la altura de un elemento (generalmente una imagen) para ajustarse automáticamente, manteniendo su proporción original en relación con el ancho. Esencial para imágenes responsivas.

css

height: auto;

Fuente Fluida (calc + vw)

Define el tamaño de la fuente usando la función `calc()` para crear un tamaño fluido. El tamaño base es 16 píxeles, y `0.5vw` (0.5% del ancho de la viewport) se añade, haciendo que la fuente aumente o disminuya ligeramente con el tamaño de la pantalla.

css

font-size: calc(16px + 0.5vw);

Ancho de la Viewport

Define el ancho del elemento al 100% del ancho de la viewport (ventana visible del navegador). Útil para elementos que deben ocupar todo el ancho de la pantalla.

css

width: 100vw;

Altura del Viewport

Define la altura del elemento al 100% de la altura del viewport (ventana visible del navegador). Útil para crear secciones de página completa o layouts "hero".

css

height: 100vh;

Ancho Relativo al Viewport

Define el ancho del elemento al 50% del ancho del viewport. Las unidades `vw` y `vh` son ideales para crear elementos que escalan directamente con el tamaño de la pantalla.

css

width: 50vw;

Altura Relativa al Viewport

Define la altura del elemento al 100% de la altura del viewport. Garantiza que el elemento ocupe la altura total de la pantalla.

css

height: 100vh;

Tamaño de Fuente Relativo a la Viewport

Define el tamaño de la fuente al 4% del ancho de la viewport. Esto hace que el texto aumente o disminuya de tamaño de forma fluida conforme el ancho de la pantalla cambia.

css

font-size: 4vw;

Margen Relativa a la Viewport

Define un margen del 2% de la altura de la viewport en todos los lados del elemento. Permite que el espaciado vertical se adapte al tamaño de la pantalla.

css

margin: 2vh;

Ancho Mínimo

Define el ancho mínimo que el elemento puede tener, incluso si la viewport es menor. Esto evita que el contenido se vuelva ilegible en pantallas muy pequeñas, forzando un desplazamiento horizontal si es necesario.

css

min-width: 320px;

✨ Animaciones y Transiciones

20 snippets

Herramientas CSS para añadir movimiento e interactividad, incluyendo transiciones suaves, transformaciones 2D/3D y animaciones basadas en keyframes.

Transición Suave (Abreviada)

Aplica una transición suave a todas las propiedades CSS que cambian de valor. La transición durará 0.3 segundos y usará la función de temporización `ease` (inicia y termina lentamente).

css

transition: all 0.3s ease;

Transición de Propiedad Específica

Aplica una transición de 0.5 segundos con temporización `linear` (velocidad constante) solo para la propiedad `color`. Otras propiedades cambiarán instantáneamente.

css

transition: color 0.5s linear;

Transición con Curva de Animación Personalizada

Aplica una transición a la propiedad `transform` con una duración de 0.3 segundos y una función de temporización `cubic-bezier` personalizada. `cubic-bezier` permite crear curvas de aceleración y desaceleración complejas para transiciones más expresivas.

css

transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);

Retraso en la Transición

Define un retraso de 0.2 segundos antes de que la transición comience a ejecutarse. El elemento permanecerá en el estado inicial durante ese período.

css

transition-delay: 0.2s;

Duración de la Transición

Define la duración total de la transición a 0.5 segundos. Controla el tiempo que tarda la propiedad en cambiar de su estado inicial al final.

css

transition-duration: 0.5s;

Transformación 2D: Mover Horizontalmente

Mueve el elemento 50 píxeles a la derecha a lo largo del eje X. Valores negativos mueven a la izquierda.

css

transform: translateX(50px);

Transformación 2D: Mover Verticalmente

Mueve el elemento 20 píxeles hacia abajo a lo largo del eje Y. Valores negativos mueven hacia arriba.

css

transform: translateY(20px);

Transformación 2D: Rotar

Rota el elemento 45 grados en el sentido de las agujas del reloj alrededor de su punto de origen (centro por defecto). Valores negativos rotan en sentido antihorario.

css

transform: rotate(45deg);

Transformación 2D: Escalar (Aumentar Tamaño)

Aumenta el tamaño del elemento en un 20% (1.2 veces su tamaño original) en ambos ejes X e Y. `scale(x, y)` permite escalar de forma diferente en cada eje.

css

transform: scale(1.2);

Transformación 2D: Inclinar Horizontalmente

Inclina el elemento 15 grados a lo largo del eje X, creando un efecto de distorsión. `skewY()` inclina verticalmente.

css

transform: skewX(15deg);

Transformación 3D: Rotar en el Eje X

Rota el elemento 45 grados alrededor del eje X (horizontal), creando un efecto de inclinación hacia adelante o hacia atrás.

css

transform: rotateX(45deg);

Transformación 3D: Rotar en el Eje Y

Rota el elemento 45 grados alrededor del eje Y (vertical), creando un efecto de giro lateral.

css

transform: rotateY(45deg);

Transformación 3D: Rotar en el Eje Z

Rota el elemento 45 grados alrededor del eje Z (profundidad), lo que es equivalente a `rotate(45deg)` en 2D.

css

transform: rotateZ(45deg);

Perspectiva 3D Combinada

Aplica una perspectiva de 1000 píxeles al elemento antes de rotarlo 45 grados en el eje X. La propiedad `perspective` (aplicada al padre o como una función de `transform`) es crucial para crear la ilusión de profundidad en transformaciones 3D.

css

transform: perspective(1000px) rotateX(45deg);

Mantener Contexto 3D

Aplicada a un elemento padre, esta propiedad garantiza que los hijos 3D del elemento se posicionen en el mismo espacio 3D, en lugar de ser aplanados en el plano 2D. Esencial para crear escenas 3D complejas con múltiples elementos.

css

transform-style: preserve-3d;

Definir Animación Keyframes

Inicia la definición de una animación CSS llamada `slideIn`. Dentro de este bloque, se definen las etapas (keyframes) de la animación usando porcentajes o las palabras clave `from` (0%) y `to` (100%).

css

@keyframes slideIn {

Estado Inicial de la Animación

Define el estado inicial de la animación (0%). En este caso, el elemento comienza al 100% de su ancho fuera de la pantalla a la izquierda.

css

  from { transform: translateX(-100%); }

Estado Final de la Animación

Define el estado final de la animación (100%). En este caso, el elemento termina en su posición original (sin desplazamiento horizontal).

css

  to { transform: translateX(0); }

Cerrar Keyframe

Cierra el bloque de definición de la animación `@keyframes`.

css

Aplicar Animación

Aplica la animación `slideIn` al elemento. La animación tendrá una duración de 0.5 segundos y usará la función de temporización `ease-in-out` (inicia y termina lentamente, acelera en el medio). Esta es una propiedad abreviada que incluye `animation-name`, `animation-duration`, `animation-timing-function`, entre otros.

css

animation: slideIn 0.5s ease-in-out;

🔍 Pseudo-clases y Pseudo-elementos

20 snippets

Pseudo-clases y pseudo-elementos permiten estilizar elementos en estados específicos o partes no representadas por tags HTML explícitas.

Pseudo-clase: Hover

Aplica estilos cuando el cursor del ratón está sobre el elemento. En este ejemplo, el color del texto cambia a azul al pasar el ratón.

css

:hover { color: blue; }

Pseudo-clase: Active

Aplica estilos cuando el elemento está siendo activado (por ejemplo, clicado por un ratón o tocado en un dispositivo touchscreen). En este ejemplo, el elemento se encoge ligeramente al ser activado.

css

:active { transform: scale(0.95); }

Pseudo-clase: Focus

Aplica estilos cuando el elemento (generalmente un campo de formulario o enlace) recibe el foco, ya sea por tabulación o clic. En este ejemplo, se añade un borde azul para indicar el foco.

css

:focus { outline: 2px solid blue; }

Pseudo-clase: Visited

Aplica estilos a enlaces (<a>) que ya han sido visitados por el usuario. Por razones de privacidad, las propiedades que pueden ser alteradas son limitadas (principalmente `color`).

css

:visited { color: purple; }

Pseudo-clase: Enlace

Aplica estilos a enlaces (<a>) que aún no han sido visitados por el usuario. Es el estado inicial de un enlace.

css

:link { color: blue; }

Pseudo-clase Estructural: Primer Hijo

Selecciona el primer elemento hijo de su padre. En este ejemplo, el primer hijo de cualquier elemento padre tendrá el texto en negrita.

css

:first-child { font-weight: bold; }

Pseudo-clase Estructural: Último Hijo

Selecciona el último elemento hijo de su padre. Útil para eliminar márgenes o paddings innecesarios al final de una lista o grupo de elementos.

css

:last-child { margin-bottom: 0; }

Pseudo-clase Estructural: Hijos Impares

Selecciona todos los elementos hijos que están en posiciones impares (1º, 3º, 5º, etc.) de su padre. Comúnmente usado para crear franjas en tablas o listas (zebra-striping).

css

:nth-child(odd) { background: #f0f0f0; }

Pseudo-clase Estructural: Hijos Pares

Selecciona todos los elementos hijos que están en posiciones pares (2º, 4º, 6º, etc.) de su padre. Complementa el estilo de zebra-striping.

css

:nth-child(even) { background: #fff; }

Pseudo-clase Estructural: Tercer Hijo

Selecciona el tercer elemento hijo de su padre. El número dentro de los paréntesis especifica la posición exacta del hijo a seleccionar.

css

:nth-child(3) { color: red; }

Pseudo-clase de Formulario: Checked

Aplica estilos a elementos de input de radio o checkbox cuando están marcados (seleccionados). En este ejemplo, el elemento aumenta de tamaño cuando está marcado.

css

:checked { transform: scale(1.2); }

Pseudo-clase de Formulario: Disabled

Aplica estilos a elementos de formulario que están deshabilitados (con el atributo `disabled`). En este ejemplo, el elemento se vuelve semi-transparente para indicar que no se puede interactuar con él.

css

:disabled { opacity: 0.5; }

Pseudo-clase de Formulario: Enabled

Aplica estilos a elementos de formulario que están habilitados (sin el atributo `disabled`). En este ejemplo, el cursor cambia a un puntero para indicar que el elemento es interactivo.

css

:enabled { cursor: pointer; }

Pseudo-clase de Formulario: Required

Aplica estilos a campos de formulario que poseen el atributo `required`, indicando que son de llenado obligatorio. En este ejemplo, se añade un borde rojo.

css

:required { border: 2px solid red; }

Pseudo-clase de Formulario: Valid

Aplica estilos a campos de formulario cuyo contenido es considerado válido de acuerdo con sus reglas de validación (por ejemplo, un email bien formateado en un campo `type="email"`).

css

:valid { border-color: green; }

Pseudo-elemento: Antes del Contenido

Inserta contenido generado por CSS antes del contenido real de un elemento. El valor de la propiedad `content` es obligatorio. Comúnmente usado para iconos, comillas o marcadores decorativos.

css

::before { content: "→"; }

Pseudo-elemento: Después del Contenido

Inserta contenido generado por CSS después del contenido real de un elemento. Similar a `::before`, pero posiciona el contenido al final.

css

::after { content: "←"; }

Pseudo-elemento: Primera Línea

Aplica estilos a la primera línea de texto de un elemento de bloque. La "primera línea" es determinada por el ancho del elemento y no por el HTML. En este ejemplo, la primera línea se muestra en negrita.

css

::first-line { font-weight: bold; }

Pseudo-elemento: Primera Letra

Aplica estilos a la primera letra del texto de un elemento de bloque. Comúnmente usado para crear efectos de "drop cap" o letras capitulares, aumentando el tamaño de la primera letra.

css

::first-letter { font-size: 2em; }

Pseudo-elemento: Texto Seleccionado

Aplica estilos al texto que el usuario ha seleccionado (resaltado) en un documento. En este ejemplo, el fondo del texto seleccionado será amarillo. Las propiedades que pueden ser alteradas son limitadas.

css

::selection { background: yellow; }

🚀 Propiedades Avanzadas

20 snippets

Propiedades CSS avanzadas para crear efectos visuales sofisticados como filtros de imagen, sombras, gradientes complejos y recortes de elementos.

Filtro: Desenfoque (Blur)

Aplica un efecto de desenfoque gaussiano al elemento. Un valor de `5px` indica que los píxeles se desenfocarán en un radio de 5 píxeles. Valores mayores resultan en más desenfoque.

css

filter: blur(5px);

Filtro: Brillo

Ajusta el brillo del elemento. Un valor de `1.2` (o 120%) aumenta el brillo en un 20%. `1` es el brillo normal, `0` hace que el elemento sea totalmente negro.

css

filter: brightness(1.2);

Filtro: Contraste

Ajusta el contraste del elemento. Un valor de `1.5` (o 150%) aumenta el contraste en un 50%. `1` es el contraste normal, `0` vuelve el elemento gris.

css

filter: contrast(1.5);

Filtro: Escala de Grises

Convierte los colores del elemento a una escala de grises. Un valor de `100%` elimina completamente la saturación de los colores, volviéndolo en blanco y negro. `0%` mantiene los colores originales.

css

filter: grayscale(100%);

Filtro: Efecto Sepia

Aplica un efecto sepia al elemento, dándole un tono marrón rojizo antiguo. Un valor de `50%` aplica la mitad del efecto total.

css

filter: sepia(50%);

Filtro: Rotación de Tono

Rota las colores del elemento en el círculo de colores. `90deg` desplaza el tono en 90 grados, alterando los colores de forma dramática. `0deg` o `360deg` no tienen efecto.

css

filter: hue-rotate(90deg);

Sombra Suave en Caja

Aplica una sombra suave alrededor de la caja del elemento. Los valores son: desplazamiento X (0), desplazamiento Y (2px), radio de desenfoque (4px) y color (`rgba(0,0,0,0.1)` - negro con 10% de opacidad).

css

box-shadow: 0 2px 4px rgba(0,0,0,0.1);

Sombra Media en Caja

Aplica una sombra de intensidad media a la caja del elemento, con mayor desplazamiento Y y radio de desenfoque, y 20% de opacidad.

css

box-shadow: 0 4px 8px rgba(0,0,0,0.2);

Sombra Fuerte en Caja

Aplica una sombra más prominente a la caja del elemento, con mayor desplazamiento, desenfoque y 30% de opacidad, creando un efecto de elevación más acentuado.

css

box-shadow: 0 8px 16px rgba(0,0,0,0.3);

Sombra en el Texto

Aplica una sombra al texto del elemento. Los valores son: desplazamiento X (2px), desplazamiento Y (2px), radio de desenfoque (4px) y color (`rgba(0,0,0,0.3)`).

css

text-shadow: 2px 2px 4px rgba(0,0,0,0.3);

Sombra Interna en Caja

Aplica una sombra interna (inset) a la caja del elemento, creando un efecto de profundidad o de elemento "presionado". El término `inset` se añade antes de los otros valores.

css

box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);

Gradiente Lineal Diagonal

Aplica un gradiente lineal que se extiende en un ángulo de 45 grados, transicionando del color `#ff7e5f` a `#feb47b`. El ángulo puede especificarse en `deg`, `grad`, `rad` o `turn`.

css

background: linear-gradient(45deg, #ff7e5f, #feb47b);

Gradiente Radial Básico

Aplica un gradiente radial con forma de círculo, comenzando con el color `#ff7e5f` en el centro y transicionando a `#feb47b` en los bordes.

css

background: radial-gradient(circle, #ff7e5f, #feb47b);

Gradiente Cónico

Aplica un gradiente cónico que gira alrededor de un punto central, creando un efecto de "rebanada de pizza". `from 0deg` define el punto de partida de la rotación. Los colores se distribuyen angularmente.

css

background: conic-gradient(from 0deg, #ff7e5f, #feb47b, #ff7e5f);

Gradiente Lineal Repetido

Crea un patrón de gradiente lineal que se repite. En este ejemplo, crea franjas de 10px en `#ff7e5f` y 10px en `#feb47b`, repitiéndose en un ángulo de 45 grados.

css

background: repeating-linear-gradient(45deg, #ff7e5f, #ff7e5f 10px, #feb47b 10px, #feb47b 20px);

Clip Path: Recorte Circular

Recorta el elemento en una forma circular. `circle(50%)` crea un círculo con radio del 50% del lado más corto del elemento, centrado. El contenido fuera de la ruta de recorte es invisible.

css

clip-path: circle(50%);

Clip Path: Recorte Poligonal

Recorta el elemento en una forma poligonal definida por una lista de coordenadas de puntos. En este ejemplo, crea una forma de diamante.

css

clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);

Clip Path: Recorte Elíptico

Recorta el elemento en una forma elíptica. `ellipse(rx ry at x y)` define los radios horizontal y vertical y la posición del centro de la elipse.

css

clip-path: ellipse(50% 40% at 50% 50%);

Máscara de Imagen

Aplica una imagen como máscara al elemento. La imagen de la máscara (generalmente un PNG con transparencia o SVG) define qué partes del elemento son visibles y cuáles son transparentes.

css

mask-image: url("mask.png");

Backdrop Filter: Desenfoque del Fondo

Aplica un efecto de filtro al área de fondo *detrás* del elemento. En este ejemplo, el contenido visible a través del elemento se desenfocará en 5 píxeles, creando un efecto de vidrio esmerilado. Requiere soporte del navegador y generalmente se usa con un fondo semitransparente en el elemento.

css

backdrop-filter: blur(5px);

🎨 CSS Custom Properties (Variables)

17 snippets

Las CSS Custom Properties permiten definir valores reutilizables en una hoja de estilos, facilitando el mantenimiento y permitiendo temas dinámicos.

Inicio de la Declaración Global de Variables

El selector `:root` representa el elemento raíz del documento (el elemento `<html>`). Declarar variables aquí las hace accesibles globalmente en todo el documento CSS.

css

:root {

Declaración de Variable: Color Primario

Declara una variable CSS llamada `--primary-color` y le asigna el valor hexadecimal `#3498db` (un tono de azul). Los nombres de variables CSS comienzan con dos guiones (`--`).

css

  --primary-color: #3498db;

Declaración de Variable: Color Secundario

Declara una variable CSS llamada `--secondary-color` y le asigna el valor `#2ecc71` (un tono de verde).

css

  --secondary-color: #2ecc71;

Declaración de Variable: Tamaño Base de la Fuente

Declara una variable CSS para definir el tamaño base de la fuente, facilitando la consistencia tipográfica en todo el proyecto.

css

  --font-size-base: 16px;

Declaración de Variable: Unidad de Espaciado

Declara una variable CSS para definir una unidad de espaciado, útil para crear un sistema de espaciado consistente y basado en una cuadrícula.

css

  --spacing-unit: 8px;

Fin de la Declaración de Variables

Cierra el bloque de declaración de variables CSS dentro del selector `:root`.

css

Uso de Variable para Color

Aplica el valor de la variable `--primary-color` a la propiedad `color`. La función `var()` se usa para acceder al valor de una custom property.

css

color: var(--primary-color);

Uso de Variable para Tamaño de Fuente

Aplica el valor de la variable `--font-size-base` a la propiedad `font-size`, asegurando que el texto use el tamaño base definido.

css

font-size: var(--font-size-base);

Uso de Variable para Margen

Aplica el valor de la variable `--spacing-unit` a la propiedad `margin`, usando la unidad de espaciado consistente.

css

margin: var(--spacing-unit);

Cálculo con Variable

Utiliza la función `calc()` para realizar operaciones matemáticas con variables CSS. En este caso, el padding se define como el doble del valor de `--spacing-unit`, resultando en `16px`.

css

padding: calc(var(--spacing-unit) * 2);

Variable con Valor Predeterminado (Fallback)

Usa la variable `--primary-color`. Si la variable no está definida, se usará el valor de fallback `#333` (gris oscuro). Esto aumenta la robustez del CSS.

css

color: var(--primary-color, #333);

Variable con Fallback Explícito

Usa la variable `--font-size-base` con un valor de fallback de `16px` en caso de que la variable no se encuentre o esté indefinida.

css

font-size: var(--font-size-base, 16px);

Fallback Anidado de Variables

Demuestra el uso de fallbacks anidados. Intenta usar `--bg-color`. Si no está definida, intenta `--white`. Si `--white` tampoco está definida, usa el valor final `#fff`.

css

background: var(--bg-color, var(--white, #fff));

Media Query para Modo Oscuro

Inicia un bloque de estilos que se aplicará si el sistema operativo del usuario está configurado para el modo oscuro. Permite crear temas dinámicos que se adaptan a las preferencias del usuario.

css

@media (prefers-color-scheme: dark) {

Variable de Color para Modo Oscuro

Dentro de la media query de modo oscuro, redefine el valor de la variable `--primary-color` a un tono de azul más claro, adecuado para fondos oscuros.

css