Degradado con css3

Degradado con css3

Hola amigos como están en esta ocasión vamos a ver cómo hacer degradado con css3 o gradient, este es un efecto muy bonitos para los botones de nuestras web asi como tambien para crear fondos degradado con css3 para las paginas web o un div en espesifico dandole un toque mas profesional.

Para los degradado con css3 lo unico que vamos a necesitar es un documento html para ir viendo los resultados que vamos programando, una vez hecho el documento html dentro del body creamos un DIV con un id que vamos a referirnos a él cómo gradient nuestro div seria el siguiente.

Mi primer degradado con css3

Código CSS3

#gradient{
    font-size:24px;
    color:#FFF;
    width:250px;
    height:100px;
    border-radius:3px;
    padding:30px;
background:-moz-linear-gradient(#F00 0%, #F90 50%);
}

Codigo HTML

<div id="gradient">
Degradado con CSS3
</div>

Ahora para ir cambiando los colores de los degradado solo tenemos que cambiar el color a la siguiente linea de codigo css3.
-moz-linear-gradient();

No te olvides que para que estos degradado pueda ser visibles con los principales navegadores tenemos que escribir la linea de codigo varias veces con las propiedades para cada navegador ejemplo:

-moz-linear-gradient(); // para firefox

-ms-linear-gradient(); // para internet explorer

-o-linear-gradient(); // para opera

-webkit-linear-gradient(); // para chrome y safari

Con esto lo que hacemos es asegurarnos de que estos degradado con css3 van a funcionar en cualquiera de las ultimas actualizaciones de estos navegadores sin ningun problema.

Otros degradado con css3

Primer degradado.

Esto es un degradado
Segundo degradado.
Tercer Degradado

En este cuarto degradado utilizamos la propiedad radial-gradient(); para obtener un color en el centro y uno por los lados del div.

Cuarto Degradado.

Bueno espero que con esto hayan aprendido a crear degradado con css3 y así implementarlo en nuestras web, sitios web como facebook,twitter,google,yahoo solo por mencionar lo más famosos usan estos tipos de degradado.

Para conseguir el color que quieres es solo cuestión de ir cambiando los colores para combinar el que más te gusta, yo en lo particular uso para los diseños web el gris ligado con un blanco o un gris oscuro ya que le da un toque mucho más profesional a cualquier sitio web.

Gracias por leer y hasta una proxima entrada…

Deja un comentario

Tu dirección de correo electrónico no será publicada.