Funções são comumente conhecidas em linguagens de programação onde recebem parâmetros de entrada, faz o processamento internamente e retorna um resultado na maioria dos casos. No CSS não é diferente, existem algumas funões pre-definidas na linguagem que servem para diversas coisas e hoje vou te mostrar alguns exemplos.
Mas antes deixa eu te explicar a sintaxe de uma função em CSS para que você possa identificar de maneira fácil.
nome-da-funcao(parametros, ...)
agora vamos a alguns exemplos
calc(100% - 100); /* permite que você faça calculos */ rgb(0, 255, 100); /* define uma cor em RGB */ rgb(0, 255, 100, .8); /* define uma cor em RGB com trasnsparencia, onde o ultimo parametro vai de 0.0 a 1.0, onde 1 é 100% preenchido e 0 é totalmente transparente */ rotate(35deg); /* utilizada junto com a propriedade transform, rotaciona o elemento */ max(40%, 400px); /* utilizada o maior valor, se 40% for maior que 400px usa o 40% caso contrario usa o 400px */ min(40%, 400px); /* utilizada o menor valor, oposto do max */
Acredito que essas são as funcões mais utilizaddas no CSS, Existem diversas outras funcões mas não precisa decoreba, você vai aprendendo no caminho.
Exercício 1: Cálculos CSS
Crie um arquivo HTML (index.html) com a seguinte estrutura:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="element"></div>
</body>
</html>
Crie um elemento HTML, como um <div>, e defina seu tamanho como 300px de largura e 200px de altura. Em seguida, use a função CSS calc() para ajustar o tamanho do elemento. Faça com que a largura seja reduzida em 20 pixels e a altura seja aumentada em 10 pixels usando a função calc(). Certifique-se de que o resultado final seja visível no seu elemento.
Exercício 2: Transparência e Cores CSS
Crie um arquivo HTML (index.html) com a seguinte estrutura:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>
Crie um elemento HTML, como um <div>, e defina sua cor de fundo usando a função CSS rgba(). A cor de fundo deve ser um verde sólido com uma opacidade de 50%. Em seguida, crie um elemento filho dentro deste <div> e ajuste a cor de fundo do filho usando a função rgb(). A cor de fundo do filho deve ser um tom de azul sólido. Aplique uma rotação de 45 graus no filho usando a função rotate() e a propriedade transform para girá-lo. Certifique-se de que o resultado final seja visível no seu elemento.
Lembre-se de que você deve criar um arquivo HTML e CSS separados para testar esses exercícios. As funções CSS mencionadas na aula serão aplicadas nos estilos do seu elemento HTML.