Como criar e aplicar cores em degradê no blog (CSS)
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
O exemplo a seguir mostra um degrade linear que começa no topo. Começa por rosa, fazendo a transição para bege:
background: linear-gradient(Pink, PeachPuff); /* mude o nome da classe e as cores */}
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.
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.
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
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 */}
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.
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.
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
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
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?
