Hover effects Link Globe

7 de /junio06 de /2015
4m 16s
css
0 comentarios
4328

Los efectos que utilizamos en un enlace o botón cuando hacemos “click” o “hover” sobre el mismo, son una de las cosas que fascinan al usuario a primera vista.

En este tutorial vamos a crear una barra de navegación con cuatro enlaces y los personalizaremos para que al hacer “hover” se muestre un globo o comunmente llamado en algunos ámbitos “bocadillo” que esconde un texto alternativo, igual que el que está en la imagen.

 

hover-effects-globe-min

 

Un consejo: Los dispositivos móviles con pantalla táctil no pueden mostrar este efecto porque no disponen de “mouse”, por lo que no debemos esconder bajo estos efectos información relevante al usuario.

Comenzamos

Creamos un documento HTML5 en el que vamos a incluir un elemento “nav” con una lista desordenada (“ul”) en su interior con sus respectivos enlaces.

Dentro de cada enlace insertamos un elemento “span” y un salto de línea antes del contenido.

HTML

<nav>
	<ul>
		<li>
			<a href="#">HOME
				<span><br>The principal page</span>
			</a>
		</li>
		<li>
			<a href="#">CONTACT
				<span><br>Contact me</span>
			</a>
		</li>
		<li>
			<a href="#">ABOUT
				<span><br>About us</span>
			</a>
		</li>
		<li>
			<a href="#">GALLERY
				<span><br>Visit the gallery</span>
			</a>
		</li>
	</ul>
</nav>

El código HTML es muy sencillo, ahora crearemos los estilos, en primer lugar creamos un pequeño “reset” en el CSS, tan solo afectará a los enlaces y el diseño de las listas.

CSS

a{text-decoration: none;}
ul, ol{list-style-type:none;}

A continuación creamos el resto de los estilos, trabajaremos exclusivamente sobre los elementos “li”, “a” y “span”.

Dejando a un lado otros aspectos del diseño, nos vamos a centrar en lo importante, los elementos de enlace tienen que tener posición relativa y presentarse en “display:block”, el elemento “span” tiene que tener el mismo color que el fondo del elemento “li” que lo contiene, para que no se muestre el texto alternativo, he remarcado las lineas más importantes del código.

li, a {
  border-radius : 5px;
}
li {
  background: #444444;
  display: inline-block;
  padding: 0.5em 1em 0 1em;
  text-align:center;
}
span{color : #444444;}
a {
  display : block;
  padding : 1em 1.5em 0.5em 1.5em;
  font-size : 1.2em;
  position: relative;
  top: 0;
  color: #FFFFFF;	
}

¿Ya ves los enlaces igual que la imagen de la presentación? Bien, entonces solo nos queda crear los estilos para que al pasar el “mouse” se muestre el globo o bocadillo flotando sobre el enlace.

En primer lugar, el código que hará que flote el enlace y se muestre el texto alternativo:

li:hover a {
  top   : -25px;
  color : #a1cc3a;
  background-color: #CCCCCC;
  text-shadow: 1px 1px 1px #555555;
}

Si estais montando el ejemplo mientras seguís el tutorial, es muy recomendable comprobar el resultado cada vez que actualizamos el código para ver los resultados y comprender el proceso.

Por último creamos el código que hará el resto del trabajo, utilizamos el selector “after” para insertar con un juego de bordes el “piquito” de abajo del globo y aplicamos la propiedad “transition” a los elementos necesarios para que el efecto sea más agradable y cambie lentamente

li a:after {
  display  : block;
  content  : '';
  position : absolute;
  top  : 100%;
  left : 42%;
  border-style : solid;
  border-color : transparent;
  border-width : 13px 8px 0 8px;
}
li:hover a:after {
  border-color : #CCCCCC transparent transparent transparent;
}
a, li:hover a, li a:after, li:hover a:after  {		
  transition : all .5s;
}

El código está disponible en mi repositorio de Github para su descarga, gracias por pasar por mi web.

Valoraciones

Sé el primero en valorar

* Tu valoración puede tardar hasta 72 horas en publicarse.

He leido y acepto el Aviso legal y condiciones de uso

Quizás te interese ...

Utilizamos cookies para mejorar tu experiencia

Utilizamos cookies propias y de terceros para personalizar el contenido, analizar nuestros servicios, ofrecer funciones de redes sociales, analizar el tráfico y mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación.

Permitir todas las cookies Configurar Política de cookies