• - ChapStique -

    - ChapStique -

  • - Crouton -

    - Crouton -

  • - Nadaddy -

    - Nadaddy -

  • - Fatty -

    - Fatty -

  • - Hollywood -

    - Hollywood -

17 de setembro de 2012

degradê nos links

PhotobucketOlá Queridos Otakus Kawaii's
Venho aqui trazer um tutorial de como usar degradê nos links e deixá-los multicoloridos; é semelhante ao efeito arco-íris, que deixa os links em várias cores, proporcionado por um script.O que muda é que no caso do degradê não é necessário nenhum script, o link não fica piscando e você ainda pode escolher as cores, basta mudar a:hover do seu modelo, seja ele dinâmico ou não. O resultado será um efeito como o da imagem abaixo:
Vamos lá!

Para modelos dinâmicos:
Acrescente esse código no seu CSS (Modelo-Personalizar-Avançado-Adicionar CSS)

a { text-decoration: none; }
a:hover { -webkit-background-clip: text; color: white; -webkit-text-fill-color: transparent; background-image: -webkit-gradient(linear, left top, right top, from(#ea8711), to(#d96363)); background-image: -webkit-linear-gradient(left, #ea8711, #d96363, #73a6df, #9085fb, #52ca79); background-image: -moz-linear-gradient(left, #ea8711, #d96363, #73a6df, #9085fb, #52ca79); background-image: -ms-linear-gradient(left, #ea8711, #d96363, #73a6df, #9085fb, #52ca79); background-image: -o-linear-gradient(left, #ea8711, #d96363, #73a6df, #9085fb, #52ca79); 
}
Depois clique em aplicar ao blog e veja como ficou.
Para todos os modelos:
Acesse a área de edição de HTML do seu template e procure por: a:hover, como na imagem abaixo:
Troque por:
a { text-decoration: none; }a:hover { -webkit-background-clip: text; color: white; -webkit-text-fill-color: transparent; background-image: -webkit-gradient(linear, left top, right top, from(#ea8711), to(#d96363)); background-image: -webkit-linear-gradient(left, #ea8711, #d96363, #73a6df, #9085fb, #52ca79); background-image: -moz-linear-gradient(left, #ea8711, #d96363, #73a6df, #9085fb, #52ca79); background-image: -ms-linear-gradient(left, #ea8711, #d96363, #73a6df, #9085fb, #52ca79); background-image: -o-linear-gradient(left, #ea8711, #d96363, #73a6df, #9085fb, #52ca79); }

Ficando assim:
Visualize e se estiver tudo bem, salve ^-^ Você ainda pode trocar os códigos das cores (que vêm com um "#" na frente) por outras que goste, encontre-as aqui.
Simples e kawaii!!!

Nenhum comentário:

Postar um comentário