Como hacer un fondo degradado en un div con CSS

Para hacer buenos diseños en nuestras páginas web, nos va a ser muy práctico poder utilizar fondos con un degradado de color que vaya progressivamente de un tono a otro. Para ello antes no teníamos más remedio que poner una imagen de fondo en el div que previamente havíamos hecho en Photoshop pero ahora, gracias a las nuevas propiedades del CSS3 lo podemos hacer muy fácilemnte con código para integrar en nuestro HTML.

La propiedad se llama Gradient Background (fondo degradado) y se puede aplicar en cualquier div o tabla (aunque no lo recomiendo en tablas). Se trata de una transición de color suave entre dos o más colores. La ventaja es que no solo ahorramos tiempo, sino que también tiempo de descarga y ancho de banda, con lo que utilizando fondos degradados en un div con CSS hacemos que nuestras páginas web vayan más rápidas.

Hay dos tipos de degradados CSS:

- Degardados lineales: van de arriba a abajo, derecha izquierda o diagonal.
- Degradados radiales: van desdel el centro hacia fuera creando un círculo.

Degradados lineales:

Para crear un degradado lineal, debes definir almenos dos colores de destino, el punto de inicio y el punto final. También puedes definir una dirección o ángulo para el degradado. El código CSS seria asi:

background: linear-gradient(direction, color-stop1, color-stop2, …);

Veamos un ejemplo de código de degradado lineal de arriba a abajo (el degradado por defecto). En este caso, empezamos por arriba en rojo y acabamos abajo en azul:

#degradado {
background: -webkit-linear-gradient(red, blue); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(red, blue); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red, blue); /* For Firefox 3.6 to 15 */
background: linear-gradient(red, blue); /* Standard syntax */
}

Como veis, he inculido la syntaxis para todos los navegadores para no tener problemas de compatibilidad

Ahora veamos un ejemplo de degradado lineal de izquierda a derecha:

#degradado {
background: -webkit-linear-gradient(left, red , blue); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, red, blue); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right, red, blue); /* For Firefox 3.6 to 15 */
background: linear-gradient(to right, red , blue); /* Standard syntax */
}

Y un ejempo de degradado lineal diagonal:

#degradado {
background: -webkit-linear-gradient(left top, red , blue); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(bottom right, red, blue); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(bottom right, red, blue); /* For Firefox 3.6 to 15 */
background: linear-gradient(to bottom right, red , blue); /* Standard syntax */
}

Degradados Radiales:

Un degradado radial se define por su centro donde irá el color de inicio y el color final definirá el contorno del circulo que se crea. éste es el código:

background: radial-gradient(shape size at position, start-color, …, last-color);

Y veamos ahora un ejemplo real aplicado para todos los navegadores:

#degradado {
background: -webkit-radial-gradient(red, green, blue); /* Safari 5.1 to 6.0 */
background: -o-radial-gradient(red, green, blue); /* For Opera 11.6 to 12.0 */
background: -moz-radial-gradient(red, green, blue); /* For Firefox 3.6 to 15 */
background: radial-gradient(red, green, blue); /* Standard syntax */
}

Y de momento lo dejamos aqui. si queires ver más exemplos de fondos degradados en CSS deja un comentario y seguiremos con el artículo

Gracias


Esta entrada fue publicada en Diseño web general y clasificada en , , , , . Guarda el enlace permanente. Publica un comentario o deja un trackback: URL del Trackback.

4 Comentarios

  1. Publicado: 9 marzo, 2015 a las 2:21 | Permalink

    Hola, antes que nada quiero agradecerte por compartir este tema, me sera de utilidad para implementar una webpage que traigo ahora mismo en proceso.
    Quiero preguntarte algo: Si echas un vistazo a la web temporalmente en mi sitio de prueba http://www.miwebcam.wc.lt podras observar que ahi va, ahi va. Quiero evitar el uso de scripts al maximo y que sea ligera y elegante.
    Como veras tengo la imagen grande superior dentro de un div llamado postheader y esa imagen esta como backgroud de este div, tambien ahi incluyo el nombre y un div que contiene a los iconos sociales face, twitter etcetera, lo que quiero lograr es insertar un carrusel de imagenes automatico dentro de ese div postheader pero igual conservando el texto y el div social,es decir como que el carrusel correra en el fondo y los iconos sociales y texto por encima. Honestamente soy nuevo en esto y tal vez se pueda o no lo que estoy preguntando, ya trate pero el texto y el div social me quedan en la parte superior y el carrusel inmediatamente abajo. Agradezco si me puedan orientar, saludos y adelante con su pagina.

  2. Luis
    Publicado: 14 marzo, 2015 a las 0:34 | Permalink

    Hola Eric si quieres que te eche una mano con el proyecto estaria encantado ya que me gusta el tema de crear webs, estoy cursando un grado medio de informatica y el desarrollo web es lo que se me da mejor, tambien decirte que estoy de practicas en una empresa relacionada con el diseño web.
    Si quieres ponerte en contacto mi email es: luiismonroy1995@hotmail.com
    No soy un as de la programacion pero me desenvuelvo bien.
    Un saludo.

  3. Publicado: 2 mayo, 2015 a las 14:17 | Permalink

    quiero saber mas de paginas web

  4. Publicado: 5 agosto, 2015 a las 12:35 | Permalink

    El problema es que no todos los navegadores y versiones los usan.

    Un saludo

Publicar un Comentario

Tu email nunca será publicado o compartido. Los campos requeridos están marcados con un *

*
*

Puedes usar estas etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

By: Dissenyaweb.com