fbpx
León Desarrollo - Programación WordPress
Diseño gráfico

La función calc() en CSS


La función calc() en CSS te permite realizar cálculos matemáticos en tus estilos para definir propiedades que dependen de valores numéricos. Esto es útil para crear diseños flexibles y responsivos. La sintaxis básica de calc() es la siguiente:

propiedad: calc(expresión);

Dentro de calc(), puedes usar operadores matemáticos estándar, como +, -, *, y /, para realizar cálculos con valores numéricos y unidades. Algunos ejemplos de uso de calc() incluyen:

  1. Suma y Resta:
   width: calc(50% - 20px);
   margin-left: calc(10px + 2%);

En estos ejemplos, se están restando 20 píxeles de la mitad del ancho y sumando 2% al margen izquierdo.

  1. Multiplicación y División:
   font-size: calc(16px * 1.5);
   padding: calc(10px / 2);

Aquí, se multiplica el tamaño de fuente por 1.5 y se divide el relleno entre 2.

  1. Combinación de Unidades:
   height: calc(100vh - 50px);
   width: calc(50% - 2em);

Puedes combinar unidades diferentes en una misma expresión. Por ejemplo, restando 50 píxeles de la altura y 2 em del ancho.

  1. Uso en Propiedades Compuestas:
   padding: calc(10px + 5px) calc(20px / 2);

calc() se puede utilizar en propiedades que aceptan múltiples valores, como padding o margin.

  1. Variables CSS:
   --ancho: 300px;
   width: calc(var(--ancho) - 20px);

También puedes usar calc() junto con variables CSS para crear cálculos dinámicos basados en valores personalizables.

Es importante recordar que calc() debe incluir espacios alrededor de los operadores (+, -, *, /) para que la función se interprete correctamente.

calc() es especialmente útil para crear diseños fluidos y responsivos, ya que permite realizar cálculos basados en las dimensiones del contenedor, el tamaño de la ventana gráfica (viewport) o valores variables. Esto facilita la adaptación de los estilos a diferentes tamaños de pantalla y dispositivos.

Suscríbete

Si quieres estar al día con las novedades de este sitio te recomiendo que te suscribas.

Comentarios

Deja un comentario


Puede que también te interese

2018 animaciones animación Aranda array atributos añade base de datos buscar categoría css curso diseño Duero emprendimiento fechas fiduero guía imagen imagenes inauguracion instalar Isilla javascript linux local mac node.js pagina pagina web php post problemas producto servicio servidor solución split sql sql server stock string windows woocommerce wordpress

abril 2024
L M X J V S D
1234567
891011121314
15161718192021
22232425262728
2930  
  1. Hola, Muchas gracias por ofrecernos este contenido de calidad, es muy difícil encontrar contenido así en nuestro idioma. Aprovechando este…