Get In Touch
541 Melville Ave, Palo Alto, CA 94301,
anthoncode.com
Ph: +1.831.705.5448
Work Inquiries
info@anthoncode.com
Ph: +1.831.306.6725
Back

Diseñar una Barra Social Vertical Fija en Pantalla con HTML y CSS3

En la actualidad, tener presencia en las redes sociales es esencial para tu sitio web, marca o empresa. Por ello, en este tutorial te enseñaré cómo crear una popular barra social vertical que se mantendrá fija en la pantalla y seguirá al usuario en todo momento.

Para lograr esto, utilizaremos únicamente HTML y CSS, lo cual simplificará el proceso.

Primero, creamos un contenedor div que contendrá una lista desordenada (ul) con elementos de lista (li), cada uno de los cuales tendrá un enlace (a) con una clase específica para representar el ícono de la red social. Aquí tienes el código HTML:

<div class="social">
    <ul>
        <li><a href="http://www.facebook.com/tupagina" target="_blank" class="icon-facebook"></a></li>
        <li><a href="http://www.twitter.com/tupagina" target="_blank" class="icon-twitter"></a></li>
        <li><a href="http://www.instagram.com/tupagina" target="_blank" class="icon-instagram"></a></li>
        <li><a href="mailto:contacto@tupagina.com" class="icon-mail"></a></li>
    </ul>
</div>

Aquí hay algunos puntos clave a tener en cuenta en el código HTML:

  1. Hemos utilizado el atributo target="_blank" en los enlaces para que los usuarios abran los enlaces en nuevas pestañas y no abandonen tu sitio web.
  2. Cada clase en los elementos a representa un ícono, que se implementará mediante fuentes, como se muestra en un tutorial anterior.

A continuación, definiremos el estilo de esta barra social utilizando CSS:

.social {
    position: fixed; /* Hacemos que la posición en pantalla sea fija para que siempre se muestre en pantalla */
    left: 0; /* La posicionamos en la parte izquierda */
    top: 200px; /* Establecemos su posición vertical desde la parte superior */
    z-index: 2000; /* Usamos z-index para asegurarnos de que no se superponga a otros elementos, como sliders o galerías */
}

.social ul {
    list-style: none;
    padding: 0; /* Eliminamos el relleno predeterminado de la lista */
}

.social ul li a {
    display: block; /* Hacemos que los enlaces ocupen todo el ancho del contenedor */
    color: #fff; /* Establecemos el color del texto */
    background: #000; /* Establecemos el color de fondo */
    padding: 10px 15px; /* Añadimos relleno interno para espacio alrededor del ícono */
    text-decoration: none;
    transition: all 0.5s ease; /* Agregamos una transición suave para las propiedades */
}

.social ul li .icon-facebook {background: #3b5998;}
.social ul li .icon-twitter {background: #00abf0;}
.social ul li .icon-instagram {background: #e4405f;}
.social ul li .icon-mail {background: #666666;}

.social ul li a:hover {
    background: #000; /* Cambiamos el fondo cuando el usuario pasa el mouse */
    padding: 10px 30px; /* Aumentamos el espacio interior cuando el usuario pasa el mouse */
}

En este código CSS, hemos agregado comentarios para explicar el propósito de cada propiedad. En resumen, hemos establecido la posición fija de la barra en la parte izquierda de la pantalla, le hemos dado estilo a los enlaces para que se vean como botones y hemos aplicado animaciones suaves al pasar el mouse sobre ellos.

Es importante destacar que esta barra está configurada para estar en la parte izquierda de la pantalla. Si deseas colocarla en la parte derecha, puedes reemplazar left: 0; con right: 0;, pero ten en cuenta que deberás ajustar el estilo de hover para evitar problemas de superposición.

Con estos pasos, habrás creado una barra social vertical y fija en pantalla para mejorar la presencia de tus redes sociales en tu sitio web.

Marco Antonio
Marco Antonio
Marco Antonio es un Analista de Sistemas y apasionado por la programación y el diseño web, fundó AnthonCode para fusionar su experiencia técnica con la creatividad. Como redactor y desarrollador, se enfoca en crear soluciones digitales innovadoras y efectivas.

Leave a Reply

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

× ¿Cómo puedo ayudarte?