CSS 3: Backgrounds e Borders

O módulo CSS3 Backgrounds and Borders é uma parte essencial das especificações do CSS3, introduzindo várias propriedades que oferecem maior controle sobre o estilo e a aparência de elementos HTML em relação a fundos e bordas. Vamos explorar algumas das propriedades principais, seu histórico e fornecer exemplos práticos.

Código limpoHistórico:

  • CSS 2.1:
    As versões anteriores do CSS já tinham propriedades para estilizar fundos e bordas, contudo, a necessidade de um maior controle e flexibilidade levou ao desenvolvimento do módulo CSS3 Backgrounds and Borders.
  • CSS3:
    Este módulo foi dividido em duas partes separadas em algumas especificações, mas aqui abordaremos tanto backgrounds quanto borders.
    Ele foi projetado para proporcionar uma ampla gama de opções de estilização para designers e desenvolvedores web.

Propriedades Principais:

  • background-color
    • Define a cor do plano de fundo do elemento.
      div {
      
      background-color: #3498db;
      
      }
  • background-image:
    • Define uma imagem como plano de fundo.
      div {
      
      background-image: url('background.jpg');
      
      }
  • background-size:
    • Especifica o tamanho do plano de fundo (pode ser `cover`, `contain` ou valores específicos).
      div {
      
      background-size: cover;
      
      }

4. border
Esta propriedade abreviada define todas as propriedades da borda ao mesmo tempo.

div {
border: 2px solid #e74c3c;
}

5. border-radius
Define o raio dos cantos da borda.

div {
border-radius: 10px;
}

6. box-shadow
Adiciona uma sombra ao redor do elemento.

div {
box-shadow: 5px 5px 10px #888888;
}

Exemplos Práticos

Backgrounds

/* Utilizando gradientes como plano de fundo */
div {
background: linear-gradient(to right, #3498db, #2c3e50);
}

/* Usando uma imagem de fundo com repetição */
div {
background: url('pattern.png') repeat;
}

/* Aplicando uma imagem de fundo em tamanho específico */
div {
background: url('background.jpg') no-repeat;
background-size: 100px 100px;
}

Borders

```css
/* Adicionando uma borda sólida */
div {
border: 2px solid #e74c3c;
}

/* Criando uma borda arredondada */
div {
border: 1px solid #27ae60;
border-radius: 10px;
}

/* Aplicando uma sombra à borda */
div {
border: 1px solid #3498db;
box-shadow: 5px 5px 10px #888888;
}

Essas propriedades e exemplos ilustram a flexibilidade proporcionada pelo módulo CSS3 Backgrounds and Borders, permitindo aos desenvolvedores web personalizar a aparência dos elementos de maneira mais detalhada e esteticamente agradável.

Referência no W3C
https://www.w3.org/TR/css-backgrounds-3/

Comece a ver sobre CSS 3 aqui.