Funções em CSS

Roger.Santos 03/01/2023

Módulo Progresso

0% Concluído

Curso de CSS 3 Funções Funções em CSS

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.

Curso de CSS 3

Participantes 867

Funções em CSS

Roger.Santos 03/01/2023

Exercício 1: Cálculos CSS

Exercício 2: Transparência e Cores CSS