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: