Degradados all browsers

[fishdesign]

Por comodidad suelo usar la herramienta online para generar degradados, la cual te permite hacer degradados de una manera muy visual y obtener el código en CSS.

El otro día me fijé que existe una opción (IE9 Support) que me ha funcionado en anteriores versiones de IE y la verdad es que esta opción pasa bastante desapercibida, aunque probablemente algunos ya conozcan.

Este agrega a nuestro CSS lo siguiente:

background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3 N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0Jv eD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZS I+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2Vu ZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZS IgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgog ICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzFlNT c5OSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZz ZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzI5ODlkOCIgc3RvcC1vcG FjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3Rv cC1jb2xvcj0iIzIwN2NjYSIgc3RvcC1vcGFjaXR5PSIxIi8+Ci AgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM3 ZGI5ZTgiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3 JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEi IGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZX JhdGVkKSIgLz4KPC9zdmc+);

Como verán, se trata de un xml en base64, que si decodificamos, nos dará lo siguiente:

Código XML:

<?xml version="1.0" ?>
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1 1" preserveAspectRatio="none">
  <linearGradient id="grad-ucgg-generated" gradientUnits="userSpaceOnUse" x1="0%" y1="0%" x2="0%" y2="100%">
    <stop offset="0%" stop-color="#1e5799" stop-opacity="1"/>
    <stop offset="50%" stop-color="#2989d8" stop-opacity="1"/>
    <stop offset="51%" stop-color="#207cca" stop-opacity="1"/>
    <stop offset="100%" stop-color="#7db9e8" stop-opacity="1"/>
  </linearGradient>
  <rect x="0" y="0" width="1" height="1" fill="url(#grad-ucgg-generated)" />
</svg>
 

Evidentemente la mejor opción seguirá siendo utilizar CSS3, pero esta alternativa/hack para IE es bastante rápida, limpia y más flexible que usar imágenes.

La url es: http://www.colorzilla.com/gradient-editor/


Un saludo

[ZoroRoronoa]

Se agradece el aporte compañero

[sgb004]

http://www.colorzilla.com/gradient-editor/ es excelente, yo lo uso siempre, y para complementar degradados con bordes redondeados uso CSS3 PIE http://css3pie.com/documentation/supported-css3-features/, quito de la lista el filter, en si para ie uso:

ie6 -> filter: progid:.... , aunque ya no se puede usar bordes redondeados, filter ocupa todo el alto y ancho del objeto.

ie7, ie8 -> -pie-background: .....; behavior: url(PIE.htc); aunque tiene algunos problemas con degradados radiales.

ie9 -> background: url(data:image/svg ..... es genial, la opción que propone fishdesign para esta versión de ie es la mejor, para complementarlo microsoft nos da mas opciones: http://ie.microsoft.com/testdrive/graphics/svggradientbackgroundmaker/default.html.

colorzilla, es una herramienta rápida, fácil y muy poderosa, le falta un poco con los degradados radiales, como poder elegir la posición del centro del radial, para eso si es necesario googlear un poco.