tutorial

Efeito Shine

fevereiro 17, 2013,3 Comments


Hey Boa noite gatas ! 
tô com muita intimidade
Enfim, vou ensinar a vocês como fazer efeito Shine
"Camila o que é efeito shine?" Efeito Shine é aquele efeito sobre os icon/avatares que tem ali na sidebar e o gadget escrito "VISITE TAMBÉM":
Passa o mouse lá e vê o efeito que faz! 
Clica em Leia mais pra saber fazer esse efeito.


Bom pra usar esse efeito você tem que ter icons/avatares, tanto faz... são aquilos que eu disponibilizei esse dias (www) Se forem muito grandes, vocês entram no photoscape e redimensiona o tamanho para 135 por 135 ou menos. 
Enfim vamos aos códigos

Passo um:
Vá em Modelo, e editar Html e aperta Ctrl+F e procure pela tag:
]]></b:skin>
E antes dessa tag você cola: 
.image_shine{
    width:  LARGURApx;
    height: ALTURApx;
    margin-right: 5px;
    margin-bottom: 5px;
    position: relative;
    float: left;
    border: 3px solid #CORDABORDA;
}
.hover_shine{
    width:115px; height: 115px;
    background-image: url(http://i.minus.com/iuvzYDPlYu8RR.png);
    position: absolute;
    background-position: -265px 0;
    left:0px; top:0px;
    background-repeat:no-repeat;
}
.hover_shine:hover{
    background-position: 10px 0;
    -webkit-transition: background-position .9s ease;
       -moz-transition: background-position .9s ease;
         -o-transition: background-position .9s ease;
            transition: background-position .9s ease;
}
Agora salva e sai da página de HTML

Passo dois:
Vai em adicionar Gadget em Layout adiciona o Gadget Html/JAVASCRIPT
e cola: 
<div class="image_shine">
<img src="LINK DA IMAGEM"/>
<a href="LINK" title="TITULO"><div class="hover_shine"></div></a>
</div>

E faz exatamente o que se pede, Link da imagem no caso o icon ou a foto sei lá.
Link é tipo o blog da pessoa que você vai divulgar ou o blog da autora sei lá também 
E o titulo é o nome do blog ou dá autora! 
Espero ter ajudado até mais. 


Ps: Peço educadamente para vocês seguirem o blog e comentarem sempre pra que deixe nós do One Di Meu Tudo (blog) Com mais vontade e inspiração para postar, quando não vimos comentários no meu caso eu sempre acho que ninguém viu e que não quero continuar então por favor, comentem, peçam coisas e critiquem ou elogie as postagem, obrigada!

Tags: tutorialAuthor: Camila Homs

Lorem ipsum dolor sit amet, cotur acing elit. Ut euis eget dolor sit amet congue. Ut vira codo matis. Sed lacia luctus magna ut sodales lorem.

You Might Also Like

3 comentários:

  1. Imagine Directioners 17 de fevereiro de 2013 às 11:03

    Tô Seguindo! Camila Vc Poderia Ensinar Como Fazer Tipo No Seu Layout Tem A Foto Dos Meninos Por Tras e Tal.. Poderia Ensinar Como Fazer Isso?

    ResponderExcluir
  2. One Direction Forever18 de fevereiro de 2013 às 00:29

    Amei, já coloquei no meu blog :) sauhsuashu' cah aonde acha theme de blogger estilo tumblr?

    ResponderExcluir
  3. Jady Malik e Iris Tomlinson28 de julho de 2013 às 16:48

    Qual a textura que vc usou na ilustração do post Camila ? Me diz preciso dela ! :)

    ResponderExcluir

Assinar: Postar comentários (Atom)