Foros del Web » Creando para Internet » CSS »

Degradados all browsers

Estas en el tema de Degradados all browsers en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 24/12/2011, 11:03
Avatar de fishdesign  
Fecha de Ingreso: abril-2011
Ubicación: Málaga
Mensajes: 389
Antigüedad: 11 años, 1 mes
Puntos: 95
Degradados all browsers

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:
Cita:
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:
Ver original
  1. <?xml version="1.0" ?>
  2. <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1 1" preserveAspectRatio="none">
  3.   <linearGradient id="grad-ucgg-generated" gradientUnits="userSpaceOnUse" x1="0%" y1="0%" x2="0%" y2="100%">
  4.     <stop offset="0%" stop-color="#1e5799" stop-opacity="1"/>
  5.     <stop offset="50%" stop-color="#2989d8" stop-opacity="1"/>
  6.     <stop offset="51%" stop-color="#207cca" stop-opacity="1"/>
  7.     <stop offset="100%" stop-color="#7db9e8" stop-opacity="1"/>
  8.   </linearGradient>
  9.   <rect x="0" y="0" width="1" height="1" fill="url(#grad-ucgg-generated)" />
  10. </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
__________________
Web Designer.
Themes-Up!, próximamente

Última edición por fishdesign; 24/12/2011 a las 11:05 Razón: qu
  #2 (permalink)  
Antiguo 25/12/2011, 11:05
Avatar de ZoroRoronoa  
Fecha de Ingreso: marzo-2011
Ubicación: California, USA
Mensajes: 824
Antigüedad: 11 años, 2 meses
Puntos: 116
Respuesta: Degradados all browsers

Se agradece el aporte compañero
__________________
Programador jQuery & PHP
  #3 (permalink)  
Antiguo 25/12/2011, 11:30
 
Fecha de Ingreso: octubre-2011
Mensajes: 27
Antigüedad: 10 años, 7 meses
Puntos: 2
Respuesta: Degradados all browsers

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.

Etiquetas: browsers, degradados, fondo
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 2 personas




La zona horaria es GMT -6. Ahora son las 20:00.