Funções

The CSS Podcast - 020: Functions

Até agora, você conheceu várias funções CSS. No módulo sobre grades, você conheceu minmax() e fit-content(), que ajudam a dimensionar elementos. No módulo cor, você conheceu rgb() e hsl(), que ajudam a definir cores.

Como muitas outras linguagens de programação, o CSS tem muitas funções integradas que podem ser acessadas sempre que necessário.

Cada função do CSS tem uma finalidade específica. Nesta lição, você vai ter uma visão geral de alto nível, para entender melhor onde e como usá-las.

O que é uma função?

Uma função é um código nomeado e independente que conclui uma tarefa específica. Uma função é nomeada para que você possa chamá-la no código e transmitir dados para ela. Isso é conhecido como transmissão de argumentos.

Muitas funções do CSS são funções puras, o que significa que, se você transmitir os mesmos argumentos para elas, elas sempre vão retornar o mesmo resultado, independentemente do que está acontecendo no restante do código. Essas funções geralmente são calculadas novamente quando os valores mudam no CSS, semelhante a outros elementos no idioma, como valores em cascata calculados, como currentColor.

No CSS, só é possível usar as funções fornecidas, em vez de escrever as próprias, mas as funções podem ser aninhadas umas dentro das outras em alguns contextos, mais flexibilidade a elas. Vamos abordar isso com mais detalhes mais adiante neste módulo.

Seletores funcionais

.post :is(h1, h2, h3) {
    line-height: 1.2;
}

Você aprendeu sobre os seletores funcionais no módulo de pseudoclasses, que detalha funções como :is() e :not(). Os argumentos transmitidos para essas funções são seletores CSS, que são avaliados. Se houver uma correspondência com os elementos, o restante da regra de CSS será aplicado a eles.

Propriedades personalizadas e var()

:root {
    --base-color: #ff00ff;
}

.my-element {
    background: var(--base-color);
}

Uma propriedade personalizada é uma variável que permite tokenizar valores no código CSS. As propriedades personalizadas também são afetadas pela cascata, o que significa que elas podem ser manipuladas ou redefinidas de forma contextual. Uma propriedade personalizada precisa ter dois traços (--) como prefixo e diferencia maiúsculas de minúsculas.

A função var() usa um argumento obrigatório: a propriedade personalizada que você está tentando retornar como um valor.

No snippet anterior, a função var() tem --base-color transmitido como um argumento. Se --base-color for definido, var() vai retornar o valor.

.my-element {
    background: var(--base-color, hotpink);
}

Também é possível transmitir um valor de declaração substituto para a função var(). Isso significa que, se --base-color não for encontrado, a declaração transmitida será usada, que, no caso deste exemplo, é a cor hotpink.

Funções que retornam um valor

A função var() é apenas uma das funções do CSS que retornam um valor. Funções como attr() e url() seguem uma estrutura semelhante à var(): você transmite um ou mais argumentos e os usa no lado direito da declaração do CSS.

a::after {
  content: attr(href);
}

A função attr() aqui está usando o conteúdo do atributo href do elemento <a> e o definindo como o content do pseudoelemento ::after. Se o valor do atributo href do elemento <a> fosse alterado, isso seria refletido automaticamente nesse atributo content.

.my-element {
    background-image: url('/path/to/image.jpg');
}

A função url() usa um URL de string e é usada para carregar imagens, fontes e conteúdo. Se um URL válido não for transmitido ou se o recurso para o qual o URL aponta não for encontrado, nada será retornado pela função url().

Funções de cor

Você aprendeu tudo sobre funções de cores no módulo cor. Se você ainda não leu, recomendamos que o faça.

Algumas funções de cor disponíveis no CSS são rgb(), hsl(), lab(), lch(), oklab(), oklch() e color(). Todos eles têm uma forma semelhante em que os argumentos de configuração são transmitidos e uma cor é retornada.

Expressões matemáticas

Como muitas outras linguagens de programação, o CSS oferece funções matemáticas úteis para ajudar em vários tipos de cálculo.

Funções aritméticas

calc()

A função calc() usa uma única expressão matemática como parâmetro. Essa expressão matemática pode ser uma mistura de tipos, como comprimento, número, ângulo e frequência. As unidades também podem ser misturadas.

.my-element {
    width: calc(100% - 2rem);
}

Neste exemplo, a função calc() está sendo usada para dimensionar a largura de um elemento como 100% do elemento pai que o contém e, em seguida, removendo 2rem desse valor calculado.

:root {
  --root-height: 5rem;
}

.my-element {
  width: calc(calc(10% + 2rem) * 2);
  height: calc(var(--root-height) * 3);
}

A função calc() pode ser aninhada dentro de outra função calc(). Também é possível transmitir propriedades personalizadas em uma função var() como parte de uma expressão.

min() e max()

A função min() retorna o menor valor calculado de um ou mais argumentos transmitidos. A função max() faz o oposto: extrai o maior valor de um ou mais argumentos transmitidos.

