![](http://25.media.tumblr.com/tumblr_m8tiexnZqr1rwn8gco1_500.jpg)
![Photobucket](http://i1121.photobucket.com/albums/l505/saycute/Wallpapers/candy3.gif)
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:
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLKDuXWXjviw34gZOmGcWCDqcIoFDURwk5c_P0umizuELRBN3EImQg2-y9vOAQtyc5C3HVOi8q4FdIeAyWSAxR_qV85nMBwLuTUqPHwcxeNJjcnZqJznXOoMS28vlhD9-gTjOkr81yIP7a/s1600/a3.jpg)
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); }
Para todos os modelos:
Acesse a área de edição de HTML do seu template e procure por: a:hover, como na imagem abaixo:
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisfLCTOLHt1_S4e5ET_aBYXpUp3sUG0wX7AYKVzO4jxbGida2NYhBbP1GEurCDYlJIaJ6P72DOOQ-5NsPdii5lswHNYe80EC-LUsHihLryUpsQLBUPd3GOwW9s_3iY6ILg9VS8GKo8bgnQ/s1600/a1.jpg)
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:![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEispcccHLGe4ROqQvh-NNK0zk6EsemCwF_LZ3T_KRT3xK4jXyr_3kG_hICMbq3oJpCz33Mh8LVpWgA5se5dHiKFft10qu3wKTgNFlvJwSQkB2inBLORVKS089qLCW-AynzfPfPzCjoYqAv4/s1600/a2.jpg)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEispcccHLGe4ROqQvh-NNK0zk6EsemCwF_LZ3T_KRT3xK4jXyr_3kG_hICMbq3oJpCz33Mh8LVpWgA5se5dHiKFft10qu3wKTgNFlvJwSQkB2inBLORVKS089qLCW-AynzfPfPzCjoYqAv4/s1600/a2.jpg)
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