tutoriais mais recente desenvolvimento web
×

CSS Tutorial

CSS CASA CSS Introdução CSS Sintaxe CSS Como CSS cores CSS Fundos CSS Fronteiras CSS margens CSS Preenchimento CSS Altura largura CSS Texto CSS fontes CSS ligações CSS listas CSS tabelas CSS Modelo de Caixa CSS Contorno CSS de exibição CSS Largura máxima CSS Posição CSS Flutuador CSS Inline-block CSS Alinhar CSS combinadores CSS Pseudo-classe CSS Pseudo-elemento CSS Barra de navegação CSS dropdowns CSS tooltips CSS Galeria de imagens CSS Opacidade imagem CSS Sprites imagem CSS attr seletores Formas CSS CSS contadores

CSS3

CSS3 Introdução CSS3 Cantos arredondados CSS3 Imagens de fronteira CSS3 Fundos CSS3 cores CSS3 gradientes CSS3 sombras CSS3 Texto CSS3 fontes CSS3 transformações 2D CSS3 transformações 3D CSS3 transições CSS3 animações CSS3 imagens CSS3 botões CSS3 Paginação CSS3 várias Colunas CSS3 Interface de usuário CSS3 box Dimensionamento CSS3 Flexbox CSS3 Consultas de mídia CSS3 Exemplos MQ

CSS Web design responsivo

Web design responsivo Intro Web design responsivo Janela de exibição Web design responsivo Grid View Web design responsivo Consultas de mídia Web design responsivo imagens Web design responsivo vídeos Web design responsivo Frameworks

CSS Examples

CSS Exemplos CSS Questionário CSS Certificado

CSS References

CSS Referência CSS seletores CSS Funções CSS Aural referência CSS Web Safe fontes CSS Animatable CSS Unidades CSS PX-EM conversor CSS cores CSS Valores de cor CSS Nomes das cores CSS3 Suporte a navegadores

 

CSS cores

❮ Anterior Próxima Capítulo ❯

Cores CSS3

CSS suporta nomes de cores, hexadecimal e cores RGB.

Além disso, também introduz CSS3:

  • cores RGBA
  • cores HSL
  • cores HSLA
  • opacidade

Suporte a navegadores

Os números na tabela especificar a primeira versão do browser que suporta totalmente os valores de cor CSS3 / propriedade.

Propriedade
RGBA, HSL, and HSLA 4.0 9.0 3.0 3.1 10.1
opacidade 4.0 9 2.0 3.1 10.1

Cores RGBA

Valores de cor RGBA são uma extensão dos valores de cores RGB com um alpha canal - que especifica a opacidade de uma cor.

Um valor de cor RGBA é especificado com: rgba (vermelho, verde, azul, alpha ). O alpha parâmetro é um número entre 0,0 (totalmente transparente) e 1,0 (totalmente opaco).

rgba (255, 0, 0, 0,2);
rgba (255, 0, 0, 0,4);
rgba (255, 0, 0, 0,6);
rgba (255, 0, 0, 0,8);

O exemplo a seguir define diferentes cores RGBA:

Exemplo

#p1 {background-color: rgba(255, 0, 0, 0.3);}  /* red with opacity */
#p2 {background-color: rgba(0, 255, 0, 0.3);}  /* green with opacity */
#p3 {background-color: rgba(0, 0, 255, 0.3);}  /* blue with opacity */
Tente você mesmo "

HSL Cores

HSL significa matiz, saturação e leveza.

Um valor de cor HSL é especificado com: HSL (matiz, saturação, luminosidade).

  1. Hue é um grau na roda de cores (de 0 a 360):
    • 0 (ou 360) é vermelho
    • 120 é verde
    • 240 é azul
  2. A saturação é um valor de percentagem: 100% é a cores.
  3. Leveza é também uma percentagem; 0% é escuro (preto) e 100% é branco.
HSL (0, 100%, 30%);
HSL (0, 100%, 50%);
HSL (0, 100%, 70%);
HSL (0, 100%, 90%);

O exemplo a seguir define diferentes cores HSL:

Exemplo

#p1 {background-color: hsl(120, 100%, 50%);}  /* green */
#p2 {background-color: hsl(120, 100%, 75%);}  /* light green */
#p3 {background-color: hsl(120, 100%, 25%);}  /* dark green */
#p4 {background-color: hsl(120, 60%, 70%);}   /* pastel green */
Tente você mesmo "

HSLA Cores

Valores de cor HSLA são uma extensão dos valores de cor HSL com um alpha do canal - que especifica a opacidade de uma cor.

Um valor de cor HSLA é especificado com: HSLA (matiz, saturação, luminosidade, alpha ), onde o alpha parâmetro define a opacidade. O alpha parâmetro é um número entre 0,0 (totalmente transparente) e 1,0 (totalmente opaco).

HSLA (0, 100%, 30%, 0,3);
HSLA (0, 100%, 50%, 0,3);
HSLA (0, 100%, 70%, 0,3);
HSLA (0, 100%, 90%, 0,3);

O exemplo a seguir define diferentes cores HSLA:

Exemplo

#p1 {background-color: hsla(120, 100%, 50%, 0.3);}  /* green with opacity */
#p2 {background-color: hsla(120, 100%, 75%, 0.3);}  /* light green with opacity */
#p3 {background-color: hsla(120, 100%, 25%, 0.3);}  /* dark green with opacity */
#p4 {background-color: hsla(120, 60%, 70%, 0.3);}   /* pastel green with opacity */
Tente você mesmo "

Opacidade

A propriedade CSS3 opacidade define a opacidade para um valor RGB especificado.

O valor da propriedade opacidade deve ser um número entre 0.0 (totalmente transparente) e 1,0 (totalmente opaco).

RGB (255, 0, 0); opacidade: 0,2;
RGB (255, 0, 0); opacidade: 0,4;
RGB (255, 0, 0); opacidade: 0,6;
RGB (255, 0, 0); opacidade: 0,8;

Observe que o texto acima também será opaca.

O exemplo a seguir mostra diferentes valores RGB com opacidade:

Exemplo

#p1 {background-color:rgb(255,0,0);opacity:0.6;}  /* red with opacity */
#p2 {background-color:rgb(0,255,0);opacity:0.6;}  /* green with opacity */
#p3 {background-color:rgb(0,0,255);opacity:0.6;}  /* blue with opacity */
Tente você mesmo "

Teste-se com exercícios!

Exercício 1 » Exercício 2» Exercício 3 » Exercício 4»


❮ Anterior Próxima Capítulo ❯