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
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?
6 comentários
Useful post❤
ResponderExcluirThanks!
ExcluirAmei a dica *_*
ResponderExcluirbjs
Ariadne ♥
De volta ao retrô | Facebook | Instagram
Que bom que gostou!
ResponderExcluirKissus <3 obrigada pela visita!
Oie, eu estou aprendendo a usar essas ferramentas, no caso o que significa >>> * mude o nome da classe e as cores *?
ResponderExcluirOnde 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