Agora sim, cores

Introdução

Usamos CSS para alterar cores do nosso documento.
Tipos

background-color- para caixas
color- para textos
border-color- para caixas
outros

Valores

Podemos definir valores por:

palavra-chave- blue, transparent
hexadecimal- #990011
funções: rgb, rgba, hsl, hsla.

Voltar ao índice

Keyword named values

Entendendo as bases de como aplicar cores no CSS.
HTML
<div>
  <h1>Um texto aqui</h1>
  <p>Mais texto</p>
</div>
CSS
div {
  color: blue;
}

h1 {
  color: red;
}

Voltar ao índice

Hexadecimal

Aprendendo a trabalhar com valores hexadecimal
/*<hex-color> values 0-9 e A-F*/
color: #090;/* RED, GREEN, BLUE */
color: #009900;/* 00 RED, 99 GREEN, 00 BLUE */
color: #090a;
color:#009900aa;/* RED, GREEN, BLUE, transparent */

Voltar ao índice

RGB

RGB → Red, Green e Blue
O alpha representa a transparência da cor

O alpha é o quarto e último elemento em um RGB:

/*<rgb()> values */
color: rgb(34, 12, 64, 0.6)/* 0-255 */
color: rgb(34, 12, 64, 60%)/* Posso usar % */
color: rgba(34, 12, 64, 0.6)

Voltar ao índice

HSL

HSL → Hue - Saturation - Lightness

Na tabela HSL, trabalha-se com graus e porcentagem para atingir: Cor, Saturação, Luminosidade e, não necessariamente, Transparência.

color: hsl(180, 100%, 50%, 60%)
color: hsla(180, 100%, 50%, 60%)
Tabela HSL

Voltar ao índice

Global values

Valores globais da propriedade color.
/* Global values */
color: inheritr;/* Herda a cor do elemento anterior */
color: initial;/* Volta a sua cor inicial */
color: unset;/* Pega a cor do contexto */

Voltar ao índice

Conclusão

Entendendo esses princípios e com a prática, fica cada vez mais fácil entender como aplicar cores no CSS.

Introdução

Propriedade background.
Background
  • Define um fundo para o elemento;
  • Sua área de atuação é a caixa toda;
  • Por padrão, é transparente.
Exemplos:
  • Usar cores solidas;
  • Usar imagens;
  • Controlar:
    1. a posição das imagens;
    2. se elas se repetem ou não;
    3. o tamanho delas na caixa.
  • Usar cor e imagem juntas;
  • Usar cor gradiente.

Voltar ao índice

Background-color

A propriedadebackground-colordefine a cor de fundo do elemento selecionado.

HTML

<header class="lessoncolorheader1">

</header>
<main>
  <h4>Evolua rápido com a tecnologia</h4>
  <p>Junte-se a milhares de devs e acelere na direção dos seus objetivos</p>
</main>

CSS

.lessoncolorheader1 {
height:100px;
border:7px dashed blue;
background-color:rgb(55, 100, 50);
}

Resultado

Evolua rápido com a tecnologia

Junte-se a milhares de devs e acelere na direção dos seus objetivos

Voltar ao índice

Background-image-repeat

background-image&background-image-repeat
Backgroud-image

Para adicionar uma imagem como background podemos usar a propriedade background-image

HTML

<header class="lessoncolorheader2">

</header>
<main>
  <h4>Evolua rápido com a tecnologia</h4>
  <p>Junte-se a milhares de devs e acelere na direção dos seus objetivos</p>
</main>

CSS

.lessoncolorheader2 {
height:100px;
border:7px dashed blue;
background-color:rgb(55, 100, 50);
background-image: url(exemplo);
}

Resultado

Evolua rápido com a tecnologia

Junte-se a milhares de devs e acelere na direção dos seus objetivos

Background-image-repeat

Por padrão a imagem vai se repetir e podemos modificar essa opção usando a propriedade background-repeat

HTML

<header class="lessoncolorheader3">

</header>
<main>
  <h4>Evolua rápido com a tecnologia</h4>
  <p>Junte-se a milhares de devs e acelere na direção dos seus objetivos</p>
</main>

CSS

.lessoncolorheader3 {
height:200px;
border:7px dashed blue;
background-color:rgb(55, 100, 50);
background-image:url(exemplo);
background-repeat:no-repeat round;
}

Resultado

Evolua rápido com a tecnologia

Junte-se a milhares de devs e acelere na direção dos seus objetivos

