Efecto elipse degradada con html5 y css3

Vamos a juntar varios efectos vistos en otros post anteriores para lograr un curioso efecto para una capa en la que le daremos un border-radius y un degradado radial para conseguir un “centro de visión” en la web. Un “centro de visión” es una zona o sección de un website en la que primero se fijan los visitantes. La gente suele usar estos “centros de visión” para el título de la página web, pero en realidad el título lo sabe todo el mundo, por lo que tal vez nos interese que se fijen en otras cosas… bueno, cada cual que lo use como quiera. Vamos a ello:

Lo primero que tenemos que hacer, como ya he dicho antes, es darle un border-radius a nuestra capa, pero no un border radius normal, como los que he explicado en otros post, sino uno un tanto peculiar que me dispongo a explicar ahora:

El código de nuestro border radius tiene el siguiente formato: border-radius: Xpx / Ypx;

En este caso, vamos a crear una especie de elipse dándoles forma a las 4 esquinas mediante un radio horizontal (X) y uno vertical (Y) dados en píxeles y separados mediante una barra diagonal (/). Para conseguir una capa elíptica tendremos que “jugar” con las medidas tanto de la capa como de los radios horizontales y verticales. Para mi capa de ejemplo que mide 500px deberíamos darle unas 10 veces más al radio del eje x y un poco más de la mitad al del eje y. En este caso, mi código fuente ha quedado:

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

Como vemos, hemos creado una capa con una posición determinada, un ancho y alto proporcionado (500x200px) y un fondo que luego quitaremos o modificaremos. Pero el dato importante es el border radius que hemos creado, con 5000 pixels para el radio horizontal (que hace una curva larga y poco pronunciada) y 2000 pixels para el radio vertical (que hace una curva menos proniunciada)

Lo siguiente que realizaremos es un degradado radial con forma de elipse. El código tendrá el siguiente formato: background: radial-gradient(center, ellipse , #ccc, #555 220px);

Como vemos, le damos un fondo degradado, con origen en el centro (center) y forma elíptica (ellipse), de gris claro casi blanco (#ccc) a gris más oscuro (#555) y con un tamaño de 220 pixels para que no ocupe el totalidad de la capa y quede el borde un poco más oscuro que el fondo del cuerpo de la página, que será #555.

Por lo que nuestro código final será:

body {
	background:#555;
}
.centro {
	position:absolute;
	top:50px;
	width:500px;
	height:200px;
	border-radius: 5000px / 2000px;
	background: radial-gradient(center, ellipse , #ccc, #555 220px);
   background: -moz-radial-gradient(center, ellipse , #ccc, #555 220px);
   background: -webkit-radial-gradient(center, ellipse , #ccc, #555 220px);
   background: -ms-radial-gradient(center, ellipse , #ccc, #555 220px);
   background: -o-radial-gradient(center, ellipse , #ccc, #555 220px);
}

En el próximo post realizaremos un efecto hover para que el texto rote sobre sí mismo cambiando y los degradados se amplíen y reduzcan de una forma muy curiosa y visible (desde mi punto de vista, el mejor efecto de todo el blog).

Si quieres ver un ejemplo de cómo quedaría el efecto realizado en este post, entra en: Curioso estilo con CSS3 para capa elíptica

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: