Podcast sobre o CSS - 020: funções
Até agora neste curso, você conheceu várias funções CSS.
No módulo grid,
você conheceu minmax()
e fit-content()
,
que ajudam a dimensionar elementos.
No módulo color,
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 você pode acessar sempre que precisar.
Cada função CSS tem uma finalidade específica, Nesta aula, você vai ter uma visão geral de alto nível, permitindo que você entenda muito melhor onde e como usá-los.
O que é uma função?
Uma função é uma parte de código nomeada e independente que conclui uma tarefa específica. Uma função é nomeada para que você possa chamá-la dentro do código e passar os dados para a função. Isso é conhecido como passagem de argumentos.
Muitas funções CSS são funções puras,
o que significa que, se você passar os mesmos argumentos para elas,
ela sempre retornará o mesmo resultado,
independentemente do que acontece no restante do código.
Essas funções geralmente são recalculadas conforme os valores mudam no CSS,
semelhantes a outros elementos da linguagem,
como valores em cascata calculados, como currentColor
.
No CSS, só é possível usar as funções fornecidas, em vez de escrever o seu próprio, mas as funções podem ser aninhadas umas nas outras em alguns contextos, o que lhes dá mais flexibilidade. Vamos falar mais sobre isso mais adiante neste módulo.
Seletores funcionais
.post :is(h1, h2, h3) {
line-height: 1.2;
}
Você aprendeu sobre seletores funcionais no
módulo de pseudoclasses
quais funções detalhadas, como
:is()
e
:not()
.
Os argumentos passados para essas funções são seletores de CSS,
que são avaliados.
Se houver uma correspondência com os elementos,
o restante da regra 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 podem ser manipulados ou redefinidos de acordo com o contexto.
Uma propriedade personalizada precisa ter dois traços (--
) e diferenciar maiúsculas de minúsculas.
O var()
recebe 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
transmitida como um argumento.
Se --base-color
for definido, var()
retornará o valor.
.my-element {
background: var(--base-color, hotpink);
}
Também é possível transmitir um valor de declaração de substituição para a função var()
.
Isso significa que, se --base-color
não for encontrado,
A declaração transmitida será usada, que neste caso de exemplo é a cor hotpink
.
Funções que retornam um valor
A função var()
é apenas uma das funções CSS que retornam um valor.
Funções como
attr()
e
url()
seguem uma estrutura semelhante a var()
:
transmita um ou mais argumentos e use-os no lado direito da declaração de CSS.
a::after {
content: attr(href);
}
A função attr()
está tomando o conteúdo do atributo href
do elemento <a>
e defini-lo como content
do pseudoelemento ::after
.
Se o valor do atributo href
do elemento <a>
mudar,
isso será refletido automaticamente no 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 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 as funções de cor no módulo color. Se você ainda não leu um, é altamente recomendável que leia.
Algumas funções de cor disponíveis no CSS
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
Como muitas outras linguagens de programação, O CSS oferece funções matemáticas úteis para auxiliar em vários tipos de cálculos.
calc()
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 combinadas.
.my-element {
width: calc(100% - 2rem);
}
Neste exemplo, a função calc()
é 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()
O min()
retorna o menor valor calculado de um ou mais argumentos passados.
O max()
faz o contrário: recebe 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 representa 20% da largura da janela de visualização), e 30rem
.
A altura precisa ser o maior valor entre 20vh
(que representa 20% da altura da janela de visualização) e 20rem
.
clamp().
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, a font-size
será fluida 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 de vw
terá o mesmo tamanho.
Multiplicar por uma unidade de 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.
Formas
A
clip-path
,
offset-path
e
shape-outside
As propriedades CSS usam formas para recortar 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()
pegar argumentos de configuração para dimensioná-los.
Formas mais complexas, como
polygon()
pegar pares de valores de eixos X e Y separados por vírgula 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%);
}
Como polygon()
, também existe 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 Illustrator ou Inkscape e copiá-las para seu CSS.
Transformações
Por último, desta visão geral das funções CSS são as funções de transformação,
que inclinam, redimensionam e até alteram 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 o método
rotate()
que gira um elemento em seu eixo central.
Você também pode usar o
rotateX()
,
rotateY()
e
rotateZ()
para girar um elemento em um eixo específico.
Você pode passar unidades de grau, rotação e radiano para determinar o nível de rotação.
.my-element {
transform: rotateX(10deg) rotateY(10deg) rotateZ(10deg);
}
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, assim como as outras funções de rotação, aceita graus, ângulos e voltas.
.my-element {
transform: rotate3d(1, 1, 1, 10deg);
}
Escala
Para mudar o dimensionamento de um elemento, use transform
e as
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 terão a mesma escala e definir ambos é uma abreviação de X e Y.
Assim como rotate()
,
existem
scaleX()
,
scaleY()
e
scaleZ()
para dimensionar um elemento em um eixo específico.
.my-element {
transform: scaleX(1.2) scaleY(1.2);
}
Também como a função rotate
, há uma
scale3d()
.
Esse processo é semelhante a scale()
, mas usa três argumentos: os fatores de escala X, Y e Z.
Traduzir
O translate()
movem um elemento enquanto ele mantém sua posição no fluxo do documento.
Eles aceitam valores de comprimento e porcentagem como argumentos.
A função translate()
traduz um elemento ao longo do eixo X se um argumento for definido.
e converte um elemento ao longo dos eixos X e Y se ambos os argumentos estiverem 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 determinado eixo,
usando
translateX
,
translateY
e
translateZ
.
Você também pode usar
translate3d
que permite definir a translação X, Y e Z em uma função.
Distorção
É possível distorcer um elemento usando o método
skew()
funções que aceitam ângulos como argumentos.
A função skew()
funciona de maneira muito semelhante à translate()
.
Se você definir apenas um argumento, ele só afetará o eixo X. Se você definir ambos,
isso afetará os eixos X e Y.
Você também pode usar
skewX
e
skewY
para afetar cada eixo de maneira independente.
.my-element {
transform: skew(10deg);
}
Perspectiva
Por último, você pode usar o
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, de seu artigo muito útil, mostra como pode ser usado,
junto com as propriedades perspective-origin-x
e perspective-origin-y
para criar experiências verdadeiramente 3D.
Funções de animação, gradientes e filtros
O CSS também tem 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, elas são abordadas nos módulos vinculados. Todas seguem uma estrutura semelhante às funções demonstradas neste módulo.
Teste seu conhecimento
Teste seu conhecimento sobre funções
As funções CSS podem ser identificadas por quais caracteres?
{}
:
::
[]
()
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?
rect()
circle()
ellipse()
inset()
polygon()
square()