"Links com movimento"

fonte e créditos deste presente post:
elescaparatederosa

Links con movimiento

Si os habéis fijado, los links del Escaparate se mueven cuando pones el cursor sobre ellos, es un efecto que podemos conseguir añadiendo tres líneas en el CSS de nuestra plantilla, en la parte que "maneja" los efectos de los links.

Buscamos esa parte, la de los links, en nuestra plantilla, suele verse más o menos así:
/* Links
----------------------------------------------- */

Dentro de esta parte buscamos a:hover {, que es la parte que le dice a nuestros links lo que han de hacer cuando se les pasa el cursor por encima.
Justo después de a:hover {,

añadimos las tres líneas de código que os decía anteriormente:

position: relative;
top: 1px;
left: 1px;

"Si cambiáis el valor numérico en top y left se apreciará más o menos el movimiento, yo en el Escaparate lo tengo como he puesto aquí, más "meneo" ya no me gusta tanto el efecto...pero para gustos..."





Traduzido:                                                                       

Links com movimento

Se vocês repararem, os links Showcase se move quando você move o mouse por cima deles, é um efeito que pode ser conseguido pela adição de três linhas no CSS do nosso pessoal, o partido a "gerenciar" o impacto das ligações.

Nós olhamos para esta parte, as relações, em nossa equipe, muitas vezes é algo parecido com isto:


/ * Links
----------------------------------------------- */

Nesta parte, procuramos a: hover {, que é a parte que fala dos nossos links que têm a ver quando passar o mouse sobre.

Logo após a: hover { , 

adicione três linhas de código 
que eu lhe disse antes:

position: relative;
top: 1px;              
left: 1px;              

Se você alterar o valor numérico 

 em cima e da esquerda será apreciado movimento mais ou menos, 

eu mostro que eu tê-lo como eu posto aqui, 

mais "mexer" e,

portanto, eu não gosto do efeito ... mas gosto ..."

...e, fiz um exemplo, com fundo na cor rosa claro,  que fica atrás da imagem:

a:hover {
position: relative;
top: 1px;            
left: 1px;
background: #ffcccc;

 ...acrescentei ao código:

background: #ffcccc;

 








 

 

Leia Mais ►

Aprenda como: "Como dividir o cabeçalho do Blogger"

fonte e créditos:
templateseacessorios

---

Como dividir o cabeçalho do Blogger "Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo." ..."dividir o cabeçalho do Blogger, vá até o HTML de seu blog e procure pelo seguinte código" #header {  margin: 5px; text-align: center; color:$pagetitlecolor; } *Pode ser que em seu blog esteja um pouco diferente, então procure pelo código na cor verde e apague  dele até }   Substitua por este código abaixo. #header { background: #cccccc; width: 500px; float: right; margin:0 auto 10px; text-align: center; color: pagetitlecolor; } #header-2 { background: #ffffff; width: 350px; float: left; margin:0 auto 10px; } ...Agora ,procure pelo seguinte código: *Códigos em verde, cores de fundo do cabeçalho código em vermelho, tamanho do cabeçalho  <div id='header-wrapper'>       <b:section class='header' id='header' maxwidgets='5' showaddelement='no'> <b:widget id='Header1' locked='true' title='AQUI DEVERÁ ESTAR O NOME DE SEU BLOG(Cabeçalho)' type='Header'/> </b:section>     </div>  E substitua por este: <div id='header-wrapper'> <b:section class='header' id='header' maxwidgets='1' showaddelement='no'> <b:widget id='Header1' locked='true' title='NOME DE SEU BLOG (Cabeçalho)' type='Header'/> </b:section> <b:section class='header' id='header-2' showaddelement='yes'/> </div> Pronto, veja como ficou:

Leia Mais ►