CSS
Tutorial CSS: Funciones matemáticas
Aprende a usar funciones matemáticas en CSS para crear diseños adaptativos con calc(), min(), max() y clamp() combinadas con variables CSS.
Aprende CSS y certifícateCálculos dinámicos con calc() y operadores matemáticos
La función calc()
es una de las herramientas más útiles en CSS moderno, permitiéndonos realizar operaciones matemáticas directamente en nuestras hojas de estilo. Esta capacidad transforma la forma en que definimos valores de propiedades, haciendo posible combinar diferentes unidades y crear diseños más dinámicos y adaptables.
Sintaxis básica
La sintaxis de calc()
es sencilla: recibe una expresión matemática como argumento y devuelve el resultado del cálculo. Puedes usar los operadores aritméticos básicos:
- Suma (
+
) - Resta (
-
) - Multiplicación (
*
) - División (
/
)
.elemento {
width: calc(100% - 40px);
}
En este ejemplo, el ancho del elemento será igual al 100% del contenedor padre menos 40 píxeles, creando un margen fijo a los lados.
Combinando unidades diferentes
Una de las ventajas principales de calc()
es la capacidad de combinar diferentes unidades de medida en una misma operación:
.contenedor {
padding: calc(1rem + 2vw);
margin-top: calc(20px + 2em);
width: calc(100% / 3 - 20px);
}
Esto permite crear diseños que combinan medidas relativas (como porcentajes o em
) con medidas absolutas (como píxeles), algo imposible de lograr sin esta función.
Espaciado entre elementos
Un uso común de calc()
es crear espaciado consistente entre elementos:
.galeria {
display: grid;
grid-template-columns: repeat(3, calc((100% - 40px) / 3));
gap: 20px;
}
Este código crea una galería de tres columnas con un espacio de 20px entre ellas, distribuyendo el espacio disponible de manera uniforme.
Anidando funciones calc()
También podemos anidar funciones calc()
para operaciones más complejas, aunque generalmente es mejor simplificar la expresión cuando sea posible:
.elemento {
/* Esto funciona, pero es mejor simplificarlo */
width: calc(100% - calc(20px + 2em));
/* Versión simplificada */
height: calc(100% - 20px - 2em);
}
Operaciones con variables CSS
La función calc()
se vuelve aún más potente cuando se combina con variables CSS:
:root {
--spacing-unit: 8px;
--container-width: 1200px;
}
.contenedor {
width: calc(var(--container-width) - 2 * var(--spacing-unit));
padding: calc(var(--spacing-unit) * 2);
margin-bottom: calc(var(--spacing-unit) * 3);
}
Esta combinación permite crear sistemas de diseño más mantenibles y coherentes.
Consideraciones de rendimiento
Aunque calc()
es muy útil, es importante tener en cuenta algunas consideraciones:
- Deja espacios alrededor de los operadores para evitar errores de interpretación:
/* Correcto */
width: calc(100% - 20px);
/* Incorrecto - puede causar errores */
width: calc(100%-20px);
- Evita cálculos excesivamente complejos que podrían afectar el rendimiento:
/* Mejor evitar expresiones muy complejas */
margin: calc((100vw - 20px) / 4 * (1 + 2 / (3 + 2 * var(--ratio))));
Ejemplos prácticos
Centrado vertical con altura dinámica
.centrado-vertical {
position: absolute;
top: calc(50% - (150px / 2));
height: 150px;
}
Diseño de columnas adaptativas
.columna {
width: calc(25% - 20px);
margin: 0 10px;
float: left;
}
Ajuste de tamaño de fuente responsivo
.titulo {
font-size: calc(16px + 2vw);
}
Este enfoque crea un tamaño de fuente que crece proporcionalmente con el ancho de la ventana, manteniendo un tamaño mínimo legible.
Creación de márgenes negativos controlados
.contenedor-expandido {
margin: 0 calc(-1 * var(--padding-contenedor));
padding: 20px var(--padding-contenedor);
}
Este patrón es útil para crear elementos que se extiendan más allá de los límites de su contenedor, como fondos a ancho completo dentro de contenedores con ancho máximo.
Compatibilidad con navegadores
La función calc()
tiene excelente soporte en navegadores modernos. Sin embargo, si necesitas compatibilidad con navegadores muy antiguos, considera proporcionar un valor alternativo:
.elemento {
/* Fallback para navegadores antiguos */
width: 90%;
/* Valor moderno con calc() */
width: calc(100% - 40px);
}
La función calc()
ha transformado la forma en que definimos valores en CSS, permitiéndonos crear diseños más flexibles y mantenibles que se adaptan a diferentes contextos y dispositivos.
Valores responsivos adaptativos con min() y max()
Las funciones min()
y max()
son herramientas esenciales para crear diseños verdaderamente adaptativos en CSS moderno. Estas funciones matemáticas permiten establecer límites dinámicos para propiedades, facilitando la creación de interfaces que se ajustan automáticamente a diferentes tamaños de pantalla sin necesidad de media queries adicionales.
Función min()
La función min()
evalúa dos o más expresiones y devuelve el valor más pequeño entre ellas. Su sintaxis es simple:
.elemento {
width: min(valor1, valor2, ...valorN);
}
Esta función resulta especialmente útil para establecer tamaños máximos que se adaptan automáticamente:
.contenedor {
width: min(90%, 1200px);
margin: 0 auto;
}
En este ejemplo, el contenedor tendrá un ancho del 90% del elemento padre, pero nunca superará los 1200px. Esto elimina la necesidad de escribir:
/* Enfoque tradicional que min() reemplaza */
.contenedor {
width: 90%;
max-width: 1200px;
margin: 0 auto;
}
Función max()
Por otro lado, la función max()
evalúa dos o más expresiones y devuelve el valor más grande entre ellas:
.elemento {
width: max(valor1, valor2, ...valorN);
}
Esta función es perfecta para establecer tamaños mínimos que garantizan la legibilidad:
.texto-adaptativo {
font-size: max(16px, 3vw);
}
En este caso, el tamaño de fuente será al menos de 16px, pero aumentará proporcionalmente al 3% del ancho de la ventana cuando este valor sea mayor.
Casos de uso prácticos
Anchos adaptativos con límites
.tarjeta {
width: min(100%, 400px);
padding: min(5%, 30px);
}
Esta tarjeta ocupará el 100% del ancho disponible en pantallas pequeñas, pero se limitará a 400px en pantallas más grandes. El padding también se ajusta proporcionalmente.
Márgenes que respetan el espacio mínimo
.seccion {
margin: max(20px, 5vw);
}
Este código garantiza un margen mínimo de 20px, pero lo aumenta al 5% del ancho de la ventana en pantallas más grandes.
Tipografía fluida
.titulo {
font-size: max(24px, min(5vw, 60px));
}
Este ejemplo crea un tamaño de fuente que:
- Nunca será menor de 24px (para mantener la legibilidad)
- Crecerá proporcionalmente al 5% del ancho de la ventana
- Nunca superará los 60px (para evitar tamaños excesivos)
Columnas adaptativas
.columna {
width: min(100%, max(300px, 25%));
}
Estas columnas ocuparán el 25% del espacio disponible, pero nunca serán más estrechas que 300px. En pantallas muy pequeñas, ocuparán el 100% del ancho.
Combinando min() y max() con otras funciones
Estas funciones pueden combinarse con calc()
y variables CSS para crear sistemas de diseño aún más flexibles:
:root {
--padding-base: 20px;
}
.contenedor {
padding: min(var(--padding-base), 5vw);
width: calc(100% - min(var(--padding-base) * 2, 10vw));
}
Anidando min() y max()
Podemos anidar estas funciones para crear comportamientos más complejos:
.elemento {
width: min(max(300px, 50%), 800px);
}
Este elemento:
- Tendrá al menos 300px de ancho
- Preferentemente ocupará el 50% del contenedor
- Nunca superará los 800px de ancho
Compatibilidad entre navegadores
Las funciones min()
y max()
tienen buen soporte en navegadores modernos, pero para mayor compatibilidad, podemos proporcionar alternativas:
.contenedor {
/* Fallback para navegadores antiguos */
width: 90%;
max-width: 1200px;
/* Solución moderna con min() */
width: min(90%, 1200px);
}
Ventajas sobre media queries
Aunque las media queries siguen siendo importantes, las funciones min()
y max()
ofrecen varias ventajas:
- Código más conciso: reducen la necesidad de reglas duplicadas en diferentes breakpoints
- Adaptación continua: responden a cada píxel de cambio, no solo a puntos de ruptura específicos
- Mantenimiento simplificado: centralizan la lógica de adaptación en una sola declaración
/* Con media queries (enfoque tradicional) */
.elemento {
width: 100%;
}
@media (min-width: 768px) {
.elemento {
width: 50%;
}
}
/* Con min() (enfoque moderno) */
.elemento {
width: min(100%, 50rem);
}
Consideraciones importantes
Al trabajar con estas funciones, ten en cuenta:
- Deja espacios entre comas para mejorar la legibilidad
- Usa paréntesis para clarificar el orden de evaluación en expresiones complejas
- Considera la accesibilidad al establecer valores mínimos, especialmente para tamaños de texto
/* Buena práctica: espaciado y paréntesis claros */
.elemento {
padding: min(5%, (30px + 2vw));
}
Las funciones min()
y max()
representan un cambio significativo en cómo abordamos el diseño responsivo, permitiéndonos crear interfaces que se adaptan fluidamente a cualquier tamaño de pantalla con menos código y mayor precisión.
Control de rango con clamp() para valores acotados
La función clamp()
es una herramienta poderosa en CSS moderno que permite establecer un valor que se ajusta automáticamente dentro de un rango definido. Esta función combina la funcionalidad de min()
y max()
en una sola expresión más concisa, facilitando la creación de elementos que se adaptan de forma controlada a diferentes tamaños de pantalla.
Sintaxis básica
La función clamp()
acepta tres parámetros en este orden:
.elemento {
propiedad: clamp(valor-mínimo, valor-preferido, valor-máximo);
}
Donde:
- valor-mínimo: el valor más pequeño permitido
- valor-preferido: el valor ideal que se utilizará cuando sea posible
- valor-máximo: el valor más grande permitido
El navegador seleccionará automáticamente:
- El valor mínimo si el valor preferido es menor que este
- El valor máximo si el valor preferido es mayor que este
- El valor preferido cuando está dentro del rango especificado
Casos de uso prácticos
Tipografía fluida controlada
Uno de los usos más comunes de clamp()
es crear tamaños de texto que se ajustan al tamaño de la pantalla pero dentro de límites legibles:
.titulo {
font-size: clamp(1.5rem, 5vw, 3rem);
}
Este título:
- Nunca será más pequeño que 1.5rem (24px con tamaño base de 16px)
- Se ajustará fluidamente al 5% del ancho de la ventana
- Nunca excederá los 3rem (48px con tamaño base de 16px)
Anchos de contenedor adaptativos
clamp()
es perfecto para crear contenedores que se adaptan al espacio disponible manteniendo proporciones adecuadas:
.contenedor {
width: clamp(320px, 80%, 1200px);
margin: 0 auto;
}
Este contenedor:
- Tendrá un mínimo de 320px de ancho (para pantallas muy pequeñas)
- Ocupará el 80% del ancho disponible en la mayoría de los casos
- Nunca superará los 1200px de ancho (para evitar líneas de texto demasiado largas)
Espaciado proporcional pero controlado
El espaciado entre elementos también puede beneficiarse de clamp()
:
.seccion {
padding: clamp(1rem, 5vw, 3rem);
}
Este padding:
- Será de al menos 1rem (16px) en dispositivos pequeños
- Se ajustará al 5% del ancho de la ventana en tamaños intermedios
- No superará los 3rem (48px) en pantallas grandes
Altura de elementos interactivos
Para botones y otros elementos interactivos, clamp()
ayuda a mantener tamaños táctiles adecuados:
.boton {
height: clamp(44px, 8vh, 80px);
padding: 0 clamp(1rem, 3vw, 2rem);
}
Este botón:
- Mantiene una altura mínima de 44px (recomendada para elementos táctiles)
- Se adapta proporcionalmente en pantallas medianas
- Limita su crecimiento a 80px para mantener la coherencia visual
Ventajas sobre combinaciones de min() y max()
Aunque podemos lograr el mismo resultado combinando min()
y max()
, clamp()
ofrece una sintaxis más concisa y legible:
/* Usando min() y max() anidados */
.elemento {
width: max(320px, min(80%, 1200px));
}
/* Equivalente usando clamp() */
.elemento {
width: clamp(320px, 80%, 1200px);
}
Creando sistemas de diseño escalables
clamp()
es especialmente útil para crear sistemas de diseño coherentes que se adaptan a diferentes contextos:
:root {
--spacing-base: clamp(0.5rem, 1vw, 1rem);
}
.card {
padding: var(--spacing-base);
margin-bottom: calc(var(--spacing-base) * 2);
border-radius: calc(var(--spacing-base) * 0.5);
}
Este enfoque crea un sistema de espaciado que mantiene proporciones coherentes en todos los tamaños de pantalla.
Ejemplos avanzados
Columnas que respetan el ancho mínimo de lectura
.grid-layout {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(clamp(280px, 30%, 350px), 1fr));
gap: clamp(1rem, 3vw, 2rem);
}
Este grid:
- Crea columnas que ocupan idealmente el 30% del espacio
- Garantiza que ninguna columna sea más estrecha que 280px
- Limita el ancho máximo de columna a 350px
- Ajusta automáticamente el número de columnas según el espacio disponible
Márgenes negativos controlados
.full-bleed {
margin-inline: clamp(-2rem, -5vw, -5rem);
padding-inline: clamp(2rem, 5vw, 5rem);
}
Este patrón permite crear elementos que se extienden más allá de sus contenedores, pero de manera controlada.
Consideraciones importantes
Al trabajar con clamp()
, ten en cuenta estas recomendaciones:
- Accesibilidad: Siempre establece tamaños mínimos de texto que garanticen la legibilidad (generalmente no menos de 16px o 1rem)
/* Buena práctica para accesibilidad */
p {
font-size: clamp(1rem, 1rem + 0.5vw, 1.25rem);
}
- Unidades mixtas: Puedes combinar diferentes unidades en los tres parámetros
.elemento {
margin: clamp(1rem, 5%, 50px);
}
- Rendimiento: Aunque
clamp()
es eficiente, evita cálculos excesivamente complejos dentro de la función
/* Mejor simplificar expresiones complejas */
.elemento {
width: clamp(300px, 50% + 2rem, 800px);
}
Compatibilidad con navegadores
La función clamp()
tiene buen soporte en navegadores modernos, pero para mayor compatibilidad, puedes proporcionar alternativas:
.contenedor {
/* Fallback para navegadores antiguos */
width: 80%;
min-width: 320px;
max-width: 1200px;
/* Solución moderna con clamp() */
width: clamp(320px, 80%, 1200px);
}
Depuración de valores clamp()
Cuando trabajas con clamp()
, puede ser útil entender qué valor se está aplicando en diferentes tamaños de pantalla:
.debug-element::before {
content: "Valor actual: " attr(style);
display: block;
font-size: 14px;
color: #666;
}
.debug-element {
font-size: clamp(1rem, 3vw, 2rem);
}
La función clamp()
representa un avance significativo en la creación de diseños responsivos, permitiendo establecer límites claros mientras mantenemos la adaptabilidad. Al combinar la funcionalidad de min()
y max()
en una sola expresión, simplifica nuestro código y hace que nuestros diseños sean más robustos y mantenibles.
Combinación de funciones matemáticas y variables CSS
La verdadera potencia de las funciones matemáticas en CSS se revela cuando las combinamos con variables CSS (también conocidas como propiedades personalizadas). Esta integración nos permite crear sistemas de diseño dinámicos, mantenibles y altamente adaptables que responden a diferentes contextos y necesidades.
Fundamentos de la integración
Las variables CSS y las funciones matemáticas se complementan perfectamente: las variables almacenan valores que pueden ser reutilizados, mientras que las funciones matemáticas permiten manipular esos valores de forma dinámica.
:root {
--spacing-unit: 8px;
--main-color: #3366ff;
--color-intensity: 0.8;
}
.card {
/* Combinando calc() con variables */
padding: calc(var(--spacing-unit) * 2);
/* Manipulando colores con variables */
background-color: rgba(var(--main-color), var(--color-intensity));
}
Creación de sistemas de espaciado escalables
Un uso común es crear un sistema de espaciado coherente que se pueda ajustar globalmente:
:root {
--space-xs: 4px;
--space-sm: 8px;
--space-md: 16px;
--space-lg: 32px;
--space-xl: 64px;
--scale-factor: 1;
}
.container {
/* Espaciado que se escala uniformemente */
padding: calc(var(--space-md) * var(--scale-factor));
gap: calc(var(--space-sm) * var(--scale-factor));
margin-bottom: calc(var(--space-lg) * var(--scale-factor));
}
@media (min-width: 768px) {
:root {
/* Ajustar el factor de escala en pantallas más grandes */
--scale-factor: 1.5;
}
}
Este enfoque permite ajustar todo el espaciado de la interfaz modificando una sola variable.
Sistemas tipográficos adaptativos
Podemos crear un sistema tipográfico que combine clamp()
con variables CSS para lograr una escala tipográfica fluida:
:root {
--font-size-base: 16px;
--font-scale-ratio: 1.25;
--viewport-adjustment: 0.5vw;
}
h1 {
font-size: clamp(
calc(var(--font-size-base) * var(--font-scale-ratio) * 2),
calc(var(--font-size-base) * 2 + var(--viewport-adjustment) * 3),
calc(var(--font-size-base) * var(--font-scale-ratio) * 3)
);
}
h2 {
font-size: clamp(
calc(var(--font-size-base) * var(--font-scale-ratio)),
calc(var(--font-size-base) * 1.5 + var(--viewport-adjustment) * 2),
calc(var(--font-size-base) * var(--font-scale-ratio) * 2)
);
}
Este sistema permite ajustar toda la escala tipográfica modificando solo unas pocas variables base.
Temas y modos de color dinámicos
La combinación de funciones matemáticas y variables CSS es especialmente útil para implementar temas y modos de color:
:root {
/* Colores base */
--hue-primary: 210;
--saturation-base: 80%;
--lightness-base: 50%;
/* Derivación de colores */
--color-primary: hsl(var(--hue-primary), var(--saturation-base), var(--lightness-base));
--color-secondary: hsl(calc(var(--hue-primary) + 180), var(--saturation-base), var(--lightness-base));
--color-accent: hsl(calc(var(--hue-primary) + 60), var(--saturation-base), var(--lightness-base));
}
.dark-theme {
--lightness-base: 40%;
--saturation-base: 70%;
}
.button-primary {
background-color: var(--color-primary);
/* Crear un color hover ligeramente más claro */
--hover-lightness: calc(var(--lightness-base) + 10%);
--hover-color: hsl(var(--hue-primary), var(--saturation-base), var(--hover-lightness));
}
.button-primary:hover {
background-color: var(--hover-color);
}
Este enfoque permite crear temas completos modificando solo unas pocas variables de color base.
Layouts responsivos avanzados
Podemos crear layouts complejos que se adaptan a diferentes tamaños de pantalla combinando min()
, max()
y clamp()
con variables CSS:
:root {
--content-width: 1200px;
--padding-container: 20px;
--columns-min: 280px;
--columns-ideal: 350px;
--gap-size: 24px;
}
.container {
width: min(var(--content-width), 100% - calc(var(--padding-container) * 2));
margin-inline: auto;
padding: var(--padding-container);
}
.grid {
display: grid;
/* Columnas que se ajustan automáticamente */
grid-template-columns: repeat(
auto-fit,
minmax(
min(100%, var(--columns-min)),
max(var(--columns-ideal), 100%/3)
)
);
gap: clamp(calc(var(--gap-size) / 2), 2vw, var(--gap-size));
}
Cálculos anidados para interfaces complejas
Para interfaces más complejas, podemos anidar funciones matemáticas y variables:
:root {
--base-size: 16px;
--ratio: 1.5;
--container-padding: calc(var(--base-size) * 2);
--content-max-width: 1200px;
}
.sidebar {
/* Ancho que se adapta al contenedor pero mantiene proporciones legibles */
width: clamp(
calc(var(--base-size) * 15),
calc(30% - var(--container-padding)),
calc(var(--content-max-width) * 0.25)
);
/* Altura que se adapta al contenido pero mantiene un mínimo */
height: max(
calc(100vh - calc(var(--base-size) * var(--ratio) * 4)),
calc(var(--base-size) * 30)
);
}
Creación de componentes adaptables
Podemos diseñar componentes que se adaptan a diferentes contextos utilizando variables CSS y funciones matemáticas:
.card-system {
--card-padding-base: 16px;
--card-border-radius: 8px;
--card-shadow-blur: 10px;
}
.card {
padding: var(--card-padding-base);
border-radius: var(--card-border-radius);
box-shadow: 0 calc(var(--card-shadow-blur) / 2) var(--card-shadow-blur) rgba(0, 0, 0, 0.1);
}
.card-compact {
--card-padding-base: 8px;
--card-border-radius: 4px;
--card-shadow-blur: 5px;
}
.card-expanded {
--card-padding-base: clamp(16px, 3vw, 32px);
--card-border-radius: 12px;
--card-shadow-blur: 20px;
}
Este enfoque permite crear variantes de componentes simplemente modificando las variables en diferentes contextos.
Técnicas avanzadas de manipulación de variables
Podemos aprovechar el ámbito de las variables CSS junto con las funciones matemáticas para crear efectos sofisticados:
.accordion {
--is-open: 0;
--max-height: 300px;
}
.accordion.active {
--is-open: 1;
}
.accordion-content {
/* Altura que se anima entre 0 y el valor máximo */
height: calc(var(--is-open) * var(--max-height));
opacity: var(--is-open);
overflow: hidden;
transition: height 0.3s, opacity 0.3s;
}
Este patrón utiliza una variable como interruptor booleano para controlar propiedades múltiples.
Optimización del rendimiento
Al combinar funciones matemáticas y variables CSS, es importante considerar el rendimiento:
- Evita cálculos excesivamente anidados que podrían afectar el rendimiento de renderizado
- Precalcula valores cuando sea posible en lugar de recalcularlos en cada elemento
- Considera el uso de
will-change
para propiedades que cambiarán frecuentemente
/* Enfoque optimizado */
:root {
--base: 16px;
--large: calc(var(--base) * 2); /* Precalculado una vez */
}
.elemento {
padding: var(--large); /* Usa el valor precalculado */
}
Compatibilidad entre navegadores
Para garantizar la compatibilidad, podemos proporcionar alternativas para navegadores que no admiten variables CSS o funciones matemáticas:
.container {
/* Fallback para navegadores antiguos */
padding: 20px;
width: 90%;
/* Versión moderna con variables y funciones */
padding: var(--container-padding, 20px);
width: min(var(--max-width, 1200px), 90%);
}
Ejemplo práctico: Sistema de componentes completo
Veamos cómo podríamos implementar un sistema de componentes completo utilizando la combinación de variables CSS y funciones matemáticas:
:root {
/* Sistema base */
--unit: 8px;
--radius-base: 4px;
--transition-base: 0.3s ease;
/* Colores */
--color-primary-h: 210;
--color-primary-s: 80%;
--color-primary-l: 50%;
--color-primary: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l));
/* Tipografía */
--font-size-base: 16px;
--line-height-base: 1.5;
/* Espaciado */
--space-xs: calc(var(--unit) * 0.5);
--space-sm: var(--unit);
--space-md: calc(var(--unit) * 2);
--space-lg: calc(var(--unit) * 3);
--space-xl: calc(var(--unit) * 4);
}
/* Componente de botón adaptable */
.button {
--button-padding-x: var(--space-md);
--button-padding-y: var(--space-sm);
--button-radius: var(--radius-base);
padding: var(--button-padding-y) var(--button-padding-x);
border-radius: var(--button-radius);
font-size: clamp(calc(var(--font-size-base) * 0.875), 1vw + 0.5rem, var(--font-size-base));
background-color: var(--color-primary);
color: white;
transition: transform var(--transition-base), background-color var(--transition-base);
}
.button:hover {
background-color: hsl(
var(--color-primary-h),
var(--color-primary-s),
calc(var(--color-primary-l) - 10%)
);
transform: translateY(calc(var(--unit) * -0.25));
}
.button--large {
--button-padding-x: var(--space-lg);
--button-padding-y: var(--space-md);
--button-radius: calc(var(--radius-base) * 1.5);
}
.button--small {
--button-padding-x: var(--space-sm);
--button-padding-y: var(--space-xs);
--button-radius: calc(var(--radius-base) * 0.75);
}
Este sistema permite crear variantes de componentes simplemente modificando las variables, manteniendo la coherencia visual y facilitando los cambios globales.
La combinación de funciones matemáticas y variables CSS representa un cambio de paradigma en el desarrollo frontend, permitiéndonos crear sistemas de diseño más flexibles, mantenibles y coherentes que se adaptan a diferentes contextos y necesidades.
Ejercicios de esta lección Funciones matemáticas
Evalúa tus conocimientos de esta lección Funciones matemáticas con nuestros retos de programación de tipo Test, Puzzle, Código y Proyecto con VSCode, guiados por IA.
Reto modelo caja CSS
Propiedades de posicionamiento
Modelo de caja
Sombras en texto y cajas
Reto implementación de fuentes web
Sintaxis básica
Estilos de fuente
Diseño responsive con media queries
Animaciones y transiciones
Proyecto CSS Landing page simple
Reto unidades de medida
Propiedades de texto
Metodologías BEM, SMACSS, OOCSS
Herencia y cascada
Sintaxis avanzada
Reto fondos background CSS
Reto sintaxis CSS
Flexbox en diseños modernos
Elementos 'float' y 'clear'
Pseudo-clases y pseudo-elementos
Reto grid de columnas en CSS
Selectores avanzados
Reto componente responsive
Reto formulario estilizado
Proyecto CSS crear una navbar
Proyecto CSS Dashboard Responsive
Reto Flexbox Hero
Propiedades de fondo
Introducción a CSS
Reto selectores básicos CSS
Reto Flexbox Card
Reto propiedades texto
Modelo de caja
Propiedad 'display'
Variables en CSS
Grid en diseños de cuadrícula
Selectores básicos
Reto tema claro/oscuro con variables
Reto especificidad y cascada
Todas las lecciones de CSS
Accede a todas las lecciones de CSS y aprende con ejemplos prácticos de código y ejercicios de programación con IDE web sin instalar nada.
Introducción A Css
Introducción Y Entorno
Entorno Para Desarrollar Css
Introducción Y Entorno
Sintaxis
Sintaxis De Selectores Y Propiedades
Selectores Básicos
Sintaxis De Selectores Y Propiedades
Herencia Y Cascada
Sintaxis De Selectores Y Propiedades
Pseudo-clases Y Pseudo-elementos
Sintaxis De Selectores Y Propiedades
Colores En Css
Sintaxis De Selectores Y Propiedades
Unidades De Medida
Sintaxis De Selectores Y Propiedades
Especificidad
Sintaxis De Selectores Y Propiedades
Estilos De Fuente
Estilización De Texto Y Fondo
Propiedades De Texto
Estilización De Texto Y Fondo
Sombras En Texto Y Cajas
Estilización De Texto Y Fondo
Propiedades De Fondo
Estilización De Texto Y Fondo
Fuentes Web
Estilización De Texto Y Fondo
Efectos De Texto: Gradientes, Recortes
Estilización De Texto Y Fondo
Tipografía Avanzada
Estilización De Texto Y Fondo
Modelo De Caja
Modelo Caja
Propiedades De Posicionamiento
Modelo Caja
Propiedad 'Display'
Modelo Caja
Elementos 'Float' Y 'Clear'
Modelo Caja
Rellenos Y Márgenes
Modelo Caja
Bordes Y Contornos
Modelo Caja
Absolute, Fixed, Sticky Y Z-index
Posicionamiento
Flexbox Para Crear Layouts Y Estructuras
Flexbox
Css Grid Para Crear Layouts Y Estructuras
Flexbox
Propiedades Del Contenedor Flex
Flexbox
Propiedades De Los Items Flex
Flexbox
Columnas Y Filas En Grid
Css Grid
Espaciado Y Alineación
Css Grid
Tipografía Responsive
Diseño Responsive
Fundamentos Del Diseño Responsive
Diseño Responsive
Imágenes Responsive
Diseño Responsive
Funciones Matemáticas
Variables Y Funciones Css
Transformaciones 2d
Transformación, Transición, Animación
Transformaciones 3d
Transformación, Transición, Animación
Animaciones
Transformación, Transición, Animación
Transiciones
Transformación, Transición, Animación
Css Para Formularios
Css Avanzado
Accesibilidad Web Con Css
Css Avanzado
Container Queries
Css Avanzado
Selectores Avanzados
Css Avanzado
Animaciones Y Transiciones
Técnicas Modernas Y Metodologías
Variables En Css
Técnicas Modernas Y Metodologías
Diseño Responsive Con Media Queries
Técnicas Modernas Y Metodologías
Metodologías De Escritura En Css
Técnicas Modernas Y Metodologías
En esta lección
Objetivos de aprendizaje de esta lección
- Comprender la sintaxis y uso básico de la función calc() para operaciones matemáticas en CSS.
- Aprender a utilizar las funciones min() y max() para establecer valores responsivos adaptativos.
- Dominar la función clamp() para controlar rangos de valores en propiedades CSS.
- Integrar funciones matemáticas con variables CSS para crear sistemas de diseño escalables y mantenibles.
- Aplicar buenas prácticas y considerar la compatibilidad y rendimiento al usar funciones matemáticas en CSS.