Efeito destaque

Créditos ao HTML World
Oi amores! Ontem eu fui na piscina de um clube a noite, a noite eu digo umas 19:30, com a minha irmã. Sei lá, aquele lugar estava me dando uma sensação estranha e boa ao mesmo tempo, também porque não tinha quase ninguém né, mas mesmo ficando apenas uns 30 minutos, foi legal. Depois, a gente tomou picolé, comemos e começou a ficar chato, mas como meus pais estavam lá com seus amigos eles não queriam ir embora, e é sempre assim: Quando eles estão, eles demoram um tempão pra ir embora, e eu e a minha irmã queremos ir embora cedo, mesmo porque eles prometem ir cedo. Por isso eu nunca gosto de ir lá. Estou fazendo esse post com fome, daqui a pouco minha mãe vai comprar uma colônia de picolés q. Pessoal, quero agradecer porque chegamos aos 200 seguidores! Cara, vocês são demais! Obrigada mesmo! Eu ainda estou vendo, mas acho que irei fazer um concurso/sorteio de agradecimento, não  sei. Aceito dicas ou sugestões.

Finalmente Heloísa, uma postagem que não seja de utilitários. Tava na hora, né?  Pois é gente, desculpa, eu realmente não sabia que tutorial fazer/postar, mas agora eu sei (avá). Hoje o tutorial é de um efeito, eu sei que só posto efeitos gente, mas é uma das únicas coisas que sei fazer, em breve eu vou postar modelos de blockquote/títulos de post. São dois efeitos que eu diria que destacam, eu fiz esse efeito para que ao relar o mouse na foto, a foto dê um tipo de destaque, e eu acho que o primeiro efeito é o que mais destaca, mas como ele possui o tal de Blur, talvez vocês não gostem. Visualize<<


Bom, vamos para o primeiro efeito. Vá em Modelo > Editar HTML > Tecle Ctrl + F e procure por: ]]></b:skin>. Acima da tag procurada, cole esse código:

.shadow {
box-shadow: 0px 0px 0px #999;
padding: 2px;
opacity: 0.60;
-webkit-filter: blur(1px); 
-webkit-transition-duration: 0.50s;
}
.shadow:hover {
box-shadow: 0px 0px 15px #999;
padding: 1px;
border: 1px solid #fff;
opacity: 1.00;
transform: rotate(360deg) scale(1) skew(0deg) translate(0px);
-webkit-transform: rotate(360deg) scale(1) skew(0deg) translate(0px);
-moz-transform: rotate(360deg) scale(1) skew(0deg) translate(0px);
-o-transform: rotate(360deg) scale(1) skew(0deg) translate(0px);
-ms-transform: rotate(360deg) scale(1) skew(0deg) translate(0px);
-webkit-filter:  blur(0px);
-webkit-transition-duration: 0.50s;
}

Agora, vá em Layout, adicione um Gadget HTML/JavaScript e cole esse código:

<center>
<a href="LINK AQUI" title="NOME"><img src="LINK DA IMAGEM" class="shadow" />
<a href="LINK AQUI" title="NOME"><img src="LINK DA IMAGEM" class="shadow" />
<a href="LINK AQUI" title="NOME"><img src="LINK DA IMAGEM" class="shadow" />
<a href="LINK AQUI" title="NOME"><img src="LINK DA IMAGEM" class="shadow" />
<a href="LINK AQUI" title="NOME"><img src="LINK DA IMAGEM" class="shadow" />
<a href="LINK AQUI" title="NOME"><img src="LINK DA IMAGEM" class="shadow" /></a></a></a></a></a></a>
</center>

Agora, vamos para o segundo efeito.  Vá em Modelo > Editar HTML > Tecle Ctrl + F e procure por: ]]></b:skin>. Acima da tag procurada, cole esse código:

.shadow2 {
box-shadow: 0px 0px 0px #999;
padding: 2px;
opacity: 0.60;
-webkit-transition-duration: 0.50s;
}
.shadow2:hover {
box-shadow: 0px 0px 15px #999;
padding: 1px;
border: 1px solid #fff;
opacity: 1.00;
transform: rotate(360deg) scale(1) skew(0deg) translate(0px);
-webkit-transform: rotate(360deg) scale(1) skew(0deg) translate(0px);
-moz-transform: rotate(360deg) scale(1) skew(0deg) translate(0px);
-o-transform: rotate(360deg) scale(1) skew(0deg) translate(0px);
-ms-transform: rotate(360deg) scale(1) skew(0deg) translate(0px);
-webkit-transition-duration: 0.50s;
}

 Agora, vá em Layout, adicione um Gadget HTML/JavaScript e cole esse código:

