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

Animación Torus solo con HTML y CSS

Animación Torus solo con HTML y CSS

Efectos hover con CSS

Efectos hover con CSS

Como dibujar con canvas y ciclos -HTML5

Como dibujar con canvas y ciclos -HTML5

Algunos artículos que te pueden interesar

Algunos efectos interesantes que se pueden lograr con listas en CSS

Algunos efectos interesantes que se pueden lograr con listas en CSS

En esta entrada veremos algunos efectos curiosos sobre listas ul (algunos con efectos 3D).

Andrés Cruz 30-04-2015

¿Cómo crear un carrusel con CSS #Infografia?

¿Cómo crear un carrusel con CSS #Infografia?

En esta entrada veremos cómo crear un carrusel con solo CSS en una infografía.

Andrés Cruz 24-09-2015

El secreto de las animaciones en JavaScript (requestAnimationFrame())

El secreto de las animaciones en JavaScript (requestAnimationFrame())

En esta entrada veremos cómo realizar algunas simples animaciones en JavaScript mediante requestAnimationFrame() cuya API se encuentra integrada con Canvas.

Andrés Cruz 21-07-2015