Inicio Apuntes FPApuntes DAW Iconos de redes sociales fluorescentes, crea los tuyos con CSS

Iconos de redes sociales fluorescentes, crea los tuyos con CSS

Los iconos se consiguen con Font-Awesome y el brillo gracias a CSS

Publicado por entreunosyceros

AVISO: Esta entrada tiene más de dos años desde su publicación. Es posible que el contenido esté desactualizado.

Una vez más aquí. Hoy vengo a dejar un rápido artículo sobre una consulta que me hizo un usuario el pasado viernes (me parece). Este me preguntaba por el texto fluorescente que suele acompañar muchos de los ejemplos que aparecen en esta página. Quería saber si se podrían crear iconos de redes sociales fluorescentes, a lo que evidentemente le dije que si.

Pues bueno, hoy vengo a dejar un código de ejemplo en el que veremos cómo crear este efecto luminoso con un poco de CSS y los iconos que proporcionan en Font-Awesome.

Iconos de redes sociales fluorescentes

Como decía, el código de esto es bastante sencillo. Solo consta de dos archivos, el HTML que utilizaremos para mostrar los iconos que importaremos de Font-Awesome, y el archivo CSS en el que añadiremos las reglas para mostrar la luminosidad que buscamos.

Iconos de redes sociales fluorescentes

Tengo que decir que las reglas CSS no son exactamente iguales a las que sueño utilizas en los textos que muestro en los ejemplos, ya que este que vamos a ver a continuación los iconos se iluminan solos cada X segundos.

La base de los iconos: index.html

Bueno, como decía, para mostrar los iconos vamos a crear un archivo llamado index.html. En este archivo incluiremos el link al CSS de Font-Awesome, el link a nuestro CSS personalizado, un contenedor para mostrar los iconos y un título. Dentro del archivo, el código que vamos a pegar es el siguiente:

<!DOCTYPE html>

<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Iconos Fluorescentes con CSS</title>
    <link rel="icon" type="image/jpg" href="https://entreunosyceros.net/wp-content/uploads/2016/03/logos.png"/>
    <link rel="stylesheet" href="style.css"/> <!-- CSS personalizado -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/> <!-- CSS para los iconos -->
</head>

<body>
    <div >
        <h1 class="titulo">ICONOS SOCIALES</h1> <!-- Título -->
    </div>
    <div class="container"> <!-- Contenedor para los iconos -->
        <a href="https://entreunosyceros.net/about" title="About entreunosyceros" target="_blank"><i class="fa fa-address-card-o" id="address-card"></i></a>
        <a href="https://www.youtube.com/@entreunosyceros" title="Youtube entreunosyceros" target="_blank"><i class="fa fa-youtube" id="youtube"></i></a>
        <a href="https://twitter.com/entreunosyceros" title="Twitter entreunosyceros" target="_blank"><i class="fa fa-twitter" id="twitter"></i></a>
        <a href="https://github.com/sapoclay" title="GitHub entreunosyceros" target="_blank"><i class="fa fa-github-square github" id="github"></i></a>
        <a href="https://www.facebook.com/entreunosyceros" title="Facebook entreunosyceros" target="_blank"><i class="fa fa-facebook-square" id="facebook"></i></a>
    </div>
</body>

</html>

Una vez pegado el texto dentro del archivo, basta con guardarlo. El siguiente paso será crear el archivo style.css dentro de la misma carpeta en la que guardamos el este archivo index.html.

Las reglas CSS: style.css

Ahora vamos a crear el archivo style.css, en el que añadiremos las reglas CSS necesarias para darle la luminosidad a los iconos. Además, también añadiremos las reglas necesarias para darle un tiempo cada X segundos que será el retraso en la iluminación. Al final del archivo, añadí una mediaquery que cambiará la disposición de los iconos en las pantallas menores a 1116px.

Dentro del archivo, solo queda pegar el siguiente código:

* {
    margin: 0;
    padding: 0;
}

body {
    height: 100vh;
    width: 100vw;
    background: #000000;
}

/* Contenedor para los iconos de las redes sociales */
.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60vh;
    width: 100vw;
}

/* Título */
.titulo {
    text-align: center;
    color: #fff;
    padding: 11px 19px;
    margin: 0 40px;
    animation: animate 1s linear infinite;
    text-shadow: 0 0 50px #0072ff, 0 0 100px #7700ff, 0 0 150px #9900ff,
        0 0 200px #0072ff;
    margin-top: 2em;
}

