5 de abr de 2013

Tutorial : Efeito Shine


Bom Dia :)

Hoje eu irei ensinar para vocês,como aplicar o 'Efeito Shine'
Antes eu gostaria que vocês visitasem esse novo blog Hello HTML !
Para ver o efeito Shine clique aqui,agora clique em leia mais e vamos a tutorial.
1. Vá até editar HTML e procure por ]]></b:skin>. Acima dessa tag, cole:

.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;
}

Edite, como sempre, as partes em negrito e depois salve. É claro que se você entender outra parte do código e quiser mudar, pode fazer como quiser. Estou apenas dando-lhes o mais importante.

2. Em um gadget de HTML/JavaScript, cole:

<div class="image_shine">
<img src="LINK DA IMAGEM"/>
<a href="LINK" title="TITULO"><div class="hover_shine"></div></a>
</div>

Edite novamente as partes em negrito e salve.

Créditos: Kawaii World

Nenhum comentário:

Postar um comentário

Deixe um comentário ♥

Related Posts Plugin for WordPress, Blogger...