Cores e Background

Cores

Usamos CSS para dar cores e vida ao nosso documento

Tipos:

background-color (para fundo das caixas);

color (para textos);

border-color (para borda das caixas);

Entre outros...

Valores:

palavra-chave (blue, transparent)

hexadecimal (#990011)

funções: rgb, rgba, hsl, hsla

Exemplo

Currentcolor = palavra chave da cor.
element {
color: currentcolor;
}

Aqui temos as próprias cores.
element {
color: red;
color: orange;
color: blue;
color: brown;
}

Hexadecimal teremos:
element {
color: #841 (red, green, blue);
color: #995522;
color: #927a (o "a" representa transparência da cor);
color: #000099aa;
}

RGB (red, green, blue) Values
element {
color: rgb(240, 15, 64, 0.5) (Aqui o 4 elemento informado é a transparência, podendo ser número decimal ou porcentagem);
color: rgba(255, 155, 210, 0.9);
}

HSL (hue, saturation, luminance) Values
element {
color: hsl(35, 90%, 50%, 0.6) (Aqui o 4 elemento informado é a transparência, podendo ser número decimal ou porcentagem);
color: hsla(255, 155, 210, 40%);
}
Para entender melhor o HSL veja algumas imagens aqui.

Global Values element {
color: inherit (inherit = herança);
color: initial (initial = inicial);
color: unset (unset = não atribuído);
}

Para saber mais sobre cores acesse a página de cores no MDN.

Background

1. Define um fundo para o elemento;

2. Área de atuação é a caixa toda;

3. É transparente, por padrão, mas pode ser editado.

Exemplos:

1) Usar cores sólidas;

2) Usar imagens como fundo;

3) Controlar:

- Posição de imagens;

- Se repetem ou não;

- Tamanho das imagens na caixa.

4) Usar cor de imagem juntas;

5) Usar e criar gradientes.

Background-Color

Definimos por ele a cor de fundo do documento, sendo a cor tipo RGB, color, etc...

Background-Image

Pelo background-image colocaremos uma imagem como nosso plano de fundo do documento, podendo ser url ou de um arquivo do seu próprio dispositivo. Podemos escolher também se a imagem vai ou não se repetir, pois dependendo do seu tamanho, por padrão ela repetirá para o eixo X e Ypara preencher totalmente o background. Para que a imagem não se repita faremos: background-repeat: no-repeat;
Porém podemos definir que essa imagem repita apenas em um dos eixos, seja ele vertical (Y) ou Horizontal (X): background-repeat: repeat-y; ou background-repeat: repeat-x;

Background-Position

Por ele é possível alterarmos a posição da nossa imagem com os atributos de posição: top, right, bottom, left e center; Podemos mesclar os atributos direcionando a imagem para ficar no canto superior direito por exemplo.

Background-Size

Usado para definirmos o tamanho da imagem. Aqui há um atributo interessante o contain, ele conterá a imagem dentro da Box dela. Também há o cover que vai expandir a imagem fora a fora. Porém, podemos definir o tamanho da imagem por porcentagem, mas fique atento, colocando apenas um valor ele se aplicará para largura da imagem, deixando altura automática e colocando o 2° valor, o mesmo será atribuido para altura da mesma.
Podemos usar os valores de redimensionamento como: em, px...

Background-Origin

Permite definirmos onde nossa imagem iniciará, através de seus atributos, como: border-box, content-box(padrão), padding-box(partindo do padding)

Background-Attachment

Controla o scroll da imagem, ou seja, quando "scrollar" a página a imagem ficará fixa onde está ou acompanhará? Bom, pelo background-attachment podemos definir isso.
background-attachment: fixed | background-attachment: scroll;

Gradiente

Podemos criar um gradiente para nosso background definindo-o como linear ou radial por exemplo e informando suas cores, além é claro de ser possível direcionar o angulo dele com deg.

OBS.: Podemos juntar todos os atributos Background que criamos em sua Shorthand, como foi visto.