DesarrolloLibre

Desarrollo Web, Android y mucho más

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

Ondas con SVG y CSS

Ondas con SVG y CSS

Eye Candy

Eye Candy

Css3 Spinners

Css3 Spinners

Algunos artículos que te pueden interesar

Usando CSS para validar visualmente campos del formulario

Usando CSS para validar visualmente campos del formulario

Con HTML5 podemos utilizar el atributo required para indicarle al navegador que este campo es requerido.

Andrés Cruz 19-08-2013

¿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

Efectos CSS con Google Font Effects

Efectos CSS con Google Font Effects

Como su nombre indica, la API Google Font permite agregar fuentes; en este artículo explicaremos cómo utilizar las fuente de efecto de Google.

Andrés Cruz 06-02-2014