miércoles, 9 de enero de 2013

UN ENLACE CON EFECTO EMERGENTE

Este es un enlace con mensaje emergenteEste efecto es bastante practico a la hora de informar sobre un enlance. El código html que lo pone en marcha después de marcar el estilo es :EL ENLACE <a href="javascript:void();"> PUEDES PONER LO QUE QUIERAS<span>Y AQUI EL MENSAJE EMERGENTE</span></a>

EL ESTYLO A APLICAR

<style type="text/css"> a { text-decoration: none; position: relative; }
a span { text-decoration: none; width: 100px; height: auto;
line-height: 20px;
padding: 10px;
font-size: 14px;
color: #719DAB;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
text-align: center;
border: 4px solid #fff;
background: rgba(255,255,255,0.9);
border-radius: 5px;
pointer-events: none;
position: absolute;
left: 0; bottom: 200px;
opacity: 0;
box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out; }
a:hover span { opacity: 0.9; left: 50%; bottom: 10px; color: #000000; } </STYLE>

AYUDA:CÓDIGO todo CÓDIGO
ó
BÁJATE AL FORO

2 comentarios :

  1. Respuestas
    1. El código lo tienes en la cajita roja que sales si pasas el raton por el enlace del principio pero de todas formas aqui te lo dejo has de colocarlo en un gadget html/java...EL ENLACE <a href="javascript:void();">
      PUEDES PONER LO QUE QUIERAS<span>Y AQUI EL MENSAJE EMERGENTE</span></a>
      tabien podrias mirar como presionando el enlace cielo...

      Eliminar