A função calc() no CSS permite realizar cálculos diretamente nas propriedades de estilo, para tornar o design de páginas web mais flexível e dinâmico.
Com ela, você pode combinar diferentes unidades de medida, como pixels, porcentagens e mais, para facilitar a criação de layouts responsivos e ajustáveis a diferentes tamanhos de tela.
Como usar a função calc() no CSS?
Veja quais são os usos mais comuns da função calc().
Sintaxe básica do CSS calc()
A sintaxe é simples: calc(<expressão>). O cálculo pode envolver qualquer combinação de unidades, como pixels (px), porcentagens (%), em (em), entre outros.
Veja um exemplo básico:
div {
width: calc(100% - 50px);
}
Nesse exemplo, a largura do elemento será 100% da largura do contêiner, menos 50 pixels.
O uso da calc() torna o design mais flexível enquanto permite ajustes responsivos e precisos, como quando precisamos que um elemento ocupe uma porcentagem específica da tela, mas com margem fixa.
Operadores matemáticos suportados e suas regras
A função calc() no CSS suporta quatro operadores matemáticos principais: soma (+), subtração (-), multiplicação (*) e divisão (/). Esses operadores permitem realizar cálculos diretamente nas propriedades de estilo, o que contribui para a versatilidade do design.
E vale lembrar: ao trabalhar com calc(), documente as operações realizadas, como em um comentário em CSS para explicar o cálculo e facilitar manutenções futuras.
Soma (+)
Exemplo:
div {
width: calc(50% + 20px);
}
Isso adiciona 20 pixels à largura de 50% da tela.
Subtração (-)
Exemplo:
div {
height: calc(100vh - 100px);
}
Nesse caso, a altura é 100% da altura da janela, menos 100 pixels.
Multiplicação (*)
A multiplicação pode ser feita entre um número e uma unidade.
Exemplo:
div {
width: calc(10px * 5);
}
Nesse exemplo, a largura do div será igual a 50 pixels (10px multiplicado por 5).
Divisão (/)
A divisão também pode ser usada entre um número e uma unidade.
Exemplo:
div {
width: calc(100px / 2);
}
Aqui, a largura do div será 50 pixels, já que 100px dividido por 2 resulta em 50px.
Lembre-se de sempre deixar um espaço entre os números e os operadores, para garantir que o cálculo seja realizado corretamente.
Como fazer uma calculadora com CSS e calc()?
Combine a função calc() com o elemento input[type=range], que cria um controle deslizante. Assim, você cria uma mini calculadora interativa, em que a pessoa usuária pode ajustar a largura de um elemento dinamicamente.
Ao combinar o input[type=range] com calc(), é possível modificar a largura de um elemento com base no valor do controle deslizante.
Exemplo funcional de como criar essa calculadora de largura:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calculadora de Largura</title>
<style>
.container {
width: calc(50% + var(--slider-value));
height: 100px;
background-color: lightblue;
transition: width 0.3s ease;
}
input[type=range] {
width: 100%;
}
</style>
</head>
<body>
<div class="container"></div>
<input type="range" min="0" max="100" value="0" id="slider">
<script>
const slider = document.getElementById('slider');
slider.addEventListener('input', function() {
document.documentElement.style.setProperty('--slider-value', `${slider.value}px`);
});
</script>
</body>
</html>
Nesse caso, o valor do input[type=range] controla a variável CSS –slider-value, que é usada dentro de calc() para ajustar a largura da div.container.
Ao mover o controle deslizante, a largura da div muda de forma interativa e permite visualizar resultados em tempo real.
Veja como ficará:
Quando usar `calc()` vs. `clamp()`?
Use calc() quando precisar realizar cálculos com unidades diferentes, como em somas ou subtrações, para mais flexibilidade ao definir tamanhos dinâmicos.
Já o clamp() é ideal para definir valores com um intervalo mínimo e máximo, o que garante um valor dentro de limites específicos, independentemente do tamanho da tela.
Em resumo, calc() é mais para ajustes específicos; enquanto clamp() mantém valores responsivos dentro de uma faixa controlada.
Quando usar `calc()` vs. `var()` (CSS Custom Properties)?
Use calc() quando quiser realizar cálculos diretamente nas propriedades de estilo, como somar ou subtrair valores em diferentes unidades. Eles são feitos no momento da aplicação.
Já as var() (CSS Custom Properties) são para armazenar e reutilizar valores ao longo do seu código e, assim, facilitar a organização e manutenção do CSS.
Exemplos práticos de uso do CSS calc()
Confira usos comuns do calc() em CSS.
Definir larguras dinâmicas com calc()
Você pode combinar diferentes unidades, como px, % e vw, para criar larguras dinâmicas que se ajustam melhor ao design.
Exemplo:
div {
width: calc(50% + 100px);
}
Nesse caso, a largura será 50% do contêiner mais 100 pixels. Isso garante um ajuste flexível do elemento em diferentes tamanhos de tela, e ainda mantém o layout consistente.
Ajustar espaçamentos e paddings dinamicamente
Com calc(), você pode ajustar espaçamentos e paddings com base em unidades diferentes.
Por exemplo:
div {
padding: calc(2vw + 20px);
}
Nesse exemplo, o padding será uma combinação de 2% da largura da janela e 20 pixels fixos. Isso garantirá o ajuste do espaçamento ao tamanho da tela e um layout equilibrado.
Criar colunas flexíveis sem media queries
Com calc(), você pode criar colunas que se ajustam automaticamente, sem precisar de media queries.
Exemplo:
.container {
display: flex;
}
.column {
width: calc(33.33% - 20px);
margin-right: 20px;
}
Aqui, as colunas ocuparão 33.33% da largura do contêiner, menos 20 px para garantir o espaçamento. O layout será flexível e responsivo sem depender de media queries.
Centralizar elementos com calc()
É possível alinhar o texto com CSS com a função calc(), pois ela também é útil para centralizar elementos dinamicamente.
Exemplo:
div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: calc(100% - 40px);
}
Nesse caso, o div ficará centralizado tanto vertical quanto horizontalmente, pois a função ajustará sua largura a 40px de margem.
O que é a função calc() no CSS?
A função calc() no CSS é uma forma de realizar cálculos diretamente nas propriedades de estilo e, assim, combinar diferentes unidades de medida, como px, %, em e vw. Dessa forma, ela ajusta tamanhos e espaçamentos de forma flexível.
Usar calc() no CSS é uma maneira prática de criar layouts adaptáveis, além de permitir que elementos se adaptem ao tamanho da tela sem perder o controle.
Essa função é especialmente útil em design responsivo, pois permite ajustar propriedades de largura, altura e espaçamento conforme a necessidade, sem depender de media queries.
Aproveite e saiba mais sobre a hospedagem de site da Locaweb!