/* Lucecitas y tamaño de los iconos */
#address-card,
#youtube,
#twitter,
#github,
#facebook {
    text-align: center;
    font-size: 8em;
    /* Tamaño de los iconos */
    background-color: #18191f;
    color: #fff;
    box-shadow: 2px 2px 2px #00000080, 10px 1px 12px #00000080,
        2px 2px 10px #00000080, 2px 2px 3px #00000080, inset 2px 2px 10px #00000080,
        inset 2px 2px 10px #00000080, inset 2px 2px 10px #00000080,
        inset 2px 2px 10px #00000080;
    border-radius: 29px;
    padding: 11px 19px;
    margin: 0 40px;
    animation: animate 3s linear infinite;
    text-shadow: 0 0 50px #0072ff, 0 0 100px #0072ff, 0 0 150px #0072ff,
        0 0 200px #0072ff;
}

/* Retraso en la iluminación de los iconos */
#twitter {
    animation-delay: 0.3s;
}

#facebook {
    animation-delay: 0.7s;
}

#github {
    animation-delay: 0.1s;
}

#youtube {
    animation-delay: 0.5s;
}

.titulo {
    animation-delay: 0.9s;
}

@keyframes animate {
    from {
        filter: hue-rotate(0deg);
    }

    to {
        filter: hue-rotate(360deg);
    }
}
/* CSS para pantallas menores de 1116px */
@media screen and (max-width: 1116px) {
    .container {
        display: grid;
        justify-content: center;
        align-items: center;
        height: 100vh;
        width: 100vw;
    }

    #address-card,
    #youtube,
    #twitter,
    #github,
    #facebook {
        font-size: 6em;
        padding: 6px 15px;
    }

    .titulo {
        margin-top:0em;
    }
}

Y una vez pegado el contenido dentro del archivo, basta con guardarlo. Tras esto, ya se puede probar el código ejecutando el archivo index.html. Si quieres ver funcionando este código antes de probarlo en tu propio equipo, puedes verlo en la sección de ejemplos de esta web.

Con esto, se puede ver cómo se pueden crear de forma sencilla iconos de redes sociales fluorescentes que se iluminen solos cada X segundos. Ahora cada usuario que quiera puede adaptarlo a su web o buscar la forma de adaptarlo lo mejor posible a su página, además de cambiar los colores según cada cual quiera.

También te puede interesar ...

Deja un comentario

* Al utilizar este formulario, aceptas que este sitio web almacene y maneje tus datos.

Resumen de privacidad
cookies entreunosyceros

Esta web utiliza cookies para que podamos ofrecerte la mejor experiencia de usuario posible.

La información de las cookies se almacena en tu navegador y realiza funciones tales como reconocerte cuando vuelves a nuestra web o ayudarnos a comprender qué secciones de la web encuentras más interesantes y útiles.

Nunca almacenamos información personal de ningún tipo.

Tienes toda la información sobre privacidad, derechos legales y cookies en nuestra página sobre la política de privacidad o en la página sobre nuestra política de cookies.

Cookies necesarias

Las cookies estrictamente necesarias tiene que activarse siempre para que podamos guardar tus preferencias de ajustes de cookies.

Si desactivas esta cookie no podremos guardar tus preferencias. Esto significa que cada vez que visites esta web tendrás que activar o desactivar las cookies de nuevo.

Cookies de terceros

Esta web utiliza las siguientes cookies adicionales:

- Mailchimp: Recordar si ya estás suscrito al boletín de noticias y sino ofrecértelo al salir.

- Accesibilidad: Para saber tus ajustes de accesibilidad en cada visita.

- Comentarios: Saber si has leído y aceptado nuestra política de privacidad a la hora de dejar un comentario en la web.

- Google Analytics: Localización para recopilar información anónima tal como el número de visitantes del sitio, o las páginas más populares.

- Goggle Adsense: Anuncios personalizados según tu geolocalización y preferencias.

Dejar estas cookies activadas nos permite mejorar nuestra web.

Adblock Detectado!!

Ayúdanos deshabilitando la extensión AdBlocker de tu navegador para visitar esta web.
Si no sabes hacerlo en Chrome, consulta el siguiente enlace. Si utilizas Firefox, puedes consultar este otro enlace.
Esto mejorará tu experiencia en este sitio web.