CSS3 Cor (Color)

CSS3foram fornecidas várias novas maneiras de definir valores de cor.

No CSS3definir cor

Na seção anterior, você aprendeu como usarpalavra-chave de cor e representação RGBDefinir cor. Além disso, o CSS3Foram adicionados novos símbolos de funções para definir valores de cor como elemento, como rgba(), hsl() e hsla().

Nesta seção, discutiremos cada um desses modelos de cor.

valor de cor RGBA

Você pode usar o símbolo de função rgba() no modelo RGBA (vermelho-Verde-Azul-alpha) define a cor. O modelo de cor RGBA é uma extensão do modelo de cor RGB com canal alpha, usado para especificar a opacidade da cor.

O parâmetro alpha aceita valores de 0.0 (completamente transparente) a1.0 (não transparente) do valor.

h1　{
　　　　color:　rgba(0,0,255,0.5);
}
p　{
　　　　background-color:　rgba(0%,0%,100%,0.3);
}

Valores de cor HSL

A cor também pode ser definida usando o sinal de função hsl() no modelo HSL (tom-Saturação-brilho）。O tom é representado como um ângulo de um círculo ou círculo (isto é, representado como um arco-íris circular) de 0 a360）。O ângulo é fornecido com menos unidades, pois o ângulo geralmente é medido em graus, e a unidade é implícita no CSS.

A saturação e o brilho são representados em porcentagem.100% de saturação representa cores completas e 0% é sombra cinza. No entanto,100% brilho é branco, 0% brilho é preto,50% brilho é normal. Veja o seguinte exemplo:

h1　{
　　　　color:　hsl(360,70%,60%);
}
p　{
　　　　background-color:　hsl(480,50%,80%);
}

Valores de cor HSLA

Pode-se usar o sinal de função hsla() no modelo HSLA (tono saturação-Brilho-alpha) define a cor. O modelo de cor HSLA é uma extensão do modelo de cor HSL com canal alpha, que especifica a opacidade da cor.

O parâmetro alpha aceita valores de 0.0 (completamente transparente) a1.0 (não transparente) do valor.

h1　{
　　　　color:　hsla(360,80%,50%,0.5);
}
p　{
　　　　background-color:　hsla(480,60%,30%,0.3);
}