bg cover

Box Model e Background

Prof. Me. Danilo Bueno

Modelo de caixa

Conceito fundamental para entender o layout na web;
Absolutamente tudo em uma página web é uma caixa retangular.
Essas caixas podem ter outras caixas dentro delas e podem ser posicionadas na página.
Essas caixas possuem propriedades que definem seu tamanho, espaçamento, bordas, margens, fundo, sombra, etc.

bg contain

Margem

A margem é um espaço invisível ao redor da sua caixa.
Ela empurra outros elementos para longe da caixa.

.box {
  margin-top: 10px; /* margem de 10px em cima */
  margin-bottom: 10px; /* margem de 10px em baixo */
  margin-left: 10px; /* margem de 10px à esquerda */
  margin-right: 10px; /* margem de 10px à direita */

  /* propriedade abreviada (shorthand) */
  margin: 20px; /* margem de 20px em todos os lados */
  margin: 10px 20px; /* margem vertical de 10px e horizontal de 20px */
  margin: 10px 15px 20px 25px; /* margem em cima, direita, baixo e esquerda */
}

Padding (Preenchimento)

O padding é um espaço entre o conteúdo e a borda.
Ele afasta o conteúdo da borda da caixa.

.box {
  padding-top: 10px; /* 10px em cima */
  padding-bottom: 10px; /* 10px em baixo */
  padding-left: 10px; /* 10px à esquerda */
  padding-right: 10px; /* 10px à direita */

  /* propriedade abreviada (shorthand) */
  padding: 20px; /* 20px em todos os lados */
  padding: 10px 20px; /* vertical de 10px e horizontal de 20px */
  padding: 10px 15px 20px 25px; /* preenchimento de cima, direita, baixo e esquerda */
}

Border

A borda é a linha que envolve a caixa.

box {
  border-width: 2px; /* largura da borda */
  border-style: solid; /* estilo da borda */
  border-color: black; /* cor da borda */

  /* propriedade abreviada (shorthand) */
  border: 2px solid black; /* largura, estilo e cor da borda */
}

Estilos da borda

90%

Border radius

A propriedade border-radius arredonda os cantos da borda.

.box {
  border-radius: 10px; /* arredonda todos os cantos com raio de 10px */
  border-radius: 10px 20px 30px 40px;
}

Box Shadow

A propriedade adiciona uma sombra ao redor da caixa.

.box {
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
}

Width e Height

Define a largura e altura da caixa.
É necessário ter cuidado ao definir tais valores, porque o conteúdo pode ser maior que a caixa em que ele está contido.

.box {
  width: 200px; /* largura da caixa */
  height: 100px; /* altura da caixa */
}

O uso de uma altura definida pode causar problemas, por isso, é mais seguro deixar a altura para ser determinada automaticamente.

Min/Max Width e Height

Define valores mínimos e máximos para a largura e altura;
Vai encolher ou expandir a caixa conforme o conteúdo, mas não vai ultrapassar os limites definidos.

.box {
  min-width: 200px; /* largura mínima */
  max-width: 600px; /* largura máxima */
}

Box-Sizing

Controla como a largura e altura totais da caixa são calculadas.

.box {
  /* valor padrão, largura e altura não incluem padding e border */
  box-sizing: content-box;

  /* inclui padding e border na largura e altura totais */
  box-sizing: border-box;
}

Uma boa prática é definir box-sizing: border-box; para todos os elementos da página.

Exemplo Completo

.box {
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 2px solid black;
  margin: 10px;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
  box-sizing: border-box;
}

Alinhamento horizontal

Truque para centralizar uma caixa horizontalmente
A caixa deve estar dentro de seu contêiner pai.
Necessário definir uma largura fixa para a caixa.

.box {
  margin: 0 auto; /* centraliza horizontalmente */
  width: 200px;
}

Background

Atrás de cada caixa CSS há uma camada especializada chamada camada de fundo (background).

bg right

Background color

background-color: define a cor de fundo da caixa.
pode assumir o valor transparent (padrão).

.box {
  background-color: lightblue; /* cor de fundo */
}

Background image

background-image: define uma imagem de fundo na caixa.
- se repete em ambos os eixos;
- é posicionada no canto superior esquerdo;
- é exibida em seu tamanho original.

.box {
  background-image: url("imagem.jpg");
}

Background repeat

background-repeat: controla a repetição da imagem.
- repeat (padrão): repete em ambos os eixos;
- no-repeat: não repete;
- repeat-x: repete apenas no eixo x (horizontal);
- repeat-y: repete apenas no eixo y (vertical).

.box {
  background-repeat: no-repeat; /* não repete a imagem */
}

Background position

background-position: define a posição da imagem de fundo.
- valores comuns: left, center, right, top, bottom;
- pode usar valores em pixels ou porcentagem.

.box {
  /* posiciona a imagem no topo à esquerda */
  background-position: top left;
  /* posiciona a imagem em 10px do topo e 20px da esquerda */
  background-position: 10px 20px;
}

Background size

background-size: define o tamanho da imagem de fundo.
- auto (padrão): tamanho original da imagem;
- cover: cobre toda a área da caixa, pode fazer com que a imagem seja cortada ou redimensionada.
- contain: ajusta a imagem para caber dentro da caixa, mantendo a proporção, pode deixar espaços vazios.
- 10px 20px: define largura e altura específicas, pode distorcer a imagem.
- Exemplo

Gradientes

Transições suaves entre duas ou mais cores.
background-image: pode ser usado para criar gradientes.
tipos: linear-gradient(), radial-gradient() etc.
CSS Gradients Guide

.box {
  background-image: linear-gradient(to right, red, blue);
}

Gradientes (Gradients)

Padrões de fundo (Background Patterns)

Obrigado!

[email protected] · website/docs · github