Barra de Redes Sociales Flotante con HTML y CSS

Aprende a crear una barra flotante de redes sociales usando solo HTML y CSS. Esta barra es ideal para aumentar la visibilidad de tus redes en tu sitio web.

Este tutorial te muestra cómo crear una barra de redes sociales flotante. Usando CSS puro, puedes incluir enlaces a tus redes y hacer que aparezcan y desaparezcan con animaciones suaves.

Descubre cómo implementar una barra de redes sociales flotante con animación en CSS. Incluye enlaces a tus perfiles y permite que los usuarios te sigan en un solo clic.

¿Qué aprenderás en este tutorial?

Con este tutorial, aprenderás a:

  • Crear una barra de redes sociales flotante con HTML y CSS.
  • Usar hover y transiciones para mejorar la interacción del usuario.
  • Integrar íconos de redes sociales con Font Awesome.

¿Qué necesitas para este proyecto?

Para realizar este proyecto, necesitarás:

  • Un editor de código, como Visual Studio Code o Atom.
  • Conocimientos básicos de HTML y CSS.
  • Enlace de Font Awesome para los íconos de redes sociales.

Cómo Crear una Barra de Redes Sociales Flotante con CSS


En este video aprenderás cómo crear una barra de redes sociales flotante y animada usando solo HTML y CSS. No te olvides de suscribirte para más tutoriales de diseño web.

Código HTML:

Este es el código HTML de la barra de redes sociales:

En este código:

  • La barra se construye dentro de div.container-bar.
  • Incluye botones para cada red social usando íconos de Font Awesome.
  • Se añade un checkbox que, al ser marcado, despliega o esconde la barra con CSS.

Código CSS:

Este es el código CSS que da el estilo y la animación a la barra:

Explicación del Código CSS:

  1. Barra Flotante de Redes Sociales:
    • .container-bar posiciona la barra de redes sociales en el lateral izquierdo de la pantalla.
    • Cada ícono tiene un color de fondo único para representar cada red social y bordes redondeados.
  2. Hover en los Íconos:
    • Al pasar el cursor sobre cada ícono, aparece un span#title con el nombre de la red social, desplazándose suavemente.
  3. Control de Visualización con Checkbox:
    • El checkbox y la etiqueta .fa-play permiten alternar entre mostrar u ocultar la barra. Al hacer clic, el ícono rota y la barra se oculta o despliega.

Vista Previa:

Aquí tienes una vista previa de la barra de redes sociales flotante. Cada ícono representa una red social, y la barra se despliega y oculta suavemente al hacer clic en el botón de control.

Conclusión:

Este proyecto es una forma simple pero efectiva de destacar tus perfiles de redes sociales en tu sitio web usando solo HTML y CSS.