Utilizar degradados CSS3 en Internet Explorer 10

Mucho se habla de la compatibilidad de las hojas de estilo CSS3 con los diferentes navegadores existentes en el mercado. Lo cierto es que cada uno de ellos interpreta los comandos de una manera ligeramente diferente. En este artículo, damos algunos consejos para trabajar los degradados en estilos escritos con CSS3, y la sintaxis de cada línea para que Internet Explorer 10 los lea correctamente.

Como todos los diseñadores saben, se denomina degradado a la transición entre un color y otro. Esto es algo que hoy se utiliza como recurso permanente para dar estilos a todo tipo de elementos, desde fondos de imágenes hasta botones. Internet Explorer 10 en español soporta dos tipos de degradados principales: circular y lineal. Este último es el más utilizado por la mayoría de los diseñadores y desarrolladores. A continuación, te dejamos las instrucciones básicas para escribir el código correcto de cada uno de ellos.

Degradado lineal en CSS3 para Internet Explorer 10

El degradado linealse utiliza para pasar de un color a otro, de forma suave y continuada. Para que Internet Explorer 10 interprete de manera correcta este estilo, se debe escribir con la siguiente sintaxis:

-ms-linear-gradient (, , …);

Al ser opcional, éste nos indica la dirección que tendrá el degradado. Por ejemplo, si queremos que vaya de izquierda a derecha, debemos colocar left right. El segundo parámetro, stop color, es un valor obligatorio y puede seleccionarse de cualquier lista de colores válidos para Internet Explorer 10 . Por último, offset es el porcentaje del efecto sobre el tono. Como ejemplo de degradado lineal podemos escribir lo siguiente:

background-image: -ms-linear-gradient(top right, #FFF133 0%, #16D611 50%, #00A3EF 80%);

Degradado circular en CSS3 para Internet Explorer 10

La sintaxis correcta para utilizar este tipo de gradiente es

-ms-radial-gradient , , , );

es un parámetro opcional cuya función es especificar la forma que tendrá el degradado final. es el tamaño de cada forma teniendo en cuenta el valor más cercano al centro. Dentro de esta característica podemos aplicar los siguientes valores: closest-side, closest-corner, farthest-side, farthest-corner, contain y farthest-corner. Un ejemplo de escritura utilizado para declarar el degradado circular y que sea correctamente interpretado por Internet Explorer 10, es el siguiente:

background-image: -ms-radial-gradient(left bottom, circle farthest-side, #F7FF08 0%, #21AD11 50%, #00A3EF 80%);

De ahora en más, sólo resta que pruebes estos consejos en tus desarrollos.

Artículos relacionados:

• Internet Explorer 10 y el soporte para HTML5.
• Flash en Internet Explorer 10 para Windows 8.
• Internet Explorer 10: Vídeo sobre el funcionamiento del navegador de Windows 8.