Creando una caja de luz difuminada con CSS

- Andrés Cruz

Creando una caja de luz difuminada con CSS

Ya ha pasado un tiempo desde que creamos o desentrañamos algún experimento CSS, hoy le toca el turno de una especie de caja de luz en la zona posterior que el autor llamó (Back Glow) y que podemos emplear para promocionar textos, cartas, logos, etc y el resultado queda bastante bien y es que cualquier cambio progresivo con luces de colores difuminados es muy vistoso y podemos ver en la presentación de esta entrada; veamos cómo está compuesto este experimento paso por paso.

Definiendo la caja de luz con CSS

Como siempre, empezamos por las bases, y es definiendo la caja que se superpone a los colores difuminados, para esto creamos un contenedor de las dimensiones que queramos y definimos otros aspectos estéticos como el centrado de texto, color de fondo y la animación que crearemos posteriormente; El CSS es el siguiente:

.back_light {
	position: relative;
	width: 500px;
	height: 500px;
	line-height: 500px;
	text-align: center;
	color: #252B37;
	background-color: #151823;
	animation: textColor 10s ease infinite;
}

Definiendo el contenedor difuminado extra con CSS

Como ya hemos empleado en posteriores entradas:

Crearemos el CSS del contenedor extra, definiendo, posición tamaño y escalado:

.back_light:after {
	position: absolute;
	content: "";
	top: 5vw;
	left: 0;
	right: 0;
	z-index: -1;
	height: 100%;
	width: 100%;
	margin: 0 auto;
	transform: scale(0.75);
}

Y ahora le daremos un poco de estilo, este contenedor servirá para mostrar los colores definidos en el gradiente (linear-gradient) de forma progresiva, le aplicaremos un filtro blur para hacerlo difuminado, e indicaremos la animación para el desplazamiento de la posición del fondo:

.back_light:after {
	-webkit-filter: blur(5vw);
	-moz-filter: blur(5vw);
	-ms-filter: blur(5vw);
	filter: blur(5vw);
	background: linear-gradient(270deg, #0fffc1, #7e0fff);
	background-size: 200% 200%;
	animation: animateGlow 10s ease infinite;
}

Finalmente definimos las animaciones para el cambio de color del texto y el cambio de posición del contenedor difuminado extra:

@keyframes animateGlow {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}
@keyframes textColor {
	0% {
		color: #7e0fff;
	}
	50% {
		color: #0fffc1;
	}
	100% {
		color: #7e0fff;
	}
}

Finalmente obtenemos el siguiente resultado:

El ejemplo original lo puedes encontrar en el siguiente enlace: Animated Back Glow by George Hastings.

Ahora, haciendo muy pocos cambios en el código fuente que mostramos anteriormente (solo remover el color de fondo del contenedor e incluir el tag img) podemos crear experimentos como el siguiente:

Contenedor difuminado extra con logo de Twitter

Contenedor difuminado extra con logo de Apple

Andrés Cruz

Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz en Udemy

Acepto recibir anuncios de interes sobre este Blog.