Warning: Parameter 1 to wp_default_scripts() expected to be a reference, value given in /home/crian734/public_html/blog.kolaborativa/wp-includes/plugin.php on line 601

Warning: Parameter 1 to wp_default_styles() expected to be a reference, value given in /home/crian734/public_html/blog.kolaborativa/wp-includes/plugin.php on line 601
Cores – Parte 1: RGBA - Kolaborativa

Cores – Parte 1: RGBA

RGBA


Olá Galera! vamos continuar nossos estudos depois de um bom tempo de pausa. Estou de volta e hoje veremos cores RGBA, vocês vão acompanhar meus estudos e avançar comigo.

Antes definíamos as cores em CSS das seguintes formas:

  • color: red;
  • color: #ff0000;
  • color: rgb(255,0,0);
  • color: rgb(100%,0%,0%);

Com o CSS3 o já conhecido modelo de cores RGB foi extendido nesta especificação para incluir “alfa” e permitir a especificação da opacidade de uma cor.

Ao contrário de valores RGB, não há a notação hexadecimal para um valor de RGBA.

O formato de um valor RGBA na notação funcional é ‘RGBA (“seguido por uma lista separada por vírgula de três valores numéricos (ou três valores inteiros ou três valores percentuais), seguido por um ).
O valor inteiro de 255 corresponde a 100%. Exemplo: RGBA (255,255,255,0.8) = RGBA (100%, 100%, 100%, 0.8).

O valor da opacidade varia entre 0.1 e 1, sendo o último valor equivalente a nenhuma opacidade. O que antes era feito apenas usando imagens agora é totalmente possível de uma forma muito simples!

O RGBA pode ser usado como um valor em quaisquer propriedades que aceitem cor. Alguns exemplos Por exemplo:

  • background-color
  • border-color
  • color

Já vamos ver um exemplo do seu uso.

Exemplos

  • RGBA com opacidade de 50%

  • Usando o RBGA com porcentagem


Funciona no: navegadoresnavegadoresnavegadoresnavegadoresnavegadores

Outros exemplos

  • Mesclando o RGBA com outras propriedades!

 

Seja Criativo!

 

  • Com a novidade do RGBA vai ficar:

 


Funciona no: navegadoresnavegadoresnavegadoresnavegadoresnavegadores

Author Description

dodilei

Dizem que falo comendo as palavras, mas o que gosto de comer é um bom paniqueijo! além de OpenSource, Linux, Python e Javascript! :D

There are 2 comments. Add yours

  1. 20th setembro 2011 | estenio says: Responder
    suas matérias são ótimas estou aprendendo bastante com elas, nesse caso de cores eu ja tinha conhecimento, mas prefiro utilizar hexadecimal por uma questão de costume hehehehe
    • 20th setembro 2011 | Dodilei says: Responder
      Que bom Estenio! pena que eu to meio parado senão você teria ainda mais coisas a estudar! heheheh estou agora num projeto de Labs de programação, mas pretendo voltar pra terminar o CSS3.

Join the Conversation