<center>
<a href="LINK AQUI" title="NOME"><img src="LINK DA IMAGEM" class="shadow2" />
<a href="LINK AQUI" title="NOME"><img src="LINK DA IMAGEM" class="shadow2" />
<a href="LINK AQUI" title="NOME"><img src="LINK DA IMAGEM" class="shadow2" />
<a href="LINK AQUI" title="NOME"><img src="LINK DA IMAGEM" class="shadow2" />
<a href="LINK AQUI" title="NOME"><img src="LINK DA IMAGEM" class="shadow2" />
<a href="LINK AQUI" title="NOME"><img src="LINK DA IMAGEM" class="shadow2" /></a></a></a></a></a>
</center>


Explicação para os iniciantes:
LINK AQUI: É aonde você coloca o link para quando a pessoa clicar na imagem, se redirecione para lá.
LINK DA IMAGEM: É bem simples, lá você coloca a imagem que queira que contenha o efeito
NOME: O título que aparece na Tooltip


68 comentários:

  1. Gostei muito do efeito <3
    Vou usa-lo num próximo layout ;3

    D-Resources

    ResponderExcluir
  2. Parabéns pelos 200 seguidores! ^^
    Entendi o que quiseste dizer com sentimento estranho e porém bom ao visitares a piscina. Já visitei uma durante a noite e soube-me estranhamente bem. É um bom ambiente. :P
    Gostei muito dos efeitos para destaque, nunca os tinha visto! *u*

    Catching Stars

    ResponderExcluir
    Respostas
    1. Obrigaada!
      Fico feliz que entende SAUHASUH'
      Aw, fico feliz que gostou!

      Excluir
  3. Parabéns pelos seguidores , você merece , sobre o efeito destaque é muito legal , da aquela giradinha com bordinha e os outros ficam apagadinhos e sem birdinha ashuashua
    candytendy.blogspot.com

    ResponderExcluir
  4. Desculpa mas eu não pude ver vim aqui antes, mas agora estou livre e estou vendo, como o layout está linda <3 E sabe oque mais, eu percebi que tem comida no gadget lá em cima :3
    Eu quero fazer um pedido, de novo Ç.Ç
    Eu quero imagens de afiliados do Block B Ç.Ç eu só consegui 4, e não tem apenas 4 blogs na minha elite Ç.Ç sei que você falou que tava cheio de goodies, mas me ajuda?
    Please? Parabéns pelos 200 seguidores, e eu quero picolé -_-
    http://colorfulunicornlu.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Obrigada! ASUHSAUHA
      Ajudo sim, vou fazer ok?
      Obrigada de novo *u* Ai, nau dou q

      Excluir
  5. Parabéns pelos 200 seguidores, o blog é ótimo e você merece ^^^
    Gostei bastante do efeito, é bem legal! Adoro esse tipo de efeito.

    Beijos
    http://mundoencantadodabarbie.blogspot.com.br/

    ResponderExcluir
  6. Adorei, muito lindo Helo
    blogdabittiz.blogspot.com

    ResponderExcluir
  7. Faz um sorteio de um Layout exclusivo, você é ótima pra fazer lays :3

    landofresources.blogspot.com

    ResponderExcluir
    Respostas
    1. Verdade *u* Obrigada pela dica e pelo elogio! hihi

      Excluir
  8. Parabens pelos 200 seguidores, e o dia aprece que foi legal q

    Efeito super fofo :3

    -World Of Dreams

    ResponderExcluir
  9. Amei o Primeiro *o* MUUUITO DIVO !

    http://parad1sepfvr.blogspot.com.br/

    ResponderExcluir
  10. Esse efeito é lindo, amei os dois. *00* Quem sabe eu não use no meu próximo layout!? ><

    pimentacommenta.blogspot.com

    ResponderExcluir
  11. Que cute , amei <3

    Kisses , amore >3<
    Espero sua visita || Senhorita Liberdade

    ResponderExcluir
  12. Que efeito mais lindo *-*
    Bem criativo, adorei mesmo ♥

    Kiss, kaorii.com ~

    ResponderExcluir
  13. Que lindo :3 Principalmente o segundo, sério, parabéns. Ainda não evolui a esse nível de perfeição.

    etcforme.blogspot.com

    ResponderExcluir
  14. quero picole agora u^u kk amei o tutorial.
    http://catchingfeelings-love.blogspot.com.br/

    ResponderExcluir
  15. Awn, adoro ir em piscina, tomar sorvete e etc. Mas eu gosto quando não tem ninguém por perto porque eu sou extremamente tímida hahaha. Enfim, eu geralmente acho os lugares sem graça depois que como kkkkk. Só quero comer e ir embora. XD Enfim... Sobre o efeito destaque, eu adorei, achei muito interessante e criativo, realmente gostei! *-*

    Rediscovering Dreams

    ResponderExcluir
    Respostas
    1. Eu também ASUHASUHUH amamos comer o/ Obrigada e fico feliz que gostou :3

      Excluir
  16. Nossa 19:30 da noite e vocês na piscina?Corajosos hein ashuashua -q
    Eu gostei do efeitinho *U* achei tão lindo principalmente o segundo *w*
    ~September Rains

    ResponderExcluir
  17. Picoléé *-*
    Prefiro sacolé u.ú

    Você é muito boa para criar efeitos, amei todos os que tinham no blog de teste *-*

    DayDreaming e Asian's Icons

    ResponderExcluir
    Respostas
    1. ASUHSAUH eu não gosto muito ><

      Obrigaada *3*

      Excluir
  18. Huum acho que temos algo em comum,eu também estou com fomeeeeeeeee,rs.
    Beijos da Ka e da Bell
    http://candysbk.blogspot.com.br/

    ResponderExcluir
  19. Que lindo! Nossa, é muito perfeito, ainda não conhecia o efeito destaque u.u adorei

    maiira-t.blogspot.com.br

    ResponderExcluir
  20. Adorei o efeito, eu provavelmente vou usá-lo em breve :3 Na verdade, eu ia usá-lo no layout atual mas vi o efeito gotinha e fiquei apx ><
    Obrigada por comentar no Checkmate!
    Até,
    Wendy | Checkmate (checkm-ate.blogspot.com)

    ResponderExcluir
    Respostas
    1. Obrigada *3* Awn, fico feliz que gostou <33

      Excluir
  21. Amei os efeitos, o primeiro com desfoque ficou lindo *o*
    PARABÉNS PELOS SEGUIDORES ASHUSHUA ♥
    Kiss
    With You

    ResponderExcluir
    Respostas
    1. Fico feliz que gostou *3*
      Obrigadaa ♥♥♥

      Excluir
  22. Nossa fico D+ parabens mesmo *O*

    http://stroke-of-insanity.blogspot.com.br/

    ResponderExcluir
  23. Que efeito lindo *o* Parabéns pelos seguidores (:

    Beijos ♡
    Waking

    ResponderExcluir
  24. São muito fofos, mas gostei mais do segundo!

    Beijos - Ammy, Fairy Floss

    ResponderExcluir
  25. Adorei os efeitos, mas pra mim o 1° arrasou!

    ha-unting.blogspot.com.br

    ResponderExcluir
  26. Awn que diferente ,,amei ><

    kissus ~* || louca-por-html.blogspot.com.br

    ResponderExcluir
  27. Efeito lindo, parabéns *u*

    http://world-butterflies.blogspot.com.br/

    ResponderExcluir
  28. Que efeito diwo, mds *o*
    De repente, quem sabe eu use um dia desses ;3

    http://unicornl4nd.blogspot.com.br/

    ResponderExcluir
  29. Lindo efeito mas estou usando
    aquele de gotinha que você fez *-*

    http://loving-caramel.blogspot.com.br/

    ResponderExcluir
  30. Adorei os dois *O*~

    http://interesses-sutis.blogspot.com.br/

    ResponderExcluir
  31. Eu gostei mais do primeiro estilo do efeito, mas os dois ficaram lindos demais. <3 IFNGVIQOEWNFO Eu particularmente não consigo usar essas coisas que giram, dançam e balançam, mas esse realmente me encantou, vou guardar pra mim aqui, pera. -n
    Eu adoro nadar à noite, mas na piscina do meu prédio não tem aquecedor e - por consequência - fica muito frio de noite. ;3; 200 seguidores? O/ MEUS PARABÉNS MULHER, VAMOS FAZER UMA FESTINHA DE COMEMORAÇÃO POR MINHA CONTA ~dança~ (mentira, eu sou pobre, adeus -qq) Mas enfim, parabéns pela meta e que venham cada vez mais, e acho que um concurso seria legal, mas um sorteio também pode cair bem. q

    ResponderExcluir
    Respostas
    1. Obrigada e que bom que gostou *u* ASUSAUH socorro, morri q

      ~dançando tuts ~ SHUSUASUHSA obrigada *u* ( de novo ) ok entau :3

      Excluir
  32. que efeito perfeitooooo e seu lay tá lindo também

    Beijos, Brenda do Gave Crazy

    ResponderExcluir

Regras:
-Aceito críticas, porém, comentários ofensivos/maldosos serão apagados.
-Não aceito mais: Seguindo, segue de volta?
-Coloque o link de seu Blog no fim do comentário, é garantido que irei visita-lo e dependendo do conteúdo, até posso segui-lo :3
-Comente a vontade!