5.1 Função calc()
As funções CSS oferecem ferramentas eficazes para realizar várias operações diretamente nos arquivos de estilo. As funções calc(), min(), max() e clamp() são especialmente úteis para criar designs responsivos e flexíveis, pois permitem realizar operações matemáticas e cálculos condicionais de valores.
A função calc() é usada para realizar operações matemáticas no CSS. Ela permite combinar diferentes unidades de medida, como pixels (px), percentagens (%), em, rem e outras, em uma única expressão.
Sintaxe:
seletor {
propriedade: calc(expressão);
}
Exemplo de uso
Neste exemplo, a largura do bloco é calculada como 50% da largura do elemento pai menos 20 pixels:
/* A largura do bloco é metade do elemento pai menos 20px */
.block {
width: calc(50% - 20px);
}
5.2 Funções min(), max() e clamp()
Funções min(), max() e clamp() no CSS
Função min()
A função min() aceita vários valores e retorna o menor deles. Útil para criar tamanhos flexíveis que mudam dependendo do contexto.
Sintaxe:
seletor {
propriedade: min(valor1, valor2);
}
Exemplo
Neste exemplo, a largura do container será 50% ou 300 pixels, dependendo de qual for menor:
.container {
width: min(50%, 300px);
}
Função max()
A função max() aceita vários valores e retorna o maior deles. Útil para definir tamanhos mínimos e garantir a responsividade.
Função clamp()
A função clamp() aceita três valores: mínimo, preferido e máximo. Limita o valor entre mínimo e máximo, direcionando-se para o valor preferido.
5.3 Vantagens de usar funções CSS
Vantagens de usar funções CSS:
- Flexibilidade. As funções CSS permitem criar estilos mais flexíveis e responsivos, já que permitem calcular valores dinamicamente.
- Simplificação do design responsivo. As funções
min(),max()eclamp()simplificam bastante a criação de designs responsivos, permitindo limitar valores a certos limites. - Redução da necessidade de media queries. O uso dessas funções pode reduzir a quantidade de media queries necessárias para adaptar estilos a diferentes tamanhos de tela.
5.4 Exemplo de implementação 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>Exemplo de uso de funções CSS</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="block">Bloco com largura calc(50% - 20px)</div>
<div class="block">Bloco com largura min(300px, 100%)</div>
<div class="block">Bloco com largura max(200px, 50%)</div>
<p class="text">Texto com tamanho de font clamp(12px, 2vw, 24px)</p>
</div>
</body>
</html>
GO TO FULL VERSION