Neste tutorial eu venho mostrar como colocar efeito degradê/gradiente/arco-íris em textos nos posts do Tumblr, como esses mostrados na imagem acima.
Este método é para o conteúdo de postagens, que funciona no Painel (Dashboard) do Tumblr. Se você quiser adicionar textos em gradiente no seu tema, tem um outro método melhor de fazer isso, porém eu não vou estar mostrando ele neste tutorial aqui.
Tutorial:
O conceito desse efeito é simples: envolver cada letra do texto com um código que altere a cor dela, cada letra recebe uma cor diferente em uma ordem que cria um efeito degradê. É perfeitamente possível fazer isso manualmente, porém dependendo do tamanho do texto, é claro que isso daria muito trabalho, e é por isso que foi criado um "plugin" que faz isso automaticamente pra gente. Então vamos ver como usar...
1) Abra seu editor de posts e a primeira coisa que você vai fazer é se certificar de que o novo editor do Tumblr está desativado. Se estiver ativado, desative:
Isso porque, utilizando o editor antigo, você consegue editar o HTML do post, e nós precisaremos disso para este tutorial.
2) Escreva o conteúdo do seu post e quando terminar certifique-se de que não vai precisar editar mais nada nele antes de seguir par o próximo passo, pois agora nós vamos mexer no HTML do post e depois de alterar o HTML, se você voltar para o modo de edição "Rich Text", algumas dessas suas alterações podem ser perdidas.
3) Abra as configurações do post (clicando no ícone de engrenagem no canto superior direito da caixa do post), e na opção "Editor de Texto" selecione "HTML:
E agora você vai poder editar o HTML do seu post.
4) Escolha a parte do texto que à qual você quer aplicar o efeito degradê, copie-a e vá até este site: http://jsfiddle.net/j7vLfbw1/22/
No canto inferior direito da tela do site, na parte com fundo branco, você encontra isso aqui:
Como funciona? São 2 campos de texto, no primeiro você digita/cola o texto ao qual você quer adicionar o efeito, no segundo é onde o seu código será retornado. Na frente dos campos de texto você encontra 2 botões coloridos, use-os para escolher as cores que você quer no seu efeito degradê e depois clique no botão "Run", que fique logo na frente das cores, e então o seu código será gerado e retornado naquele segundo campo de texto que tem ali.
Então cole o seu texto ali no primeiro campo de texto, escolha as cores, clique em "Run" e copie o código retornado (dica: clique no código e aperte CTRL+A para selecionar tudo e então copiar):
5) Agora é só colar esse código no HTML do seu post. Substitua o texto que você escolheu por esse código. Exemplo:
6) E pronto! Agora é só postar/salvar seu post. Mas, antes de fazer isso, você pode clicar em "Visualizar" para ver se gostou do resultado:
Como fazer um degradê com mais de 2 cores?
Infelizmente esse site que eu encontrei só nos permite adicionar 2 cores ao gradiente, porém isso não nos impede de dar um jeito de criar um texto com mais do que duas cores. Mas já vou avisando que pode dar um pouco de trabalho. Tudo o que você precisa fazer é o seguinte:
1) Pense em quantas cores você quer colocar no seu texto e "divida" seu texto nessa quantia... Para explicar melhor eu vou dar um exemplo: eu quero deixar o seguinte texto com um efeito degradê de 5 cores e as cores vão ser verde, azul, roxo, vermelho e amarelo:
"Comece onde está. Use o que você tem. Faça o que você pode."
Agora eu vou contar quantos caractéres (letras, pontuações e símbolos, espaços não precisam ser contados) esse meu texto possui. São 49 caractéres, então eu vou dividir esse número por 5 (que é a quantia de cores que eu quero usar), o resultado dá 9,5 então eu vou arredondar para 10 (recomendo que você sempre arredonde para cima e não para baixo). Ou seja, eu vou separar o texto a cada 9 caractéres, e não importa se algumas palavras ficarem separadas no meio, mas nesse passo é importante incluir os espaços. E apenas para ter mais organização, eu recomendo você separar o texto em outro lugar e não no editor de post, apenas para evitar confusão... No meu caso eu fiz em um arquivo do Bloco de Notas. Exemplo:
2) Agora eu vou copiar cada parte separadamente e gerar um gradiente para cada parte. Para que o gradiente fique certinho, cada parte do texto deve começar com a mesma cor que a parte anterior termina. Exemplo:
Dica: Pra você conseguir pegar exatamente a mesma cor que você tinha usado anteriormente, você pode pegar os códigos das cores que você escolheu da seguinte forma... No seletor de cores clique em "RGB" duas vezes, até aparecer "HEX":
Daí, aquele código com uma hashtag (#) no começo, que aparece ali, é o código hexadecimal da cor selecionada:
Então você pode pegar o código dali e também pode usar aquele espaço ali para digitar o código da cor que você quer selecionar.
Resultado:
Se o tutorial tiver sido útil, dê like ou reblogue ele lá no Tumblr (aqui);
Se tiver alguma dúvida, entre em contato comigo por aqui.
