Tabla de contenido
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.
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.