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:

7 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
    2. Oieee,eu também amei essa dica

      Excluir


Sculptshe - Black Friday