5.1 Función calc()
Las funciones CSS ofrecen herramientas efectivas para llevar a cabo diversas operaciones directamente en archivos de estilo.
Las funciones calc(), min(), max() y clamp() son especialmente útiles para crear diseños adaptativos y flexibles, ya que permiten
realizar operaciones matemáticas y cálculos condicionales de valores.
La función calc() se utiliza para realizar operaciones matemáticas en CSS. Permite combinar diferentes
unidades, como píxeles (px), porcentajes (%), em, rem y otras, en una sola expresión.
Sintaxis:
selector {
propiedad: calc(expresión);
}
Ejemplo de uso
En este ejemplo, el ancho del bloque se calcula como el 50% del ancho del elemento padre menos 20 píxeles:
/* El ancho del bloque es la mitad del elemento padre menos 20px */
.block {
width: calc(50% - 20px);
}
5.2 Funciones min(), max() y clamp()
Funciones min(), max() y clamp() en CSS
Función min()
La función min() acepta varios valores y devuelve el más pequeño de ellos. Es útil para crear
tamaños flexibles que cambian según el contexto.
Sintaxis:
selector {
propiedad: min(valor1, valor2);
}
Ejemplo
En este ejemplo, el ancho del contenedor será el 50% o 300 píxeles, dependiendo de cuál sea menor:
.container {
width: min(50%, 300px);
}
Función max()
La función max() acepta varios valores y devuelve el mayor de ellos. Es útil para definir
tamaños mínimos y asegurar adaptabilidad.
Función clamp()
La función clamp() acepta tres valores: mínimo, preferido y máximo. Limita
el valor entre los mínimos y máximos, aspirando al valor preferido.
5.3 Ventajas de usar funciones CSS
Ventajas de usar funciones CSS:
- Flexibilidad. Las funciones CSS permiten crear estilos más flexibles y adaptativos, ya que permiten calcular valores dinámicamente.
- Simplificación del diseño adaptativo. Las funciones
min(),max()yclamp()simplifican significativamente la creación de diseños adaptativos, permitiendo limitar los valores a ciertos límites. - Reducción de la necesidad de media queries. El uso de estas funciones puede reducir la cantidad de media queries necesarias para adaptar los estilos a diferentes tamaños de pantalla.
5.4 Ejemplo de implementación completa
.container {
display: flex;
flex-direction: column;
gap: 10px;
padding: 20px;
}
.block {
background-color: #3498db;
color: white;
padding: 10px;
text-align: center;
}
.block:nth-child(1) {
width: calc(50% - 20px);
}
.block:nth-child(2) {
width: min(300px, 100%);
}
.block:nth-child(3) {
width: max(200px, 50%);
}
.text {
font-size: clamp(12px, 2vw, 24px);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo de uso de Funciones CSS</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="block">Bloque con ancho calc(50% - 20px)</div>
<div class="block">Bloque con ancho min(300px, 100%)</div>
<div class="block">Bloque con ancho max(200px, 50%)</div>
<p class="text">Texto con tamaño de fuente clamp(12px, 2vw, 24px)</p>
</div>
</body>
</html>
GO TO FULL VERSION