Degradê com CSS vs Degradê com imagens
Muitos de nós gostamos de ultrapassar o básico plano de fundo unicolor e queremos usar um degradê. A partir daí, queremos usar imagens para isso. Porém, não é uma tarefa fácil quando esta varia de tamanho dependendo das configurações de um monitor de um computador, além de haver problemas com configuração dos navegadores quanto a exibição dessa mesma imagem, pois nem todos os navegadores exibem os itens de um site igualmente ao outro (por exemplo, quando se diminui a porcentagem do tamanho da página, a imagem repete e fica muito feio).Por essa razão, faz-se necessário o uso do CSS para criar um degradê para o fundo do blogger.
Mas como fazer isso?
Degradê com CSS para blogger
Ao contrário do degradê feito com imagens, o degradê com CSS não terá
problemas de exibição em relação ao tamanho da tela, porém, no nosso
caso, teremos que usar mais de um código CSS para criar o degradê, por
ainda alguns navegadores não possuírem uma configuração que
seja universal. Então, teremos que fazer um código que funcione em
todos os navegadores. Essa dica aprendi a fazer no site Tableless e
estarei ensinado agora a aplicar nos planos de fundo.
Vamos ao tutorial:
- Abra o Blogger e efetue o login;
- Em seguida, vá modelos e, em seguida, em personalizar; isso abrirá o Designer de modelo do Blogger.
-Agora, vá até avançados e, na aba que abrir, role a barra lateral e escolha adicionar CSS;
- Em seguida, vamos adicionar um CSS personalizado ao campo que foi aberto.
Esse é o código:
Se tudo der certo, ao fazer isso, você terá logo abaixo a pré-visualização do seu blog já com as alterações aplicadas.
No caso, esse blog adota exatamente essas configurações, como pode ser percebido no plano de fundo da página.
- Mude as cores para as desejadas trocando os códigos hex das cores presentes no código.
No caso, para a cor inicial, você trocará #9FB6CD pela cor de sua preferência, e, para a cor final, você alterará #696969 para a de sua preferência.
Normalmente, ninguém grava na cabeça o código hex das cores na mente.
Então sugiro essa Tabela de cores para você escolher melhor a sua cor de preferência.
Se você quer criar uma cor para depois obter o hex dela, você pode utilizar o photoshop GIMP.
Para fazer isso, você abre a caixa de seleção de cores do pincel e, em seguida, escolhe uma cor da sua preferência. Ao fazer isso, você verá um código gerado na aba notação html. Depois disso, basta copiar o código e adicionar o # antes do código, aí basta substituir de acordo com a citação anterior.
Observação:
Se, ao fazer isso, a página do seu blog ficar com o degradê só pela metade, você terá que modificar o código body { para html, body {.
Aprenda também aqui:
Marcadores: Dicas para blogs