Valores CSS parabackground-repeat
/* Values */
background-repeat:repeat-x;
background-repeat:repeat-y;
background-repeat:repeat;
background-repeat:space;
background-repeat:round;
background-repeat:no-repeat;
/* Podemos usar 2 valores: horizontal | vertical */

background-repeat:repeat space;
background-repeat:repeat repeat;
background-repeat:round space;
background-repeat:no-repeat round;

Voltar ao índice

Background-position

Com a propriedadebackground-positioné possível mudar a posição da imagem do background.

HTML

<header class="lessoncolorheader4">

</header>
<main>
  <h4>Evolua rápido com a tecnologia</h4>
  <p>Junte-se a milhares de devs e acelere na direção dos seus objetivos</p>
</main>

CSS

.lessoncolorheader4 {
height:200px;
border:7px dashed blue;
background-color:rgb(55, 100, 50);
background-image:url(exemplo);
background-repeat:no-repeat round;
background-position:right;
}

Resultado

Evolua rápido com a tecnologia

Junte-se a milhares de devs e acelere na direção dos seus objetivos

Valores CSS parabackground-position
/* Pricipais valores */
background-position:top;
background-position:bottom;
background-position:left;
background-position:right;
background-position:center;

Voltar ao índice

Background-size

Para mudar o tamanho da imagem do background usamos a propriedadebackground-size

HTML

<header class="lessoncolorheader5">

</header>
<main>
  <h4>Evolua rápido com a tecnologia</h4>
  <p>Junte-se a milhares de devs e acelere na direção dos seus objetivos</p>
</main>

CSS

.lessoncolorheader5 {
height:200px;
border:7px dashed blue;
background-color:rgb(55, 100, 50);
background-image:url(exemplo);
background-repeat:no-repeat round;
background-position:right;
background-size:contain;
}

Resultado

Evolua rápido com a tecnologia

Junte-se a milhares de devs e acelere na direção dos seus objetivos

Valores CSS parabackground-size
/* Values */
background-size:cover;
background-size:contain;
/* Podemos usar 2 valores: horizontal | vertical */

background-size:40% auto;
background-size:2em 25%;
background-size:auto 8px;
background-size:auto auto;

Voltar ao índice

Background-origin-clip

background-origin&background-clip
Background-origin

A propriedadebackground-originé quem define o ponto de origem de uma imagem específica.

HTML

<header class="lessoncolorheader6">

</header>
<main>
  <h4>Evolua rápido com a tecnologia</h4>
  <p>Junte-se a milhares de devs e acelere na direção dos seus objetivos</p>
</main>

CSS

.lessoncolorheader6 {
height:150px;
border:7px dashed blue;
background-color:rgb(55, 100, 50);
background-image:url(exemplo);
background-repeat:no-repeat round;
background-position:left;
background-size:contain;
background-origin:border-box;
}

Resultado

Evolua rápido com a tecnologia

Junte-se a milhares de devs e acelere na direção dos seus objetivos

Background-clip

Obackground-clipdefine se a cor ou imagem do background iniciam debaixo de sua área de borda, preenchimento ou conteúdo.

HTML

<header class="lessoncolorheader7">

</header>
<main>
  <h4>Evolua rápido com a tecnologia</h4>
  <p>Junte-se a milhares de devs e acelere na direção dos seus objetivos</p>
</main>

CSS

.lessoncolorheader7 {
height:150px;
border:7px dashed blue;
background-color:rgb(55, 100, 50);
background-image:url(exemplo);
background-repeat:no-repeat round;
background-position:center;
background-size:contain;
background-origin:border-box;
background-clip:border-box;
}

Resultado

Evolua rápido com a tecnologia

Junte-se a milhares de devs e acelere na direção dos seus objetivos

Valores CSS parabackground-origin e parabackground-clip

background-origin

/* Principais Values */
background-origin:border-box;
background-origin:padding-box;
background-origin:content-box;

background-clip

/* Principais Values */
background-clip:border-box;
background-clip:padding-box;
background-clip:content-box;
background-clip:text;

Voltar ao índice

Background-attachment

background-attachment
Background-attachment

A propriedadebackground-attachmentdetermina se a posição da imagem vai ser fixa ou se vai rolar junto com o conteúdo.

HTML

<header>

