17 de nov de 2012

Deixe o hover dos links "embaçado"


Poxa, que saudade de vocês :( Fiquei vários dias sem postar e sem dar um oi. Mas li todos os comentários vou retribuí-los e pouco a pouco. Esses dias resolvi testar o efeito embaçado no hover dos links. E não é que deu certo? O resultado você pode ver no layout atual aqui do blog. Fica bem diferente. Nunca vi esse tutorial em nenhum outro lugar, então se usar, peço que ponha os créditos, ok?



E aí, vamos aprender agora? Primeiro, vá no HTML do seu blog e pesquise por a:hover { Vai ter mais alguns deste, mas vamos usar o primeiro que você achar. Vai estar assim:

a:hover {
  text-decoration:none;
  color: $(link.hover.color);
}
Antes de fechar a chave, cole mais um código, ficando tudo desse jeito:

a:hover {
  text-decoration:none;
  color: $(link.hover.color);
filter: blur(1px);
-webkit-filter: blur(1px);
-moz-filter: blur(1px);

}
São 3 partes de "blur" que você vai ter que colocar, pois assim vai pegar em todos os navegadores. No 1px, você pode mudar, aumentar pra poder ficar mais embaçado. Acho que apenas 1 fica bom. Bem fácil, né? Na hora que vi que deu certo, adorei o resultado. Por favor, peço que creditem se usar, pois não custa nada! Enfim, me desculpem pela ausência dos últimos dias. Não sei se vou dar um tempo aqui... Tenho minhas últimas provas, estou meio sem tempo, sem vontade e sem ideias pra postar. Acho que vou ficar afastada mais um pouco. Saibam que amo todos vocês. Até qualquer dia.

61 comentários:

Moises Gomes disse...

O efeito é bem legal, parabéns pelo tutorial. Beijos!

Nosso Capricho
► apsmass.blogspot.com

Marina disse...

Eu já conheço esse efeito, já usei na barra lateral do GM. Ele é bem diferente. Amei o tutorial :}
xoxo ;*
mustaches.tk <3

Junior Novais disse...

Bem útil, gosti dms *-*

~ http://e-xpressando.blogspot.com.br/

Anônimo disse...

a menina do feita em marte so copia voce !

Alan disse...

Acho que fica muito Lindo! Eu queria saber como fazer em Imagens, tem como trazer um tuto? Beijos Anna ^^
wehearthtml.blogspot.com

Nesu-Chan ★ ねすちゃん disse...

Oooh, que legal!
Eu nunca tinha visto esse tutorial *ooo*
Fica ótimo no seu layout! No meu acho que não combina, mas já salvei o post nos favoritos e se tudo correr bem uso no próximo lay do meu blog :D

Até mais!
sorvete--de--morango.blogspot.com

Mollie disse...

Aff. Seja quem for que falou isto, foda-se.

Gɑɑɓy ♡ disse...

amei o tuto *o*

Beijos '
mundodasgarotasforever.blogspot.com.br

Gabi Cavalcanti disse...

Heeey, adorei seu blog *---*

Bjzuuus Gabi..
http://perpink.blogspot.com.br/

Laura Ribeiro disse...

Esse efeito é mesmo muito lindo *-*
Princesa de Jeans

Carlos Péricles disse...

Super lindo esse efeito :)
Adorei, super criativo.
Beijo;
semuser.blogspot.com

Rabiscos no Papel disse...

eu gostei do tutu, mas não uso.. sei lá, cada um tem seu gosto. né?

rabiiiscosnopapel(.blogspot.com) é sem o parênteses :3

Natália disse...

Que efeito espetaculo... Nem conhecia esse tutorial...
Ótimo Post! ♥
Ah! E te aguardo ansiosamente no MFF...
Beijinhos da Nath
<a href="http://mundofantasticofeminino.blogspot.com.br/>Clica---> MundoFantásticoFeminino</a>

Gabriela Oliveira disse...

Eu já tinha visto esse efeito, mas nunca tinha achado nenhum tutorial falando sobre ele. Ótimo tutorial *-*

Fiquei feliz por você ter gostado do layout Anna haha. Já coloquei os seus créditos :)

Beijos,
modicesdemenina.blogspot.com

Luly disse...

Achei lindo esse efeito embaçado nos seus links, Anna. Fica super diferente, realmente não tinha visto ninguém com algo parecido. Anna, eu voltei com o TZA e você ainda é muito bem-vinda como leitora e colaborada. Espero que eu possa contar com você daqui a alguns dias de novo. Um beijo, Luly.
the-zombie-attack.blogspot.com

Pedro P disse...

