Cores

Em CSS existem três formas para definir uma cor: por palavra-chave, por valor hexadecimal e por valor RGB.

Anteriormente já vimos como definir uma cor através de valor hexadecimal: basta declarar um valor com seis dígitos hexadecimais (0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F) precedido do caractere cerquilha (#) como no exemplo abaixo:

    background-color: #99AF1C;
          

Cada código hexadecimal representa na verdade uma cor RGB - os dois primeiros dígitos indicam a intensidade de vermelho (Red), os dois seguintes a intensidade de verde (Green) e os dois últimos a intensidade de azul (Blue). O site W3Schools disponibiliza uma ferramenta para escolha de cor e código hexadecimal em https://www.w3schools.com/colors/colors_picker.asp

A declaração de cor por valor RGB é formada por três valores separados por vírgula e colocados entre parênteses precedidos pela sigla rgb como no exemplo a seguir:

    background-color: rgb(125, 222, 90);
          

É permitido utilizar qualquer valor inteiro entre 0 e 255. Também é permitida a utilização de valores em porcentagem variando de 0% a 100%. No entanto, não é permitido misturar valores em porcentagem com valores absolutos. O próximo exemplo define a mesma cor do exemplo anterior através de valores em porcentagem.

    background-color: rgb(30%, 25%, 70%);
          

A definição de cores por palavra chave já foi exemplificada em aulas anteriores. O endereço https://www.w3schools.com/colors/colors_names.asp contém a lista de palavras-chave disponíveis.

Fundos

Anteriormente, já vimos como formatar a cor de fundo de um elemento através da propriedade background-color. Adicionalmente, a CSS disponibiliza as seguintes propriedades que nos permitem aplicar outros efeitos de fundo: background-image, background-repeat, background-attachment, background-position, background-size e background.

Por padrão, o valor das propriedades de fundo não são herdadas pelos elementos filhos. No entanto, é possível o uso do valor inherit para forçar o comportamento de herança.

Além de uma cor CSS, a propriedade background-color admite o valor transparent, o qual é o valor padrão. Consequentemente, quando não definimos a cor de fundo dos elementos filhos temos a falsa impressão de que estes herdam a cor de fundo do pai.

A propriedade background-image nos permite definir uma imagem de fundo para um elemento html. O valor da propriedade deve ser o nome do arquivo ou endereço da imagem, inherit ou none (valor padrão).

A propriedade background-repeat define como a imagem de fundo será repetida. Os valores possíveis são inherit, repeat (valor padrão), repeat-x, repeat-y e no-repeat. O próximo exemplo ilustra o uso dos diferentes valores para a propriedade (estrela.png).

    div{
      background-image: url(cores_e_fundos/estrela.png);
      border: solid 1px black;
      height: 100px;
    }

    <div></div>
    <div style="background-repeat: repeat-x"></div>
    <div style="background-repeat: repeat-y"></div>
    <div style="background-repeat: no-repeat"></div>
          

background-image e background-repeat são muito utilizadas com imagens de textura na criação de páginas visualmente agradáveis. Na web, há diversos sites que disponibilizam imagens de textura com essa finalidade. Segue um exemplo desta forma de uso (tree_bark.png):

    div{ 
      background-image: url(cores_e_fundos/tree_bark.png)
      background-repeat: repeat;
    }

    <div>
      <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      </p>
    </div>
          

A propriedade background-attachment indica se a imagem de fundo permanecerá fixa ou se irá rolar junto à visualização. Os valores permitidos são inherit, scroll (valor padrão) e fixed. Verifique esta diferença na prática criando uma página contendo uma imagem de fundo sem repetição e com conteúdo suficiente para permitir a rolagem da página.

A propriedade background-position define a posição inicial da imagem de fundo. Deve ser declarada em conjunto com dois valores: coordenada x (eixo horizontal) e coordenada y (eixo vertical). A origem do sistema de coordenadas (ponto 0 0) localiza-se no canto superior esquerdo. Para as coordenadas podemos informar medidas em unidades CSS ou as palavras chaves top, right, bottom, left e center. Por padrão, esta propriedade assume o valor left top (valor equivalente a 0 0). O exemplo a seguir ilustra o uso desta propriedade.

    div{
      background-image: url(cores_e_fundos/estrela.png);
      background-repeat: no-repeat;
      background-position: center center;
      border: solid 1px black;
      height: 100px;
    }

    <div></div>
          

A propriedade background-size é utilizada para definir o tamanho da imagem. Podem ser utilizados valores numéricos (largura e altura) ou os valores auto (valor padrão - usa o tamanho original da imagem), inherit, cover e contain.

Quando utilizamos valores numéricos podemos fornecer um ou dois valores. Ao utilizar apenas um valor numérico estaremos indicando a largura da imagem e a altura será calculada automaticamente de forma a preservar as proporções da imagem. Ao utilizar dois valores, estes corresponderão respectivamente à largura e à altura da imagem. Caso nosso desejo seja indicar apenas a altura mantendo as proporções da imagem, devemos utilizar auto como primeiro valor.

cover redimensiona a imagem, mantendo suas proporções, de forma que suas dimensões coincidam com as dimensões do elemento. Caso a imagem e o elemento possua proporções diferentes, a imagem será cortada na vertical ou na horizontal.

contain redimensiona a imagem, mantendo suas proporções e sem realizar cortes, de forma que esta fique totalmente visível. Os exemplos a seguir demonstram alguns usos da propriedadade background-size.

    div{
      background-image: url(cores_e_fundos/estrela.png);
      background-repeat: no-repeat;
      border: solid 1px black;
      height: 100px;
    }

    <div style="background-size: auto 65px"></div>
    <div style="background-size: cover"></div>
    <div style="background-size: contain"></div>
          

A propriedade background é um facilitador que permite a definição de várias propriedades de fundo em uma única declaração. Por exemplo, as declarações CSS a seguir

    background-color: pink;
    background-image: url(cores_e_fundos/estrela.png);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: 50% 30%;
          

podem ser substituídas, com a obtenção do mesmo resultado, pela seguinte declaração única:

    background: pink url(cores_e_fundos/estrela.png) 50% 30% no-repeat fixed;
          

A propriedade background não exige a declaração de valores para todas as outras propriedades de background. Assim, as propriedades omitidas assumirão seus valores padrão ou os valores definidos por regras CSS mais genéricas.