</header>
<main class="lessoncolormain1">
  <h4>Evolua rápido com a tecnologia</h4>
  <p>Junte-se a milhares de devs e acelere na direção dos seus objetivos</p>

  <h4>Evolua rápido com a tecnologia</h4>
  <p>Junte-se a milhares de devs e acelere na direção dos seus objetivos</p>

  <h4>Evolua rápido com a tecnologia</h4>
  <p>Junte-se a milhares de devs e acelere na direção dos seus objetivos</p>

  <h4>Evolua rápido com a tecnologia</h4>
  <p>Junte-se a milhares de devs e acelere na direção dos seus objetivos</p>

  <h4>Evolua rápido com a tecnologia</h4>
  <p>Junte-se a milhares de devs e acelere na direção dos seus objetivos</p>
</main>

CSS

.lessoncolormain1 {
background-color:rgb(55, 100, 50);
background-image:url(exemplo);
background-repeat:space round;
background-position:right;
background-size:200px;
background-origin:content-box;
background-clip:content-box;
background-attachment:fixed;
}

.lessoncolormain1 h4,
.lessoncolormain1 p {
color:black;
font-size:15px;
background-color:rgb(55, 100, 50, 0%);
background-image:unset;
}

Resultado

Evolua rápido com a tecnologia

Junte-se a milhares de devs e acelere na direção dos seus objetivos

Evolua rápido com a tecnologia

Junte-se a milhares de devs e acelere na direção dos seus objetivos

Evolua rápido com a tecnologia

Junte-se a milhares de devs e acelere na direção dos seus objetivos

Evolua rápido com a tecnologia

Junte-se a milhares de devs e acelere na direção dos seus objetivos

Evolua rápido com a tecnologia

Junte-se a milhares de devs e acelere na direção dos seus objetivos

Valores CSS parabackground-attachment
/* Principais valores */
background-attachment:scroll;
background-attachment:fixed;
background-attachment:local;

Voltar ao índice

Shorthand

É possível usar o shorthandbackgroundpara definir todos os valores do background.

HTML

<header class="lessoncolorheader8">

</header>
<main>
  <h4>Evolua rápido com a tecnologia</h4>
  <p>Junte-se a milhares de devs e acelere na direção dos seus objetivos</p>
</main>

CSS

.lessoncolorheader8 {
height:150px;
border:7px dashed blue;

background:rgb(55, 100, 50)
url(exemplo) no-repeat right 10px top / 50px content-box border-box;
}

Resultado

Evolua rápido com a tecnologia

Junte-se a milhares de devs e acelere na direção dos seus objetivos

Voltar ao índice

Gradient

linear-gradient()&radial-gradient()
linear-gradient()é a função usada para criar gradient linear com o CSS.

HTML

<header class="lessoncolorheader9">

</header>
<main>
  <h4>Evolua rápido com a tecnologia</h4>
  <p>Junte-se a milhares de devs e acelere na direção dos seus objetivos</p>
</main>

CSS

.lessoncolorheader9 {
height:150px;
border:7px dashed blue;

background:linear-gradient(45deg, red, yellow);
}

Resultado

Evolua rápido com a tecnologia

Junte-se a milhares de devs e acelere na direção dos seus objetivos

radial-gradient()é a função usada para criar gradient circular.

HTML

<header class="lessoncolorheader10">

</header>
<main>
  <h4>Evolua rápido com a tecnologia</h4>
  <p>Junte-se a milhares de devs e acelere na direção dos seus objetivos</p>
</main>

CSS

.lessoncolorheader10 {
height:150px;
border:7px dashed blue;

background:radial-gradient(rgba(0, 255, 0, 1), rgba(0, 255, 255, 1), rgba(0, 0, 255, 100%));
}

Resultado

Evolua rápido com a tecnologia

Junte-se a milhares de devs e acelere na direção dos seus objetivos

Voltar ao índice

Múltiplos valores

Podemos aplicar múltiplos backgrounds em um mesmo elemento, podendo ter cor sólida, gradiente ou imagem.
Como fazer?

Para isso basta separarpor vírgulacada background.

Exemplo:

HTML

<header class="lessoncolorheader11">

</header>
<main>
  <h4>Evolua rápido com a tecnologia</h4>
  <p>Junte-se a milhares de devs e acelere na direção dos seus objetivos</p>
</main>

CSS

.lessoncolorheader11 {
height:150px;
border:7px dashed blue;

background:linear-gradient(45deg, rgba(255, 255, 255, 0), rgba(255, 0, 0, 0.3)),rgb(55, 100, 50) url(exemplo) no-repeat right 10px top / 50px content-box border-box;
}

Resultado

Evolua rápido com a tecnologia

Junte-se a milhares de devs e acelere na direção dos seus objetivos

Voltar ao índice