.my-element {
  width: min(20vw, 30rem);
  height: max(20vh, 20rem);
}

Neste exemplo, a largura precisa ser o menor valor entre 20vw, que é 20% da largura da janela, e 30rem. A altura precisa ser o maior valor entre 20vh, que é 20% da altura da janela, e 20rem.

clamp()

A função clamp() usa três argumentos: o tamanho mínimo, o tamanho ideal e o máximo.

h1 {
  font-size: clamp(2rem, 1rem + 3vw, 3rem);
}

Neste exemplo, o font-size será fluido com base na largura da janela de visualização. A unidade vw é adicionada a uma unidade rem para ajudar no zoom da tela, porque, independentemente do nível de zoom, uma unidade vw terá o mesmo tamanho. A multiplicação por uma unidade rem, com base no tamanho da fonte raiz, fornece à função clamp() um ponto de cálculo relativo.

Saiba mais sobre as funções min(), max() e clamp() em este artigo sobre essas funções.

Funções trigonométricas

As funções trigonométricas permitem encontrar qualquer ponto em um círculo com base em um ângulo, modelar fenômenos cíclicos, como ondas sonoras, descrever órbitas e muito mais. No CSS, é possível usar funções trigonométricas para definir propriedades com base na rotação, animações de tempo, girar elementos com base em um ponto e outras utilizações.

Para mais informações e exemplos, consulte nosso artigo sobre funções trigonométricas.

sin(), cos() e tan()

As funções sin(), cos() e tan() recebem um argumento de ângulo e retornam o seno, cosseno e tangente, respectivamente. As funções sin() e cos() retornam um número entre -1 e 1. A função tan() retorna um número entre -Infinity e +Infinity. O argumento de ângulo pode ser qualquer unidade de ângulo aceita.

:root {
  --sine-degrees: sin(45deg);     /* returns 0.7071 */
  --sine-radians: sin(0.7853rad); /* returns 0.7071 */
}

No exemplo anterior, --sine-degrees e --sine-radians têm o mesmo valor (neste caso, 0.7071).

No exemplo anterior, as funções sin() e cos() são usadas para criar animações oscilantes nos eixos x e y, multiplicando o resultado pelo raio especificado. O uso das duas funções ao mesmo tempo permite uma animação orbitante. Usamos uma propriedade personalizada, --angle, para animar suavemente o ângulo de todas as chamadas de função.

asin(), acos() e atan()

As funções asin(), acos() e atan() são o inverso das funções sin(), cos() e tan(), que recebem um número como argumento e retornam um valor de ângulo entre -90deg e 90deg. As funções asin() e acos() aceitam um número entre -1 e 1, enquanto a função atan() aceita um número entre -Infinity e +Infinity.

:root {
  --degrees: asin(0.7071); /* returns 45deg */
}

atan2()

A função atan2() usa dois argumentos que representam um ponto em relação à origem e retorna o ângulo que representa a direção para esse ponto. Você pode usar isso para girar elementos para um ponto específico. Os argumentos podem ser números, unidades de tamanho ou uma porcentagem, mas ambos precisam ser do mesmo tipo.

No exemplo acima, a função atan2() é usada para determinar o ângulo entre o centro da viewport e a posição atual do mouse. O valor y é o primeiro argumento, e o valor x é o segundo. O ângulo é usado para posicionar as "pupilas" em relação ao centro dos "olhos", para que eles sigam o mouse.

hypot()

A função hypot() usa dois argumentos de comprimento que representam os lados de um triângulo retângulo e retorna o comprimento da hipotenusa. Você pode usar isso como um atalho para calcular isso usando funções exponenciais. Os dois argumentos precisam ser do mesmo tipo de unidade, e hypot() vai retornar o mesmo tipo.

:root {
  --use-ems: hypot(3em, 4em);   /* returns 5em */
  --use-px:  hypot(30px, 40px); /* returns 50px */
}

Funções exponenciais

pow() e exp()

A função pow() usa dois argumentos numéricos, a base e o expoente, e elevar a base à potência do expoente. Ambos os argumentos precisam ser números sem unidades. A função exp() recebe um único argumento e é equivalente a chamar a função pow() com uma base de e.

