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 nas 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 hifens (--
) 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 acima, 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 de 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()
, rgba()
, hsl()
, hsla()
, hwb()
, lab()
e lch()
.
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
Assim como muitas outras linguagens de programação, o CSS oferece funções matemáticas úteis para ajudar em vários tipos de cálculo.
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
vai 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
()
neste artigo.
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 no 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 recebe 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.
Skewing
É 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 transformação de propriedades, 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 animate 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, ele é abordado 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
Quais caracteres identificam as funções CSS?
{}
:
::
[]
()
O CSS tem funções matemáticas integradas?
Uma função calc()
pode ser colocada dentro de outra calc()
, como font-size: calc(10px + calc(5px * 3));
Quais das opções a seguir são funções de forma CSS?
circle()
rect()
square()
polygon()
inset()
ellipse()