Cuando llego CSS3, la versión actualizada de CSS , la cual tiene características de estilo como: esquinas redondeas, degradados en rellenos, sombras suaves y largo etc. Los diseñadores por supuesto les encantan utilizar este tipo de características, empiezan a utilizarlas, pero se encontraron con el problema que "Internet Explorer" no las reconoce.
A de este problema nace el proyecto CSS3 PIE, ya que podemos utilizar atributos muy sencillos de CSS3, sin preocuparse de Internet Explorer los acepte los atributos, puesto que se encarga CSS3 Pie gestionarlo.
Por eso conocí CSS3 PIE que es (PIE) Progresivo Internet Explorer, donde se trata de un proceso adjunto que permite los navegadores IE, podamos utilizar algunas de las características anteriores y se vean perfectamente en IE.
Degradado
- background: -moz-linear-gradient(left, tomato, cyan, lightgreen);/* F 3.6+ */
- background: -ms-linear-gradient(left, tomato, cyan, lightgreen);/* IExplorer 10+ */
- background: -webkit-linear-gradient(left, tomato, cyan, lightgreen);/* FF 3.6+ */
- background: -o-linear-gradient(left, tomato, cyan, lightgreen);/* Safari 5.1+, Chrome 10+ */
- background: linear-gradient(left, tomato, cyan, lightgreen);/* ESTILO ESTANDAR */
Para los antiguos navegadores como internet explorer 6 + utilizaremos filtros, algo asi:
- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#000000’, endColorstr=’#ffffff’); /* IE6 & IE7 */ /*NO FUNCIONA*/
- -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=’#000000’, endColorstr=’#ffffff’)"; /* IE8+ */
Parametros de filter:
- GradientType : 1 significa horizontal y 0 vertical.
- StartColorStr : Un valor de cadena que representa el color inicial. Para nuestro gradiente empezamos con negro (# 000000) y terminamos con el azul (# 0000FF).
-EndColorStr : Una cadena que representa el color final para nuestro degradado.