Olá, desculpa incomoda.
Prazer, meu nome e Pedro (:
Uma amiga indicou seu blog e achei de mais aqui ... Super da Hora. Parabéns mesmo pelo blog.
int, tou começando meu primeiro blog junto com uma amiga. Seria muito pedir para que você visita-se e fala-se o que achou ? se gostou segue, smp e duro começa o primeiro blog e tou perdidinho. A url vou deixa logo embaixo e espero que vc goste.
http://depoisdaadolescencia.blogspot.com.br/

Anna {World Cutest} disse...

Eu ando vendo muito esse efeito "blur" em imagens, mas não ainda em fontes, além daqui. O efeito é muito lindo e inovador! Beijos e não demora a voltar hein Anna?

World Cutest || Um Pretérito mais que Perfeito

Paula ­SM disse...

Eu nunca tinha usado, mas acho que não é um efeito que usaria, rs Bom, não sei... Mas adorei o tutorial, bem curtinho e fácil ^^

Beijinhos, Paula! ♥
~Sweet Makeup~
(clica no perfil pra visitar meu blog)

Paula ­SM disse...

Ah, e o meu prêmio já está pronto? :3

Beijinhos, Paula! ♥
~Sweet Makeup~
(clica no perfil pra visitar meu blog)

Danny disse...

Ain, fica lindo o efeito, super show, massa demais! Gostei do tutorial ;D

Beijooos

aceita afiliaçãao?

http://www.blogmeninamulher.com/

Pamy Nóbrega disse...

Adorei o tuto! Com certeza vou usar no meu próximo lay, flor, to seguindo seu blog, ele é mtoo perfeito! Dá uma passadinha no meu? Bjooooos!!!
(Clique no perfil)

Maria Luiza Lopes disse...

O efeito é lindo e super diferente, parabéns! Beijos http://www.fashionallday.com.br/

P.C. disse...

Amei o efeito! Salvei o link aqui pra usar em algum layout futuro, ok? *u*
E boa sorte nas suas provas! Sei como é dificíl conciliar tudo isso com o blog D:
Estaremos aqui te esperando, viu? :3
Beijinhos :*

PiinkCookie.blogspot.com

Jaque ♥ disse...

Ameei o tuto, vou usar esse efeito no meu layout Alice que vou fazer. Kiss :3 charmenaveia.blogspot.com

Laaarý disse...

Nossa o efeito fica muito fofo,gostei bastante e nunca tinha visto!
Beijos :*
cupcakeedicoes.blogspot.com
emfrente-aoespelho.blogspot.com

Natsu Dragneel disse...

*0000000* que lindo e é tão facinho, só por o blur!!
http://republicacrash.blogspot.com.br/

ʚĭɞ Mio-Chan disse...

Eu mesma fiz o meu embaçado, mas como eu já tinha visto o seu, achei muuuito melhor!
Ainda bem que você postou o tutorial :D

blog-the-memories.blogspot.com
Kissus ç2

Ideia Substancial disse...

Ai que bacana, gosto de efeitos diferentes, mas a foto dos Cupcakes me deram uma fomeeee hahahaha.
Estou seguindo, venha me fazer uma visitinha, se gostar e quiser me seguir também, vou amar. Ah também está rolando um sorteio lá no blog com apenas uma regrinha. Beijãoooooooooo!

~ Wααndy. disse...

Que legal esse efeito, nunca tinha visto antes! Parabéns pela originalidade e criatividade hehe' *U*

~ Wααndy / I'm a Zombie

Bárbara Rocha disse...

Muito bom esse efeito! *-*
Beijos!
http://diamontlilac-news.blogspot.com.br

P. Martinez disse...

Amei seu tutorial, e seu blog . Vou usar esse tutorial no meu próximo layout ok ? E colocarei créditos para o seu lindo blog ^^
Eu achei ele muito lindo, você tem talento, parabéns .
Estou seguindo, segue de volta ?

http://she-dream-with-paradise.blogspot.com.br/

VivendoandAprendendo .-. disse...

Usando c: ameeeeeeeeeeeei :33 beijos, fazendoadiferencanessemundo(.blogspot.com.br/) é sem os parênteses, tá? '-'

Vitória disse...

Que lindo o efeito, Anna! Sei bem como é estar com saudades mas simplesmente não conseguir voltar/postar. É estranho. Peço até desculpas, mas agora acho que estou de volta de vez. Espero que você também volte logo!
Beijos beijos,
http://menina-do-sol.blogspot.com.br/

Paula ­SM disse...

Sei bem como é! Também estou numa fase não tão "boa" na blogosfera, apesar da escola estar tranquila, também tem o fato da criatividade de posts e também a vontade de blogar! :/ Enfim, vim agradecer o prêmio claro, muito obrigada ^^ Gostei muuitíssimo <3 Adorei tudo, obrigada mesmo! ^^ Sem problemas pela demora, viu?

Beijinhos, Paula! ♥
~Sweet Makeup~
(clica no perfil pra visitar meu blog)

Nicolas ♪ disse...

Deve ficar muito lindo vi aqui nos links do GQ!!^^ Um monte de gente vai usar^^ eheheh! Participa?? http://dicasblogspot-db.blogspot.com.br/2012/11/sorteio-de-um-dominio-personalizado.html ~ ta valendo um domínio personalizado .com ~ Um abraçãoooo!! òtimo tuto!

Sofia disse...

Amo esse efeito ♥
Muito Perfeito o seu blog amei tudo nele já to até seguindo ♥
Xoxo' ♥

Junny ♥ disse...

Fica bem legal.. quem sabe um dia eu use ;D
Beijos
plushrepublic.blogspot.com

Blog Cereja disse...

Cara, esse tutorial fica super cute, faz uma diferença super legal!
Beijos
blog-cereja.blogspot.com

Andréa Rangel disse...

Nossa, que fácil!! Um detalhe tão pequeno faz toda a diferença no layout.

http://dama-louca.blogspot.com.br/

Andréa Rangel disse...

Nossa, que fácil!! Um detalhe tão pequeno faz toda a diferença no layout.

http://dama-louca.blogspot.com.br/

Anna {World Cutest} disse...

KD minha xará? Ah, estou com saudades Anna! Sua sumida :(

http://www.world-cutest.blogspot.com.br/

Geovana Camargo disse...

Bem facil! Gostei , ótimo tutorial!
Ah! E a propósito, odiei a primeira imagem do post, to aqui louca de desejos agora! kkk
i-tudo-i-tudo.blogspot.com.br

# - FeerS. disse...

Que fácil,ficaria bem fofo esse tuto em um design fofo né? ASHUSHUASHAUS

#Bezoos~~> ThisWonderless.blogspot.com

Fernanda Leeticia disse...

muito útil, gostei!

www.garotadeestilo.tk

Kaah~yori~chan disse...

Queremos fazer uma nova manda,mais precisamos de seguidores,e cometários,segue lá? E comente tbm?
http://one-kiss-japan.blogspot.com.br/
Assinado:a vocalista e compositora Kaah~Yori (New band)

Jane Criniton disse...

Muito original o tutorial!
ladyalen.blogspot.com

Liah Oliveira disse...

Adorei seu blogger pena que poste tão pouco . Bju*

http://dicasdaliah.blogspot.com.br/

Gabi disse...

Adorei esse efeitinho, fica super fofo!

http://officialgabi.blogspot.com.br/

Giovanna disse...

Adorei o efeito, estou usando no CB. E claro, já coloquei os créditos!

Beijos
candyblast.blogspot.com

Fábio Lucas disse...

HHI!! adoro seu blog e suas postagens ♥ gostaria que visita -se o meu tb tá ^^ >>

www.fabiolucas92.blogspot.com

Luuh Luchi Gewehr disse...

Amei o blog!Lindoo !To seguindo,segue de volta?http://behappywithluuh.blogspot.com.br

Matheus Philippe disse...

Oi flor, adorei o tutorial e o seu blog :) Queria saber se aceita afiliação com meu blog, espero resposta em: mel-e-hortela.blogspot.com.br.

Beijos. >.<

Luly disse...

Anna, aqui é a Luly. Bem, eu sei que pra todos, o final de ano é sempre muito corrido e cheio de compromissos, provas e tudo mais. Mas eu reparei que faz um bom tempo que você não atualiza o blog. Comecei a ficar preocupada, espero que você possa voltar daqui a alguns dias, muitos precisam de você aqui na blogosfera. Quem sabe uma mudança no layout, nos quadros, talvez até uma equipe podiam ajudar na sua volta com o blog. Se quiser, estou aqui pra ajudar no que precisar, já que só tenho a agradecer. Já sabe meu email, então, qualquer coisa venha falar comigo. Volto logo! Um beijo, Luly.
the-zombie-attack.blogspot.com

Cacau disse...

Oi fofa! Amei seu tutorial e como sempre o blog está demais! Topa afiliação? Espero que você goste do meu blog, flor!
Beijos.
www.mundomaniateen.blogspot.com

Stéfani Zimmermann disse...

Que legal que fica!
Adorei o blog, estou seguindo :)

Beijos,
placestyle.com

Gisely Garcia disse...

ADOREI o efeito,vou usar no novo lay do meu blog :)
bjoos
noisconectados.blogspot.com.br

Anna {World Cutest} disse...

Ei Anna, vim te avisar que o World Cutest está em comemoração por um ano de blog e há vários utilitários e alguns awards exclusivos. Quem sabe o GQ também não está lá? Vem dá uma olhada!

Um beijo, Anna.
World Cutest || Venha celebrar 1 ano de blog!

Julia Mallet disse...

Oiii , adorei seu blog. De super conteúdo, parabéns *-*

Seguindo!

Segue?
www.garotasmalvadask.blogspot.com.br

Se inscreve?
http://www.youtube.com/juuliamallet

Nicka Busq ;3 disse...

efeito bem legal !
adorei o tutorial e o blog é lindo,
seguindo, sucesso, beijos.
space-female.(blogspot.com)

Luce . disse...

O efeito é lindo, adoorei <3

~ Beijoos ;* /// Land of HTML

... disse...

Não consegui.
Me ajda de novo
Entre em contato: @rbr_malu

Bjs

http://blogdamalu-girls.blogspot.com/