Aula 3: Cores e planos de fundo em CSS

Nesta palestra, exploraremos como usar cores e planos de fundo para tornar seu site visualmente atraente. Compreender como aplicar cores e fundos de forma eficaz é a chave para criar designs web envolventes e esteticamente agradáveis.

Usando cores em CSS

CSS permite especificar cores de diversas maneiras, inclusive usando nomes de cores, valores hexadecimais, RGB, RGBA, HSL e HSLA.

1. Nomes de cores

CSS fornece uma ampla variedade de nomes de cores predefinidos.

• Exemplo:

  h1 {
    color: red;
  }

Isso definirá a cor do texto de todos os elementos

como vermelho.

2. Cores hexadecimais

Os códigos hexadecimais são uma combinação de números e letras de seis dígitos definidos por sua mistura de valores vermelhos, verdes e azuis (RGB).

• Exemplo:

  p {
    color: #3498db; /* A shade of blue */
  }

3. RGB e RGBA

RGB significa Vermelho, Verde e Azul. RGBA adiciona um canal Alpha para opacidade.

• Exemplo (RGB):

  div {
    color: rgb(255, 99, 71); /* Tomato color */
  }

• Exemplo (RGBA):

  div {
    background-color: rgba(255, 99, 71, 0.5); /* Semi-transparent tomato color */
  }

4. HSL e HSLA

HSL significa Matiz, Saturação e Luminosidade. HSLA inclui um canal Alpha.

• Exemplo (HSL):

  h2 {
    color: hsl(120, 100%, 50%); /* Pure green */
  }

• Exemplo (HSLA):

  h2 {
    color: hsla(120, 100%, 50%, 0.5); /* Semi-transparent green */
  }

Aplicando planos de fundo

Os planos de fundo em CSS podem aprimorar o design adicionando cores, imagens, gradientes e muito mais aos elementos.

1. Cor de fundo

Você pode definir a cor de fundo de qualquer elemento HTML usando a propriedade background-color.

• Exemplo:

  body {
    background-color: #f4f4f4; /* Light gray background */
  }

2. Imagens de fundo

CSS permite que você use imagens como plano de fundo.

• Exemplo:

  .banner {
    background-image: url('banner.jpg');
    background-size: cover;
    background-position: center;
  }

Isso definirá uma imagem de fundo em um elemento com o banner da classe. A imagem cobrirá toda a área e será centralizada.

3. Repetição de fundo

Controle se uma imagem de fundo se repete horizontalmente, verticalmente ou não se repete.

• Exemplo:

  .tile {
    background-image: url('tile.png');
    background-repeat: repeat; /* Repeats both horizontally and vertically */
  }

4. Posição de fundo

Você pode controlar a posição inicial da imagem de fundo.

• Exemplo:

  .header {
    background-image: url('header.jpg');
    background-position: top right;
  }

5. Gradiente de fundo

Os gradientes permitem criar transições suaves entre duas ou mais cores.

• Exemplo (gradiente linear):

  .gradient-box {
    background: linear-gradient(to right, #ff7e5f, #feb47b); /* Gradient from left to right */
  }

• Exemplo (Gradiente Radial):

  .circle-gradient {
    background: radial-gradient(circle, #ff7e5f, #feb47b); /* Circular gradient */
  }

Exemplo Prático:

Vamos colocar esses conceitos em prática com um exemplo que usa cores, uma imagem de fundo e um gradiente.

HTML:

  
Welcome to My Website
  
This is a simple example of using colors and backgrounds in CSS.

CSS:

/* Background color */
body {
  background-color: #f4f4f4;
}

/* Text color */
h1 {
  color: #2c3e50;
}

/* Background image with gradient overlay */
.content {
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('background.jpg');
  background-size: cover;
  color: white;
  padding: 20px;
  text-align: center;
}

/* Text color for paragraph */
p {
  color: #ecf0f1;
}

Neste exemplo:

• O corpo tem uma cor de fundo cinza claro.
• O texto

  é azul escuro.

• A div .content tem uma imagem de fundo com uma sobreposição de gradiente escuro, destacando o texto branco.
• O texto

  tem um tom claro para complementar o fundo.

Praticar Exercício

1. Crie uma página da Web que inclua títulos, parágrafos e divs.
2. Experimente diferentes formatos de cores (hex, RGB, HSL) para estilizar texto e planos de fundo.
3. Aplique uma imagem de fundo a uma seção e brinque com sua posição, tamanho e propriedades de repetição.
4. Crie uma seção com um fundo gradiente linear ou radial.

Próximo: Na próxima aula, abordaremos Tipografia e estilo de fontes em CSS, onde você aprenderá como escolher e personalizar fontes para melhorar a legibilidade do seu site e apelo. Vejo você lá!