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?
7 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
ExcluirOieee,eu também amei essa dica
Excluir