DesarrolloLibre

Desarrollo Web, Android, juegos y mucho más

Categorias
11-05-2017

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


Publicidad

Give me for a beer!

Algunos recursos que te pueden interesar

Animacion SVG sencilla con solo HTML

Animacion SVG sencilla con solo HTML

Colourlovers: Paletas de colores lista para el diseño web

Colourlovers: Paletas de colores lista para el diseño web

Loader variados con CSS

Loader variados con CSS

Algunos artículos que te pueden interesar

La pseudo-class nth-child en CSS

La pseudo-class nth-child en CSS

La pseudo-clase nth-child identificar un elemento dentro de una lista de etiquetas.

Andrés Cruz 16-07-2013

Carrusel automático infinito con jQuery y CSS

Carrusel automático infinito con jQuery y CSS

En esta entrada veremos cómo crear un Carrusel automático e infinito con jQuery y un poco de CSS.

Andrés Cruz 27-06-2017

Entendiendo la propiedad perspective (perspectiva) en CSS

Entendiendo la propiedad perspective (perspectiva) en CSS

La propiedad perspective agrega un efecto tridimensional afectando la distancia que hay entre un observador y las figuras en el plano a través de una variación en el eje Z; en otras palabras, permite acercar/alejar figuras en el plano.

Andrés Cruz 05-02-2015