InícioCalendárioFAQBuscarMembrosGruposRegistrar-seConectar-se

Compartilhe | 
 

 [Tutorial] Layout: as cores (parte 4)

Ver o tópico anterior Ver o tópico seguinte Ir em baixo 
AutorMensagem
Miss Days

avatar

Mensagens : 4
Data de inscrição : 16/04/2011

MensagemAssunto: [Tutorial] Layout: as cores (parte 4)   Sab Abr 30, 2011 7:38 pm

Esta é provavelmente a parte que estão mais ansiosos por saber mudar =) Merecem um tutorial à parte principalmente porque há diversas maneiras de escrever uma cor. E antes de começarmos a mandar mudar cores disto e daquilo, temos que perceber como as podemos escrever.

Como sabem, há centenas de cores. Há 3 maneiras de dizermos a um browser a cor que queremos que apareça. A primeira é fácil: escrever o nome da cor em inglês. O problema é que isto só funciona para 17 cores: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, e yellow. Quando não queremos nenhuma cor o valor “transparent” também é válido.

Então e para as outras todas?! Há dois sistemas principais: o RGB (red/green/blue) e o sistema hexadecimal.

Começamos com o RGB. Quando codificamos aparece na forma: rgb(255;0;0). Dentro dos parêntesis há três valores, que podem ser qualquer número entre 0 e 255. O primeiro é para o canal vermelho, o segundo para o verde e o terceiro para o azul. [não é preciso saber nada disto para descobrir o código rgd de uma cor Wink ]. Neste caso o canal vermelho está exposto ao máximo e os outros dois não têm nenhum valor. Por isso a cor que nós temos aqui é o vermelho.
Como podemos descobrir os valores para uma cor? Os programas de imagem como o Photoshop permitem ver os valores quando seleccionamos a cor. Eis a parte boa... o Paint também faz isto!!! =)
Quando no Paint vamos a “Editar cores” e criamos uma cor personalizada, andamos para lá a brincar com as cores, e à direita vemos os valores de vermelho, verde e azul dessa cor em especial:



Assim este azul seria codificado na forma: rgb(66;214;230).

O sistema hexadecimal é o mais fácil de usar. A cor aparece com um # antes e é constituída por um conjunto de 6 letras e números. Por exemplo: #ff0000 (o código para o vermelho). Quem tem Photoshop ou GIMP pode descobrir o código hexadecimal de virtualmente qualquer cor. Eis a parte excelente: há tabelas e tabelas e tabelas com as cores e o correspondente valor! Very Happy Graças à Cathrine vamos ter cá no fundo deste tutorial várias tabelas para consultarem! Vão todos dar-lhe os parabéns e agradeçam-lhe! Wink
Aqui temos um exemplo da visualização destes códigos no Photoshop:


Agora que já sabemos como podemos escrever as cores, vamos começar a colocá-las em diversos locais! =)

Arrow Dar uma cor ao texto
No texto temos duas opções: ou queremos pôr um parágrafo inteiro, e aplicamos isto à tag <p>, ou queremos só nalgumas palavras e criamos a tag <font> para o fazer.
Então pomos para um parágrafo vermelho:
<p style=”color:red”>Texto texto texto.
<p style=”color:#ff0000”>Texto texto texto.
<p style=”color:rgb(255,0,0)”>Texto texto texto.
Tudo isto dá um parágrado vermelho. Se quiserem que o seguinte também seja vermelho, vão ter que copiar para a tag do parágrafo seguine.

Quando querem só numa palavra, o processo é semelhante:
<p>Eu só quero estas palavras a vermelho.
Fica:
<p>Eu só quero <font style=”color:red”> estas palavras</font> a vermelho.
E podem escrever a cor de qualquer das maneiras que aprendemos antes Wink


Este código para a apresentação é em geral desnecessário porque nós podemos fazer isto muito facilmente com as ferramentas de edição normal da apresentação Very Happy Só se torna útil quando queremos uma cor específica que não aparece nas opções de escolha Wink



Arrow Cor de fundo (texto)
Pois este é o código que aparentemente o Google Chrome não gosta muito... Mas a codificação que é feita quando pomos cor de fundo numa palavra ou texto usando a apresentação em modo normal é diferente. Vamos tentar de outra maneira Wink
Ora, isto é semelhante só que em vez de “color:red” fica-se com “background-color:red”:
<p style=”color:red; background-color:yellow”>Letras vermelhas num fundo amarelo =)


Arrow Cor de fundo numa tabela
Já tem um pouco mais que saber. Aqui há duas maneiras: a que já aprendemos com o “background-color:cor” dentro do style da table e um atributo à parte, o bgcolor. Vamos a um de cada vez.
O primeiro já vimos como se aplica, só que aqui é dentro do style da tag table:
<table style="background-color:pink" border="1px">
<tr><td>Esta é a primeira coluna da primeira linha.</td>
<td>Segunda coluna da primeira linha.</td>
</tr></table>

A segunda é usando o atributo:
<table bgcolor=”pink” border="1px">
<tr><td>Esta é a primeira coluna da primeira linha.</td>
<td>Segunda coluna da primeira linha.</td>
</tr></table>


Pronto, já sabemos dar cores a tudo quanto queremos =) Vamos então aprender mais alguns códigos úteis: links, imagens, e aquelas colunas que nós tanto gostamos que dá para andar para baixo e para cima Very Happy


Ficamos em seguida com as tabelas de cores e correspondentes códigos hexadecimais fornecidos pela Cathrine! Wink
Voltar ao Topo Ir em baixo
Ver perfil do usuário
Cathrine

avatar

Mensagens : 14
Data de inscrição : 11/04/2011
Localização : Nao digo! HAHAHA!

MensagemAssunto: Re: [Tutorial] Layout: as cores (parte 4)   Dom Maio 01, 2011 1:33 pm

Obrigada por mais uma parte do Tutorial... Fico á espera do resto!! =)
Voltar ao Topo Ir em baixo
Ver perfil do usuário
 
[Tutorial] Layout: as cores (parte 4)
Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo 
Página 1 de 1
 Tópicos similares
-
» Airbus A320: Auto Landing Tutorial
» Tutorial voo do Helicoptero
» layout painel generico
» Projeto de video tutorial
» [MBAC] Sion Tatari: Combo/Tutorial Movies & Afins

Permissão deste fórum:Você não pode responder aos tópicos neste fórum
Howrse Ajuda e Diversão :: Dúvidas e Explicações :: Explicações-
Ir para: