8.12.15

Texto em degradê


Sinceramente? Eu não achei o tutorial para este efeito, adicionado em textos, em lado nenhum. 

Mas achei um blog, o Black Words, que andava a usá-lo e ainda usa no título das postagens, e eu decidi tomar a liberdade de o codificar, creditanto claro a autora pelo tuto que permite colocar degradê no texto. Simplesmente usei Ctrl + U no blog dela e procurei pela área respetiva. Já vão ver a prévia, e eu vou ensinar a colocar o efeito noutras áreas para além do título da postagem, de uma forma rápida e simples.

Prévia:


Exemplo

h3.post-title {
border-bottom:1px solid #ccc;
text-align:left;
padding-left:20px;
color: #4f4f4f;
letter-spacing:2px;
font-family: 'Lato', sans-serif;
font-size:20px;
text-transform:uppercase;
background: -webkit-linear-gradient( left, #248F8D, #8d3855, #5C4F79);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
h3.post-title a {
color: #4f4f4f;
letter-spacing:2px;
font-family: 'Lato', sans-serif;
font-size:20px;
text-transform:uppercase;
background: -webkit-linear-gradient( left, #248F8D, #8d3855, #5C4F79);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
h3.post-title a:hover {
background: -webkit-linear-gradient( left,#5C4F79, #8d3855,#248F8D);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

Tutorial

Abra o HTML do seu blog.
Estas são as linhas que de facto importam, e que devem ser colocadas dentro das {} de cada área:
color: #4f4f4f;
background: -webkit-linear-gradient( left, #248F8D, #8d3855, #5C4F79);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
E que áreas são essas? Qualquer uma que tenha texto, como:
  • h3.post-title a 
  • .post-footer
  • .post-outer
  • .sidebar .widget
  • .sidebar .widget h2
  • .footer-wrapper
  • ...

Já agora, no exemplo que eu dei, é necessário adicionar a fonte Lato ao HTML do blog. Procure por <head> e adicione em cima:
<link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
Foi fácil de entender, não foi? Eu já testei e funciona, espero que tenham gostado ^^

☂ Dreamed by»
Tags # , ,

4 comentários:

  1. Hari Monteiro8 de dezembro de 2015 às 12:09

    Nossa, você sempre passa muito tempo sem atualizar e quando atualiza é quase uma explosão! -q
    Assim que vi a prévia achei muito familiar, mas não lembrava que o nome do blog em que vi era Black Words, eu gosto desse efeito, é bem original sem ser muito chamativo, claro, além de ser simples de fazer. Ele faz o meu tipo, talvez um dia eu use

    Diário de uma Otome

    ResponderEliminar
    Respostas
    1. Anilyan9 de dezembro de 2015 às 07:45

      Haha, é mesmo >.< Eu própria já tinha reparado nisso, e nem sei se me devia repreender por deixar as postagens acumular ou se até acaba por ser uma coisa boa. Agora que fala nisso, acho que o efeito faz mesmo o seu tipo :)

      Eliminar
  2. Unknown12 de dezembro de 2015 às 04:16

    Helloo Anilyan!
    O efeito degradê seja aonde fôr, se tu estudares CSS fica bem simples de fazer!
    Agradeço os créditos e a tua honestidade (em relação ao ctrl+u)...
    Mas não te esqueças que para usarem a mesma font'Lato' têm de a instalar!
    beijoos*-*
    http://bwblackwords.blogspot.pt/

    ResponderEliminar
    Respostas
    1. Anilyan12 de dezembro de 2015 às 10:10

      Ah, realmente, esqueci-me de dizer para instalar a fonte!

      E fico contente por você ter deixado. Eu já notei que é simples, mas de qualquer forma antes de ver no seu blog não conhecia o efeito e nunca o vi em lado nenhum, portanto quis ajudar a divulgar :)

      Eliminar

Subscrever: Enviar feedback (Atom)