.my-element {
  width: calc(10px * pow(4, 2); /* 10px * (4 * 4) == 160px */
}

sqrt()

A função sqrt() recebe um argumento numérico e retorna a raiz quadrada dele. O argumento não pode incluir unidades.

:root {
  --root: sqrt(25); /* returns 5 */
}

log()

A função log() retorna o logaritmo de um valor numérico. Se um argumento for transmitido, ele vai retornar o logaritmo natural. Se um segundo argumento for transmitido, a função log() vai usar o segundo argumento como a base para o logaritmo.

:root {
  --log2: log(16, 2); /* returns 4      */
  --logn: log(16);    /* returns 2.7725 */
}

Funções relacionadas a assinaturas

abs()

A função abs() usa um argumento numérico e retorna o valor absoluto (positivo) do valor do argumento.

.my-element {
  color: rgba(0, 0, 0, abs(-1));
}

No exemplo anterior, um valor alpha de -1 resultaria em texto transparente, mas a função abs() retorna o valor absoluto de 1, que resulta em texto totalmente opaco.

sign()

A função sign() usa um argumento numérico e retorna o sinal dos argumentos. Os valores positivos retornam 1, e os valores negativos retornam -1. Valores nulos retornam 0.

.my-element {
  top: calc(50vh + 25vh * sign(var(--value));
}

Nos exemplos anteriores, se --value for positivo, o valor superior será 75vh. Se for negativo, o valor máximo será 25vh. Se for zero, o valor superior será 50vh.

Formas

As propriedades clip-path, offset-path e shape-outside do CSS usam formas para cortar visualmente a caixa ou fornecer uma forma para o conteúdo fluir.

Há funções de forma que podem ser usadas com essas duas propriedades. Formas simples, como circle(), ellipse() e inset() usam argumentos de configuração para definir o tamanho. Formas mais complexas, como polygon(), usam pares separados por vírgulas de valores dos eixos X e Y para criar formas personalizadas.

.circle {
  clip-path: circle(50%);
}

.polygon {
  clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
}

Assim como polygon(), há também uma função path() que usa uma regra de preenchimento SVG como argumento. Isso permite formas altamente complexas que podem ser desenhadas em uma ferramenta gráfica, como o Illustrator ou o Inkscape, e depois copiadas para o CSS.

Transformações

Por fim, nesta visão geral das funções CSS, estão as funções de transformação, que distorcem, redimensionam e até mudam a profundidade de um elemento. Todas as funções a seguir são usadas com a propriedade transform.

Rotação

É possível girar um elemento usando a função rotate(), que gira um elemento na sua eixo central. Também é possível usar as funções rotateX(), rotateY() e rotateZ() para girar um elemento em um eixo específico. É possível transmitir unidades de grau, volta e radiano para determinar o nível de rotação.

.my-element {
  transform: rotateX(10deg) rotateY(10deg) rotateZ(10deg);
}

A função rotate3d() usa quatro argumentos.

Os três primeiros argumentos são números, que definem as coordenadas X, Y e Z. O quarto argumento é a rotação que, como as outras funções de rotação, aceita graus, ângulos e voltas.

.my-element {
  transform: rotate3d(1, 1, 1, 10deg);
}

Escala

É possível mudar a escala de um elemento com transform e a função scale(). A função aceita um ou dois números como um valor que determina uma escala positiva ou negativa. Se você definir apenas um argumento numérico, os eixos X e Y serão dimensionados da mesma forma, e definir ambos é uma abreviação para X e Y. Assim como rotate(), existem as funções scaleX(), scaleY() e scaleZ() para dimensionar um elemento em um eixo específico.

.my-element {
  transform: scaleX(1.2) scaleY(1.2);
}

Assim como a função rotate, há uma função scale3d(). Ela é semelhante a scale(), mas usa três argumentos: o fator de escalonamento X, Y e Z.

Traduzir

As funções translate() movem um elemento enquanto ele mantém a posição no fluxo do documento. Eles aceitam valores de comprimento e porcentagem como argumentos. A função translate() translada um elemento ao longo do eixo X se um argumento for definido e translada um elemento ao longo dos eixos X e Y se ambos os argumentos forem definidos.

.my-element {
  transform: translatex(40px) translatey(25px);
}

Assim como em outras funções de transformação, é possível usar funções específicas para um eixo específico, usando translateX, translateY e translateZ. Também é possível usar translate3d, que permite definir a tradução X, Y e Z em uma função.

Desvio

É possível distorcer um elemento usando as funções skew(), que aceitam ângulos como argumentos. A função skew() funciona de maneira muito semelhante à translate(). Se você definir apenas um argumento, ele afetará apenas o eixo X. Se você definir os dois, ele afetará os eixos X e Y. Também é possível usar skewX e skewY para afetar cada eixo de forma independente.

.my-element {
  transform: skew(10deg);
}

Perspectiva

Por fim, você pode usar a propriedade perspective, que faz parte da família de propriedades de transformação, para alterar a distância entre o usuário e o plano Z. Isso dá a sensação de distância e pode ser usado para criar uma profundidade de campo nos seus designs.

Este exemplo de David Desandro, do artigo muito útil dele, mostra como ele pode ser usado, com as propriedades perspective-origin-x e perspective-origin-y para criar experiências verdadeiramente em 3D.

Funções de animação, gradientes e filtros

O CSS também oferece funções que ajudam a animar elementos, aplicar gradientes a eles e usar filtros gráficos para manipular a aparência deles. Para manter este módulo o mais conciso possível, eles são abordados nos módulos vinculados. Todas elas seguem uma estrutura semelhante às funções demonstradas neste módulo.

Teste seu conhecimento

Testar seus conhecimentos sobre funções