Crear degradados, pero... ¿sin imágenes?

Los degradados en internet, ya son invisibles. Pero no porque no estén, todo lo contrario. Son invisibles porque ya estamos demasiado acostumbrados a ellos y no podemos detenernos a pensar en que un fondo tiene un degradado, por ejemplo.
Pero nosotros somos parte de los que hacemos la web, por lo que este tema sí nos debe interesar y no nos tiene que parecer invisible.
Antes
Para crear un degradado, teníamos que abrir en nuestro ordenador un programa de creación de imágenes (como el Photoshop) y crear el degradado en formato de imagen (png, jpg, gif). Lo cual nos costaba, además de trabajo, un poco de tiempo.
Hoy
Existen muchas aplicaciones y páginas que nos ayudan a crear el degradado sólo copiando y pegando un código de CSS3 y son muy fáciles de usar!
Antes de empezar a explicar, quiero que vean el resultado de lo que les proponemos en este post haciendo click en el enlace que los lleva al final del post. Click aquí para ver los degradés.

Crear degradados con CSS3

¿Qué es CSS3?
CSS3 es la última versión de CSS (Un lenguaje para establecer estilos a las páginas HTML).
¿Cúal es la diferencia entre la última y la anterior versión?
Es una pregunta amplia, es decir, se le puede dedicar todo un post acerca de esto. Pero en rasgos generales, CSS3 nos permite hacer muchos más cambios en cuanto al estilo propio de una web, como por ejemplo las fuentes, los colores transparentados, los bordes, entre otros. Pero lo que hay que remarcar es que CSS3 nos permite tener un gran resultado en cuanto a efectos visuales sin necesidad de crear imágenes. El ejemplo de esto es justamente, el degradado.

Crear degradados sin imágenes

Empezamos por decir que lo siguiente puede llegar a ser muy fácil o muy difícil, depende del conocimiento que tengan acerca de CSS (sin discriminar versión), de cualquier forma pueden ver este post que puede servirles de ayuda si ponen atención y se concentran.
Dicho esto:

1. Vamos al siguiente link: Ultimate CSS Gradient Generator - ColorZilla.com
2. En la pantalla vemos un cuadro con degradés defaults, estos son creados por los de ColorZilla, podemos elegir uno si queremos.
   
3. Pero también puedes crear tus propios degradés para que se adapte a tu necesidad. Es muy fácil, basta con saber qué colores hay que usar en la barra de la siguiente imagen. También podés elegir la opacidad de los colores y hacer un degradé con eso:
   
4. Bueno, una vez elegido el degradé, vamos a los códigos. A la derecha de la pantalla aparece un textarea en el que aparece el código CSS del degradé. Vamos a copiar y pegar este código y lo pones en un selector en código CSS. Por ejemplo:
   

   .EjemploDeSelector{
   background: #f6f8f9; /* Old browsers */
   background: -moz-linear-gradient(top,  #f6f8f9 0%, #e5ebee 50%, #d7dee3 51%, #f5f7f9 100%); /* FF3.6+ */
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f6f8f9), color-stop(50%,#e5ebee), color-stop(51%,#d7dee3), color-stop(100%,#f5f7f9)); /* Chrome,Safari4+ */
   background: -webkit-linear-gradient(top,  #f6f8f9 0%,#e5ebee 50%,#d7dee3 51%,#f5f7f9 100%); /* Chrome10+,Safari5.1+ */
   background: -o-linear-gradient(top,  #f6f8f9 0%,#e5ebee 50%,#d7dee3 51%,#f5f7f9 100%); /* Opera 11.10+ */
   background: -ms-linear-gradient(top,  #f6f8f9 0%,#e5ebee 50%,#d7dee3 51%,#f5f7f9 100%); /* IE10+ */
   background: linear-gradient(to bottom,  #f6f8f9 0%,#e5ebee 50%,#d7dee3 51%,#f5f7f9 100%); /* W3C */
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f8f9', endColorstr='#f5f7f9',GradientType=0 ); /* IE6-9 */
   }

Preguntas

¿Cuáles son las ventajas de no usar una imagen?
Las ventajas son que no tienes que crear una imagen por tu cueta, lo cual ahorra tiempo y además pesa mucho menos que poner una imagen.
¿Qué uso se le da a esto, es decir, para qué tipo de cosas serviría en una web?
La respuesta es: sólo se usa para fondos. Pueden ser para cualquier objeto en tu web que posea fondo (header, main, sidebar, footer, inclusive body).
¿Funciona para todos los navegadores?
Sí, para los más usados con sus últimas versiones sí (como por ejemplo: Mozilla Firefox, Google Chrome, Internet Explorer, Opera, NetScape, Safari).
¿Se puede usar este degradé para letras y links?
No, es sólo para fondos.

Ejemplos 

Con esta aplicación se pueden crear "cajas" con fondos como estos:

Hola este es el texto de esta caja con degradado!
Hola este es el texto de esta caja con degradado!
Hola este es el texto de esta caja con degradado!
Hola este es el texto de esta caja con degradado!
Hola este es el texto de esta caja con degradado!
Hola este es el texto de esta caja con degradado!

Hola este es el texto de esta caja con degradado!
Hola este es el texto de esta caja con degradado!
Hola este es el texto de esta caja con degradado!
Hola este es el texto de esta caja con degradado!
Hola este es el texto de esta caja con degradado!
Hola este es el texto de esta caja con degradado!

Volviendo...

Tras largos meses de ausencia, quiero darles las gracias por todas las visitas que nos han regalado cada uno de ustedes. Sé que no serán muchos en comparación con otras páginas, pero son muchos para mí. Sinceramente (me gusta ser sincero), no sólo tuve tiempo para seguir con esta maravilla de los blogs, sino que me ha desepcionado la idea de tener que actualizar todas las entradas debido a la ya no reciente actualización de Blogger (la mejor plataforma de blogs del mundo). Sin embargo, en ésta última semana me estuve interiorizando con esto (una vez más) y renové fuerzas para seguir escribiendo y enseñarles, porque eso es lo que hacemos desde el año 2009. GRACIAS a toda la población de habla hispana que entró en estos meses y a todos los que siguen comentando en un blog a pesar de la presencia subordinada de las redes sociales. Los saludo y los espero pronto. Mayo 2013.


Twitter: @teoria_blogger
Facebook