|
Neste tutorial veremos como criar um Color Picker.
Podemos ter descoberto que o HTML sozinho pode formar apenas a estrutura esquel�tica de nossas p�ginas da web ou sites.
Mesmo assim, pode manipular dinamicamente cada elemento. Da mesma forma, as cores desempenham um papel importante no HTML.
Implicitamente, v�rias ferramentas podem nos ajudar a atender dinamicamente os requisitos de cores e, para isso, temos o HTML
Color Picker conosco. Vamos prosseguir para aprender mais sobre isso.
Mas, o que � um Color Picker em HTML?
Seletores de cores s�o usados principalmente para selecionar e inserir cores. Eles s�o convertidos automaticamente em cores
uma vez enviados ao navegador e, em seguida, convertem as cores de entrada em uma string que as representa.
Como usar?
Para adicionarmos um seletor de cores em uma p�gina HTML, usamos uma tag <input> com tipo = 'color'.
Se quisermos adicionar o seletor de cores em nossa p�gina HTML, precisamos usar a tag <input> com 'color' especificada
como par�metro.
Al�m disso, o primeiro valor pode ser atribu�do usando o valor da propriedade e esse valor precisa ser mantido em hexadecimal.
Isso ocorre porque as cores em HTML s�o representadas como valores hexadecimais de seis d�gitos seguidos por uma hashtag (#). Os dois
d�gitos iniciais representam o componente vermelho, que � seguido pelo componente verde para os pr�ximos dois. Os dois �ltimos
consistiriam em dois componentes azuis. Esses tr�s componentes representam todo o conjunto de cores RGB. O formato � assim seguido por:
#ffoooo > Vermelho
#ooffoo > Verde
#ffffff > Branco
#ooooff > Azul
Todas essas cores podem ser facilmente misturadas para obter mais cores. Por exemplo, $#bdaa55 nos d� um tom acastanhado.
Embora tamb�m possamos ter encontrado esses valores hexadecimais ao trabalhar com CSS e, portanto, � dif�cil lembrar de todos os
c�digos de cores para o mesmo. Assim, o seletor de cores HTML � uma ferramenta �til atrav�s da qual podemos facilmente inserir e
selecionar cores em nossos componentes HTML e realizar com nossos m�dulos criativos.
Vejamos alguns Exemplos:
Exemplo 1: Neste exemplo vamos criar uma Color Picker (Seletor de Cores) iniciando com a cor azul (#0000ff).
Veja na imagem abaixo o resultado desse c�digo depois de executado:
Ao clicar no Color Picker a paleta de cores aparecer� para voc� escolher uma cor qualquer.
O exemplo acima demonstra o uso da tag <input type = 'color'>. Definimos o valor inicial como #oooooff, ou seja, azul.
A pr�xima tarefa � aprender sobre o HSL, que significa Hue, Saturation e Lightness. � um componente importante no seletor
de cores que permite ajustar as cores de acordo com suas necessidades.
Matiz: � o grau na roda do seletor de cores que varia de 0 a 360, onde 0 � vermelho, 120 � verde e 240 � azul.
Satura��o: � definida como o valor percentual da sombra. Exemplo 0% � considerado um tom de cinza enquanto 100% � considerado
uma cor total.
Luminosidade: tamb�m � uma propriedade do seletor de cores definida por porcentagem. Exemplo 0% � considerado preto e 100%
� considerado branco.
Exemplo 2: Neste exemplo vamos criar um Color Picker e mostrar como utilizar o HSL.
Veja na imagem abaixo o resultado desse c�digo depois de executado:
Neste exemplo, fica bastante claro como os n�veis de matiz, satura��o e luminosidade da cor dada acima s�o nivelados. Usamos
algumas propriedades CSS como padding para deixar o conceito claro.
Criando um seletor de cores HTML
Exemplo 3: Neste exemplo vamos criar um Color Picker simples em HTML utilizando um formul�rio.
Veja na imagem abaixo o resultado desse c�digo depois de executado:
No c�digo HTML acima, tentamos criar um elemento FORM que usar� um tipo de cor como entrada. Esta entrada criar� e exibir�
um seletor de cores simples no modo padr�o do Windows. Isso permitir� que os usu�rios selecionem uma cor de sua escolha. O tipo de
entrada criado criar� uma caixa de texto e um bot�o que tem a cor preta como padr�o. Sempre que clicarmos nele, ele exibir� uma op��o
de cor para o usu�rio.<
<< Tutorial para Criar uma Calculadora
Tutorial para Incluir uma Imagem em uma P�gina Web >>
|
