Degradados

Creación de un degradado radial

La animación que crearemos en la actividad del siguiente tema tendrá un fondo compuesto por un degradado radial en tonalidades grises, que además cambiará de transparencia en determinados momentos.

Esta actividad se basa en crear este degradado para en la siguiente actividad añadirlo a la animación.

Como esta futura animación se mostrará "encima" del contenido actual, el degradado lo vamos a colocar en un <div> en el HTML, delante de los vídeos y del texto en columnas que hemos creado en las actividades de los temas anteriores.

  <div id="tapa_animacion">
    Participación en más de 300 producciones
  </div>

  <div id="presentacion">
    Centramos nuestros servicios profesionales en la creación de
    contenidos ...etc... ...etc...
  </div>

<article id="videos">
  <div id="video1">
    <iframe width="384" height="216" src="...etc..."></iframe>
  </div>

  <div id="video2">
    <iframe width="384" height="216" src="...etc..."></iframe>
  </div>
  </article>

En un ataque agudo de creatividad, el <div> que va a contener el degradado (y por tanto la animación) se va a llamar con id="tapa_animacion".

Dentro de este <div> lo único que vamos a añadir es el texto que irá encima del degradado, ya que tanto las características de este texto como la naturaleza del degradado las vamos a definir con un selector CSS que afectará a #tapa_animacion.

estilos.css

#tapa_animacion{
  width:655px;
  height:334px;
  font-family:titulares;
  text-align:center;
  font-size:33px;
  color:#313B44;
  line-height:334px;
  background:radial-gradient(center center,
  circle farthest-side, white 0%, silver 20%,
  gray 40%, white 50%);
  background:-webkit-radial-gradient(center center,
  circle farthest-side, white 0%, silver 20%,
  gray 40%, #F9F1CF 50%);
  background:-moz-radial-gradient(center center,
  circle farthest-side, white 0%, silver 20%,
  gray 40%, #F9F1CF 50%);
  background:-o-radial-gradient(center center,
  circle farthest-side, white 0%, silver 20%,
  gray 40%, #F9F1CF 50%);
  background:-ms-radial-gradient(center center,
  circle farthest-side, white 0%, silver 20%,
  gray 40%, #F9F1CF 50%);
}

Definimos el tamaño (655px / 334px) deL <div> que contendrá el degradado.

Especificamos las características del texto ("Participación en más de 300 producciones") como son:

-la tipografía (font-family)
-la alineación dentro del <div> (align)
-el tamaño (font-size) y color (color) del texto
-así como su centrado vertical en la altura de 334px de la caja:
line-height:334px;

Con background definimos el degradado radial de fondo.
En todos los casos, la sintaxis es:

radial-gradient: especifica que es un degradado radial.
center center: indica el punto en el que comienza el degradado
circle: indica que el degradado tendrá forma circular.
farthest-side: indica que el degradado se extenderá desde el centro hasta encontrar el lado más alejado de su centro (como el 50% del degradado tiene el mismo color que el fondo no se puede apreciar este ajuste).
white 0%, silver 20%, gray 40%, #F9F1CF 50%:

Repetimos exactamente el mismo código del degradado con los prefijos.

Sin preocuparnos de momento por la colocación de los diferentes elementos haz clic aquí para