Como criar e aplicar cores em degradê no blog (CSS)

março 25, 2019


Konnichiwaa fadinhas e elfos! Como estão? Separei esses dias para adicionar alguns detalhes no blog, eu achei linda a ideia de degrade, peguei as cores predominantes no blog e fiz um degrade para combinar! É super fácil de fazer, com apenas css, você pode aplicar em qualquer lugar! E então, let's go?

Existem vários tipos de gradientes, como a variação de direção das cores, temos a linear e a radial:

  • Linear Gradients (para baixo/cima/esquerda/direita/diagonal)
  • Radial Gradients (definidos pelo centro) 
 
Para adicionar um degradê vá em Layout, Editar HTML e escolha o lugar onde quer colocar uma background no estilo degradê.

Gradiente linear

 image O exemplo a seguir mostra um degrade linear que começa no topo. Começa por rosa, fazendo a transição para bege:


.suaclasseaqui {
background: linear-gradient(Pink, PeachPuff); /* mude o nome da classe e as cores */}

image Esse abaixo, já é uma versão que a cor principal se concentra na direita mudando levemente de cor para a esquerda:


.suaclasseaqui {
background: linear-gradient(to right, Pink , PeachPuff); /* mude o nome da classe e as cores */}

Caso queira para a esquerda substitua o right por left.

image O exemplo abaixo, é um estilo que a cor principal se concentra na parte de baixo e sobe levemente para a direita, essa é a minha favorita, foi usada ali no perfil da sidebar:


.suaclasseaqui {
background: linear-gradient(to bottom right, Pink , PeachPuff); /* mude o nome da classe e as cores */}

Caso queira com transição para a esquerda substitua right por left, ou caso queira para cima, substitua bottom por top.

image Agora, mudando um pouco, também tem a versão mais colorida, que fica assim apenas adicionando mais cores dentro dos parenteses:


.suaclasseaqui {
background: ​linear-gradient(Pink, SkyBlue, Peachpuff); /* mude o nome da classe e as cores */}

Gradiente radial padrão

image Por ultimo, a versão RADIAL, com circulo, substituindo apenas o linear-gradient por radial-gradient:


.suaclasseaqui {
background: radial-gradient(Peachpuff, pink, skyblue);  /* mude o nome da classe e as cores */}

Como adicionar novas cores?
Consulte aqui o nome das cores para CSS:
https://www.w3schools.com/colors/colors_names.asp
Achou? Não esqueça de substituir no CSS dentro dos parenteses e divida com virgulas

Colinha de classes (blogger):
Fundo do blog: .body | Rodapé: .footer | Leia mais: .more-link ou .jump-link | Sidebar: .sidebar e etc, qualquer dúvida pesquise como personalizar, e em background adicione o degradê ensinado aqui! Simple não?

O que acharam da novidade do blog? Estou adicionando um pouquinho de degrade e agora estou editando as capas com ícones de categorias também! Espero que tenham gostado do post! Até mais! Redes Sociais do Sweet Magic: Facebook | Twitter | Instagram | Bloglovin | Pinterest * Até mais, Kissus 

Leia também:

6 comentários

  1. Que bom que gostou!
    Kissus <3 obrigada pela visita!

    ResponderExcluir
  2. Oie, eu estou aprendendo a usar essas ferramentas, no caso o que significa >>> * mude o nome da classe e as cores *?

    ResponderExcluir
    Respostas
    1. Onde você quer aplicar o degradê? Vc tem que colocar o nome de onde quer. por isso coloquei (mude o nome da classe), porque tem que alterar. As cores mesma coisa (eu deixei anotado que precisa alterar), deixei um link pra consultar como as cores se chamam em css

      Excluir