5

Dicas rápidas #006 - HTML \ RGB and RGBA Colors (Básico)

#HTML
Joilson Silva
Joilson Silva

Você com certeza já assistiu ao filme 50 tons de cinza e com certeza sabe que eu não sou o galã do filme. Mas eu vou dar uma dica muito legal para quem está começando a programar em HTML.


O parâmetro RGB termo em Inglês que define a combinação das cores (RED, GREEN, BLUE) ou em Português (VERMELHO, VERDE, AZUL) é utilizado para dar cores ao seu conteúdo.


Vou ser mais poderoso que o ator do filme e vou lhe dar uma dica para criar 256 tons de cinza.


Para isso basta igualar os parâmetros conforme abaixo:


<h1 style="color:rgb(0, 0, 0);">256 Tons de Cinza</h1>


Lembre se: Para o preto devemos usar o 0, para o branco devemos usar o 255


<p>Hoje o QUARTO SECRETO será pintado de <cite style="color:rgb(0, 0, 0)">PRETO</cite> uma cor sem reflexo de luz. </p>


 <p>Hoje o QUARTO SECRETO será pintado de <cite style="color:rgb(255, 255, 255)">BRANCO</cite> que é a união de sete cores (anil, vermelho, laranja, amarelo, azul, verde e violeta). </p>




Exemplos:


1. Vamos utilizar a cor vermelho (RED):

<p>Hoje o QUARTO SECRETO será pintado de <cite style="color:rgb(255, 0, 0);">VERMELHO</cite> uma das cores primárias. </p>




2. Vamos utilizar a cor verde (GREEN):

 <p>Hoje o QUARTO SECRETO será pintado de <cite style="color:rgb(0, 255, 0);">VERDE</cite> uma das cores secundárias. </p>




3. Vamos utilizar a cor azul (BLUE):

       <p>Hoje o QUARTO SECRETO será pintado de <cite style="color:rgb(0, 0, 255);">AZUL</cite> uma das cores secundárias. </p>




4. Vamos utilizar a cor CINZA para este grupo de cores. Para isto vamos igualar os parâmetros para 128:



       <p>Hoje o QUARTO SECRETO será pintado de <cite style="color:rgb(128, 128, 128);">VERMELHO, VERDE OU AZUL CINZA</cite> uma das diversas possibilidades de cores. </p>




Mas o que é RGBA ?


Resposta: RGBA é uma extensão do parâmetro que compreende a intensidade da cor que varia entre 0.0 (Totalmente transparente) a 1.0 (Não transparente). Para isso basta acrescentar o quarto parâmetro conforme abaixo:


<h1 style="color:rgba(0, 0, 0, 0.5);">256 Tons de Cinza</h1>


Nos vemos no quarto de programa, OPS no quarto de programação!


" SE ESTA DICA LHE FOI ÚTIL DEIXE O SEU COMENTÁRIO PARA QUE EU POSSA AVALIAR A MINHA CONTRIBUIÇÂO JUNTO À COMUNIDADE"


Abraços,


Joilson Silva

3
118

Comentários (3)

2
Thiago Guedes

Thiago Guedes

13/01/2021 14:46

Joilson, na hora que comecei a ler o artigo, fiquei tipo: 😂

Muito boa forma de chamar a atenção. Eu mesmo li até o final e já deixei meu like. Arrocha!
2
Dhebbora Vasconcelos

Dhebbora Vasconcelos

13/01/2021 15:02

Eita, Muito massa sua dica e o seu texto. Obrigada ! 👏👏👏👏

1
Joilson Silva

Joilson Silva

13/01/2021 17:30

Obrigado amigos pelo feedback. Se prepara que tem +


Estou apenas consolidando os conhecimentos e irei trazê-los para uma forma mais descontraída de aprender a ser garoto ou garota de programa.


Abraços,

Profissional da área contábil\financeira em transição de carreira para a área de TI-Tecnologia da Informação e Comunicação (PJ \ CLT).

Brasil