Cursos Online

Ver Mais

Ferramentas e Recursos

Ver mais

Fotos e Vídeos

Ver mais

Viagens

Ver mais

Tabela de cores, como usar background e grayscale

Nada melhor do que quando você está fazendo uma personalização ter uma página para consultar que cores deseja usar, rapidamente, nessa página estou disponibilizando uma tabela com as principais cores para você poder consultar, encontre aqui o código (por nome, RGB e Hexa).


Além da tabela de cores ainda vou explicar o básico de como podemos inserir fundo de várias formas, (background) e como usar grayscale e acrescentar efeito em imagens e personalizações.



tabela de cores em html


 Formas de usar a propriedade CSS background


Deseja adicionar uma cor em seu blog, aplique assim: HEX background:#ffffff; RGB background:(255 165 79); ou pelo nome de uma cor valida, backgroud-color:"cinza";


Não quer nenhuma cor:

background:transparent;


Adicionar uma imagem no lugar:

background-image: ('url da sua imagem');

background-repeat: no-repeat;   não repetir


background-repeat: repeat-x;  repetir ou repetir verticalmente repeat-y;


Backeground attachment pode ser: fixed ou scroll


sua classe {
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
  background-position: right top;
  background-attachment: fixed ou scroll;
}

Agora podemos incrementar, diferenciar usando o gradiente que pode ser linear ou radical. 


Podendo ser usado da seguinte maneira:

.sua classe aqui{

    background: linear-gradient(to top right, #ffffff 0%, #ccccff 100%);

}

Você também pode usar dessa outra forma:

.sua classe aqui{ 

background: linear-gradient(to top right, #ffffff, #ccccff, #fdf6f2);

}


Pode trocar também linear-gradient por radical-gradient, onde a cor fica definida pelo centro.


Você pode trocar right por top, bottom ou left. 

Pode usar as cores também pelo nome como: aliceblue, violet, pink.


  • Confira um exemplo de fundo gradiente:


exemplo de linear gradiente





Também podemos acrescentar opacidade as imagens, com gayscale.


filter: grayscale(0);
filter: grayscale(0.20);
filter: grayscale(60%);
filter: grayscale(1);


grayscale(0)     /* Não afeta a imagem */
grayscale(.7)    /* .7 => 70% de branco&preto */
grayscale(100%)  /* Completamente em branco&preto */


Confira o vídeo abaixo com a demonstração:


Nenhum comentário:

Postar um comentário

Você leu um artigo escrito com muita dedicação. Gostou? !
Deixe seus comentários, críticas e sugestões, eles são muito importantes para o desenvolvimento do Blog.
Sua mensagem será respondida o mais rápido possível.
Muito obrigado pela visita e volte sempre, aproveite para conhecer as redes sociais e assinar a newsletter do Universo da Blogueira.

Confira também, outros artigos: