23 agosto 2016

Cómo hacer un degradado (Parte 1)

Hoy te enseñaré a hacer el efecto de degradado

Como puedes ver en el ejemplo anterior, he creado un fondo degradado. Parece muy complicado, pero no lo es, con una pequeña linea de estilos, puedes lograr increíbles efectos.

Te detallaré un poco las clases de degradados que puedes crear.

Degradado Lineal CSS3

Para crear un degradado lineal, se debe definir al menos dos colores, Color-1 y Color-2 indican el color inicial y el color final, y Direccion la forma o hacia donde se efectúa el degradado.

background: linear-gradient(Direccion, Color-1, Color-2, ...);

Ahora, aquí un ejemplo de un degradado, éste es el código que utilizaré

<div style="background:linear-gradient(to right, blue, green); padding:50px 0"></div>

Este es el resultado:


<div style="background:linear-gradient(to left, blue, green); padding:50px 0"></div>

Este es el resultado:


<div style="background:linear-gradient(to bottom, blue, green); padding:50px 0"></div>

Este es el resultado:


<div style="background:linear-gradient(to top, blue, green); padding:50px 0"></div>

Este es el resultado:


Además puedes hacerlos con múltiples colores, por ejemplo:

<div style="background:linear-gradient(to right, blue, green, red, yellow); padding:50px 0"></div>

Este es el resultado:


Puedes jugar con las formas del degradado, solo debes modificar:

  • to right: Hacia la derecha
  • to left: Hacia la izquierda
  • to bottom: Hacia abajo
  • to top: Hacia arriba

Y tambien puedes sustituir las palbras blue, green, red, yellow, por colores html personalizados (ejemplo: #DDDDDD)

Hasta aquí la primera parte del tutorial, espero te haya sido de utilidad, y pásate pronto para que revises las siguientes partes. Adiós =).

Cómo hacer un degradado (Parte 2)

¿Cuál técnica de degradado te gustaría aprender?

0 comentarios:

Deja el primer comentario. Para nosotros, tu opinión es muy importante.

Categorías

Diseño web

Facebook

Google+

Suscribirse

Enter your email address:

Delivered by FeedBurner

Gana dinero

Con tecnología de Blogger.
 
Suscribirse al boletín
Regístrate con tu dirección de correo electrónico para recibir noticias y actualizaciones directamente en tu bandeja de entrada