Crear Bookmark al estilo Apple Dock con CSS

Aprende a utilizar el efecto burbuja para la sección de redes sociales en tu página, les dará un toque moderno y novedoso a los tan conocidos botones. Les recomendamos dos métodos diferentes para lograr este efecto.

Método 1: CSS Sprites

HTML

CSS PARA EL FONDO:

CSS PARA LAS IMÁGENES:

Es muy importante tener encuenta las medidas exactas para usar CSS Sprites, de lo contrario no tendremos buenos resultados ya que la imagen nos quedará fuera de lugar.

Método 2: Image Swapping

En este método tendremos más HTML que CSS ya que usaremos 2 imágenes por link

HTML:

CSS

Aquí la diferencia con el método 1 es que deberemos el alto y ancho del elemento < li >

CSS PARA LOS LINKS:

Hay que tener cuidado de no olvidarse poner la propiedad “position: relative;” ya que es la que usaremos z-index para que las imágenes se agranden cuando hagamos hover. (z-index sólo funciona en la position relative o absolute)

Scroll to top