Pages

Pesquisar

"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;
 








 
 

0 comentários:

Postar um comentário


Mensagem do formulário de comentário

Formulário de contato

Nome

E-mail *

Mensagem *