Cambio de estilo al pasar el mouse en el nombre de perfil

[dunkelheit]

CAMBIO DE ESTILO AL PASAR EL MOUSE EN EL NOMBRE DE PERFIL
 (EFECTO HOVER )

Este efecto consiste en que al pasar el mouse donde esta tu nombre de perfil cambia automaticamente de fondo, variar el tipo de letra, el tamaño de la letra, el color de la letra,etc.

Ejemplo
Antes de pasar el mouse

Despues de pasar el mouse

#profile-name:hover { background-image: url(direccion) ; } // Nuevo Fondo

#profile-name:hover {color: #FFFFFF} //Color del texto

#profile-name:hover {text-decoration: underline;} // Decoracion del texto -Subrayado

Puedes elegir otro tipo de decoracion : overline = linea arriba , line-through = tachado , blink = parpadeo , none= ninguno

#profile-name:hover {letter-spacing: 0.2cm} // Separacion de las letras

#profile-name:hover {font-weight: bold} //peso de la fuente (grosor)

Puedes elegir otro tipo de grosor :bolder y lighter

#profile-name:hover{font-family: Arial;} // tipo de letra

Puedes elegir otro tipo:

font-family: Arial, Helvetica, sans-serif;
font-family: 'Arial Black', Gadget, sans-serif;
font-family: 'Bookman Old Style', serif;
font-family: 'Comic Sans MS', cursive;
font-family: Courier, monospace;
font-family: 'Courier New', Courier, monospace;
font-family: Garamond, serif;
font-family: Georgia, serif;
font-family: Impact, Charcoal, sans-serif;
font-family: 'Lucida Console', Monaco, monospace;
font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
font-family: 'MS Sans Serif', Geneva, sans-serif;
font-family: 'MS Serif', 'New York', sans-serif;
font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
font-family: Symbol, sans-serif;
font-family: Tahoma, Geneva, sans-serif;
font-family: 'Times New Roman', Times, serif;
font-family: 'Trebuchet MS', Helvetica, sans-serif;
font-family: Verdana, Geneva, sans-serif;
font-family: Webdings, sans-serif;
font-family: Wingdings, 'Zapf Dingbats', sans-serif;

Compactando a un solo codigo:

<style type='text/css'>
#profile-name:hover { background-image: url(aqui va la direccion de la imagen) ; color: #FFFFFF ; text-decoration: underline ; letter-spacing: 0.2cm; font-weight: bold;font-family: Arial;}</style>

Espero que hayan comprendido. Cualquier duda postearla.

[Barb Taiii]

Hola:

Este código me gusta mucho, pero creo que también se puede ver en IExplorer 7, en las versiones viejas no.

 

[dunkelheit]

jojojo tal como dices funciona a partir de IE 7

yo ponia eso porque solo uso firefox 2 y IE 6,

saluditos!!

[mishell_1801]

que buenísimo esta este tema gracias por compartirlo

[TheFakeAngel]

pregunta?
este codigo choca con el truco de aumentar visitas?

o funciona normal?

[ro0ckeriito0]

Hola!
esta padrísimo
cuidate!

[☆★иiidнëliiciiöüz★☆]

Si, buenísimo efecto!

[【1zuxpiro】]

esta bueno ehhh

[zkem9]

que cute gracias

[Checa lo Nuevo!!!]

  Checa lo Nuevo!!!
     Twitter
     Informatica
  Batallas
     (H) Batallas
     (MS) Batallas
     (D) Batallas Individuales
  Ultimo Tutorial
     (Ps) Fotos HDR
  Complementos (D)
     (Ps) efecto glossy

Copy this|Start New|Full Size

• Barb Taiii - 145
• Vɑnessɑ Trujillo - 70
• Djxxx - 51
• dunkelheit - 51
• *Aηnghеll- - 48
• « REYES » - 36
• jordieB - 36
• Venom Mkr - 33
• KORE - 26
• H U G O™ - 26