Efecto elipse degradada y cambio de color con html5 y css3

Vamos a seguir con el efecto hover que comenzamos en el post anterior. En este post (que no va a ser el último) vamos a empezar a “jugar” con las animaciones para crear una serie de efectos visuales de colores tanto con la capa como con el texto y sus respectivas sombras.

Lo primero que tendremos que hacer es modificar un poco el código anterior, que nos quedará de la siguiente manera:

.centro_de_vision {
	position:absolute;
	top:50px;
        left:400px;
	width:500px;
	height:200px;
	border-radius: 5000px / 2000px;
}

Como vemos, hemos suprimido los degradados que le pusimos, pero van a seguir, aunque en otra capa que vamos a llamar degradado, y va a ser una capa que va a estar superpuesta a la centro_de_vision de este modo:

.degradado {
	position:absolute;
	top:0px;
	left:0px;
	width:500px;
	height:200px;
	border-radius: 5000px / 2000px;
	background: radial-gradient(center top, ellipse , #ccc, #555 );
        background: -moz-radial-gradient(center top, ellipse , #ccc, #555 );
        background: -webkit-radial-gradient(center top, ellipse , #ccc, #555 );
        background: -ms-radial-gradient(center top, ellipse , #ccc, #555 );
        background: -o-radial-gradient(center top, ellipse , #ccc, #555 );
	box-shadow:inset 0px 0px 20px #000000;
	-ms-box-shadow:inset 0px 0px 20px #000000;
	-moz-box-shadow:inset 0px 0px 20px #000000;
	-o-box-shadow:inset 0px 0px 20px #000000;
	-webkit-box-shadow:inset 0px 0px 20px #000000;
}

Además de un degradado elíptico como el que explicamos antes, le daremos una sombra interna con 0 pixeles de distancia horizontal y vertical y 20 pixels de desplazamiento, le damos un color negro para que el efecto de colores que veremos luego no distorsione estas sombras, sino que se superponga.
Lo primero que vamos a crear es una animación llamada bounceY para cambiar la orientación y el color de los degradados radiales. Como queremos que cambie cuando el ratón se sitúe encima del centro_de_vision, debemos hacer hover en el centro de visión pero refiriéndonos a la capa degradado que está encima, de este modo:

.centro_de_vision:hover .degradado {
    -webkit-animation: bounceY 7s linear;
    -moz-animation: bounceY 7s linear;
    -ms-animation: bounceY 7s linear;
    animation: bounceY 7s linear;
    background: radial-gradient(center top, ellipse , #ccc, #555 );
    background: -moz-radial-gradient(center top, ellipse , #ccc, #555 );
    background: -webkit-radial-gradient(center top, ellipse , #ccc, #555 );
    background: -ms-radial-gradient(center top, ellipse , #ccc, #555 );
    background: -o-radial-gradient(center top, ellipse , #ccc, #555 );
}

Con esto, le decimos el nombre de la animación que ahora programaremos y que tiene una duración total de 7 segundos. Lo de repetir el degradado aquí es para que termine igual que empieza, es decir, arriba y en el centro. Entonces solo nos queda programar la animación para los degradados, que tendrá la siguiente forma:

@-webkit-keyframes bounceY {
    0% {
	    background: radial-gradient(center top, ellipse , #ccc, #555 );
    	    background: -moz-radial-gradient(center top, ellipse , #ccc, #555 );
    	    background: -webkit-radial-gradient(center top, ellipse , #ccc, #555 );
    	    background: -ms-radial-gradient(center top, ellipse , #ccc, #555 );
    	    background: -o-radial-gradient(center top, ellipse , #ccc, #555 );
    }
    25% {
	    background: radial-gradient( right, ellipse , #eb25db, #555);
	    background: -moz-radial-gradient( right, ellipse , #eb25db, #555 );
	    background: -webkit-radial-gradient( right, ellipse , #eb25db, #555 );
	    background: -ms-radial-gradient( right, ellipse , #eb25db, #555 );
    	    background: -o-radial-gradient( right, ellipse , #eb25db, #555 );
    }
    50% { 
	    background: radial-gradient( bottom, ellipse , #2c1ee8, #555 );
	    background: -moz-radial-gradient( bottom, ellipse , #2c1ee8, #555 );
	    background: -webkit-radial-gradient( bottom, ellipse , #2c1ee8, #555 );
	    background: -ms-radial-gradient( bottom, ellipse , #2c1ee8, #555 );
	    background: -o-radial-gradient( bottom, ellipse , #2c1ee8, #555 );
    }
    75% {
	    background: radial-gradient( left, ellipse , #29e120, #555 );
	    background: -moz-radial-gradient( left, ellipse , #29e120, #555 );
	    background: -webkit-radial-gradient( left, ellipse , #29e120, #555 );
	    background: -ms-radial-gradient( left, ellipse , #29e120, #555 );
	    background: -o-radial-gradient( left, ellipse , #29e120, #555 );
    }
    100% {
            background: radial-gradient(center top, ellipse , #ccc, #555 );
	    background: -moz-radial-gradient(center top, ellipse , #ccc, #555 );
	    background: -webkit-radial-gradient(center top, ellipse , #ccc, #555 );
	    background: -ms-radial-gradient(center top, ellipse , #ccc, #555 );
	    background: -o-radial-gradient(center top, ellipse , #ccc, #555 );
    }
}

La explicación de la animación es muy simple, lo que hacemos es decirle que en el 25% de esos 7 segundos que dura, el degradado sea de otro color y con origen en la derecha, en el 50% que empiece abajo y sea de otro color, en el 75% que empiece en la izquierda y cambie de color y en el 100% que sea como al principio, osea gris y desde arriba. Recuerdo que para la compatibilidad con el resto de navegadores habrá que poner el mismo código que tenemos dentro de @-webkit-keyframes bounceY { … } en: @keyframes bounceY { … } y en @-moz-keyframes bounceY { … }
Lo siguiente a realizar es otra capa que se llame texto que va a estar encima de la de centro_de_vision y encima también de la de degradado:

.texto {
	position:absolute;
	top:19px;
	font-size:46px;
	margin-left:95px;
	font-weight:bold;
	z-index:8;
}

Para conseguir que esté por encima del resto de capas, simplemente le hemos dicho que tenga un índice de superioridad mayor que el de las otras (8). Como en el caso anterior, vamos a hacer otra capa llamada sombreado y que contenga el código para darle sombra a la del texto:

.sombreado {
	text-shadow: 0px 6px 4px #333;
	-webkit-text-shadow: 0px 6px 4px #333;
	-moz-text-shadow: 0px 6px 4px #333;
}

Le hemos dado un sombreado de 6 pixels verticales para que vaya acorde con el degradado hecho antes. De este modo, como el origen del degradado (el color más claro está en la parte superior) la sombra irá hacia abajo. Lo que haremos ahora es una animación cambiando simplemente la orientación de la sombra en función de dónde se sitúe el color más claro del degradado, ah! y también cambiaremos el color de la fuente, pondremos un color un poco más oscuro que el de origen del degradado.

.centro_de_vision:hover .sombreado {
    text-shadow: 0px 6px 4px #333;
    -webkit-text-shadow: 0px 6px 4px #333;
    -moz-text-shadow: 0px 6px 4px #333;
    -webkit-animation: bounceX 7s linear;
    -moz-animation: bounceX 7s linear;
    -ms-animation: bounceX 7s linear;
    animation: bounceX 7s linear;
}
@-webkit-keyframes bounceX {
    0% {
		text-shadow: 0px 6px 4px #333;
		-webkit-text-shadow: 0px 6px 4px #333;
		-moz-text-shadow: 0px 6px 4px #333;
	}
	25% {
		text-shadow: -6px 0px 4px #333;
		-webkit-text-shadow: -6px 0px 4px #333;
		-moz-text-shadow: -6px 0px 4px #333;
		color:#ba22ad;
	}
    50% { 
		text-shadow: 0px -6px 4px #333;
		-webkit-text-shadow: 0px -6px 4px #333;
		-moz-text-shadow: 0px -6px 4px #333;
		color:#23199d;
	}
	75% {
		text-shadow: 6px 0px 4px #333;
		-webkit-text-shadow: 6px 0px 4px #333;
		-moz-text-shadow: 6px 0px 4px #333;
		color:#1f9d19;
	}
    100% {
		text-shadow: 0px 6px 4px #333;
		-webkit-text-shadow: 0px 6px 4px #333;
		-moz-text-shadow: 0px 6px 4px #333;
	}
}

Como vemos, el proceso es el mismo que en el caso anterior, pero esta vez hemos llamado a la animación bounceX para que el navegador no la confunda con la del degradado.

Esto es todo por ahora, en el próximo post enlazaremos el cambio de color para que se haga de manera más homogénea y empezaremos con otros efectos como rotar la capa sobre sí y cambiar las letras del texto para formar otra palabra.

Si quieres ver como queda hasta ahora, entra en: Efecto hover con HTML5 y CSS3, cambio de color de degradado, animación

Por favor, si te está gustando el efecto comparte el post en las redes sociales y comenta, para saber si tengo que seguir sumándole cosas o dejarlo ya y ponerme con otra cosa…😉

GRACIAS!

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: