Ainda caminhando no básico, encontramos as cores. Para mudar a cor de um texto, de uma caixa ou do que você quiser a partir dos códigos, existem várias formas de colocar, sendo o mais prático o código hexadecimal. Antes de apresentar todas as formas, utilizaremos o código abaixo para mudar a cor do que for:
seletor {
color: valor;
}
De acordo com o que aprendemos na lição passada, vocês sabem que seletor é o elemento a ser editado, então se quiséssemos mudar a cor de um menu, o seletor seria ".menu" ou algo parecido, mas ainda não importa para nós. Para mudar a cor, a propriedade será "color" e o valor deve ser sempre seguido de ;, que determina o fim de uma propriedade, mas não o fim de um seletor. Agora veremos quais os valores que podemos adicionar ao se tratar de cores:
1 - Código Hexadecimal (recomendo)
O código hexadecimal é o que mais vemos em códigos, então esse seria sua prioridade. Tal código é sempre iniciado com # e após isso apresenta seis dígitos, que dão origem a nossa cor. Veja algumas exemplos de propriedades seguidas de códigos hexadecimais:
color: #ffccff;color: #fff;color: #dddee8;
O que você vê em negrito é o código, tirando o #, mas você nunca deve esquecê-lo na hora de aplicar, pois sem ele nada vai funcionar em relação ao hex. O último exemplo é de três dígitos e serve apenas para cores onde a mesma letra/número se repete (#999, #555). Mas como fazemos para encontrar o código? Vários programas o dão, como por exemplo o Photoshop e até mesmo online você pode conseguir, veja aqui. É só configurar sua cor e o código aparecerá no último quadrinho, onde está nomeado de "Hex".
2. Código RGB
O RGB é o mais complicado, em si. Ele é o tipo que você gasta mais tempo para conseguir o código, pois trabalha com três numerações: Red, Green e Blue (RGB). Para usá-lo, deve ser da seguinte forma:
color: rgb(245,215,0);color: rgb(221,222,232);
Ele é seguido de três propriedades que expliquei acima, então você precisa combinar os três para conseguir a cor que deseja. Para conseguir o código você pode usar programas como Photoshop ou aquele gerador que eu linkei no Hex, mas os códigos não aparecem naquela caixinha e sim nas outras três que tem R: G: e B: facilmente visíveis. É só copiar e colar na ordem, nada além disso e sempre usando o modelo dado.
- Existe também o RGBA
O RGBA é a mesma coisa que o RGB, só que apresenta uma função a mais: Opacidade. O "a" que foi adicionado refere-se aos canais "alpha" e por isso você pode editar a opacidade da sua cor e elemento.
color: rgba(245,215,0, 0.5);
Esse 0.5 representa a opacidade, que varia de 0 à 1.
- Código pelo nome da cor
Esse seria o mais simples, mas é muito limitado. Você pode adicionar a cor a partir do nome, mas as opções são pouquíssimas e por isso não é vantagem. As cores são pelo nome em inglês, por exemplo:
color: black;color: red;
Nenhum segredo, mas é a que menos recomendo. Espero que tenha aprendido tudo, lembrando que estes são apenas as coisas que tenho conhecimento, pode ser que haja muito mais por aí. Até a próxima lição!
