Degradados con CSS

http://mundogeek.net/archivos/2011/04/04/degradados-con-css/

Degradados con CSS

Shopify Helps You Sell See how Shopify simplified Ecommerce for Charleston Biscuits youtube.com/shopify
Anuncios Google

Twittear

15

Recomendar

Aunque se trata de una caracterstica experimental, sujeta a posibles cambios en el futuro, los navegadores ms populares del mercado ya permiten hoy en da, en sus ltimas versiones, la creacin de fondos con degradados o gradientes sin necesidad de usar imgenes, utilizando exclusivamente CSS. Esto, cmo no, a excepcin de Internet Explorer, con el que tenemos que usar su peculiar sistema de filtros. Los desarrolladores del motor de renderizado que utilizan Safari y Google Chrome, Webkit, fueron los primeros en sugerir la creacin de degradados utilizando CSS, a principios de 2008. Su implementacin, disponible para Safari 4 y superiores y Google Chrome 1 y superiores, soportaba degradados lineales y radiales utilizando las sintaxis:
view plain copy to clipboard print ?

01. 02.

webkitgradient(linear, punto_inicio, punto_fin, parada[, parada]+) webkitgradient(radial, centro_interno, radio_interno, centro_externo, radio_externo, parada[, parada]+)

Desde Mozilla se comenz entonces a implementar una sintaxis similar a la de Webkit, ampliada, que se vera abandonada al poco tiempo, cuando la W3C propuso una sintaxis alternativa, que es la que se acab por introducir en Firefox 3.6 (Gecko 1.9.2). El borrador de la W3C define actualmente 4 funciones para la creacin de degradados, a las que Mozilla aade el prefijo -moz-, por tratarse de una implementacin propietaria de una caracterstica experimental, que puede diferir de la de otros navegadores. Las funciones del borrador son:
linear-gradient(): para crear un degradado lineal radial-gradient(): para crear un degradado radial repeating-linear-gradient(): para crear un degradado lineal que se va repitiendo hasta el final del bloque repeating-radial-gradient(): para crear un degradado radial que se va repitiendo hasta el final del bloque

A principios de este ao 2011, Webkit (Safari 5.1 y Google Chrome 10) adopt tambin estas funciones, aunque manteniendo las anteriores por razones de compatibilidad. Opera tambin se ha sumado a su implementacin, introduciendo estas funciones en la versin 11.10 del navegador. Webkit y Opera utilizan, respectivamente, los prefijos -webkit- y -o- al utilizar estas funciones. Por otro lado, Internet Explorer, como comentamos, no permite crear degradados con CSS, sino que tenemos que utilizar sus tristemente famosos filtros, y en concreto, el filtro gradient, disponible desde la versin 5.5. Estos hacen uso de DirectX, y pueden suponer un consumo exhaustivo de recursos, por lo que no os aconsejo excederos. En resumen, para crear un bonito degradado entre dos tonos de azul, #2B93D2 y #77BCE6, que sea compatible con las ltimas versiones de los navegadores ms populares, podramos hacer lo siguiente:
view plain copy to clipboard print ?

01. 02. 03. 04. 05. 06. 07. 08. 09. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19.

.degradado { /* Color alternativo para versiones que no soporten degradados */ backgroundcolor:#2B93D2; /* Safari 4+ y Chrome 1+ */ backgroundimage:webkitgradient(linear, left top, left bottom, colorstop(0, #2B93D2), colorstop(1, #77BCE6)); /* Safari 5.1+ y Chrome 10+ */ backgroundimage:webkitlineargradient(#2B93D2, #77BCE6); /* Firefox 3.6+ */ backgroundimage:mozlineargradient(top, #2B93D2, #77BCE6); /* Opera 11.10+ */ backgroundimage:olineargradient(top, #2B93D2, #77BCE6); /* Internet Explorer 5.5+ */ filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#2B93D2', EndColorStr='#77BCE6'); }

1 de 8

26/01/2012 20:55

Degradados con CSS

http://mundogeek.net/archivos/2011/04/04/degradados-con-css/

obteniendo el siguiente resultado (ten en cuenta que es necesario utilizar uno de estos navegadores para poder ver el resultado):

Veamos ahora la sintaxis exacta de estas funciones en cada uno de los navegadores.

Safari 4+ y Chrome 1+
Empecemos por la antigua sintaxis de Webkit. Los degradados lineales se crean de la siguiente manera:
view plain copy to clipboard print ?

01.

webkitgradient(linear, punto_inicio, punto_fin, parada[, parada]+)

punto_inicio y punto_fin definen una recta que es la direccin en la que se bottom como punto de fin, por ejemplo, el degradado se aplicar de la esquina

aplicar el gradiente. Con left top como punto de inicio y right superior izquierda a la inferior derecha.

Las paradas son funciones color-stop() que indican el color que tomar el degradado en un cierto punto de la lnea. El valor color-stop(0.5, indicara que queremos un gris oscuro en la mitad del degradado. Tambin se puede utilizar from() y to() para indicar el color al inicio y al final de la lnea, respectivamente, en cuyo caso, obviamente, no hace falta especificar el punto.
#333),

El siguiente ejemplo creara un degradado entre tres tonos de gris, de la esquina superior derecha a la inferior izquierda. Podis ver el resultado un poco ms abajo, si utilizis Safari o Chrome.
view plain copy to clipboard print ?

01. 02. 03. 04. 05. 06. 07. 08.

backgroundimage:webkitgradient( linear, right top, left bottom, colorstop(0.1, #88857D), colorstop(0.3, #999), colorstop(0.9, #CCC) );

Los degradados radiales toman la siguiente forma:

view plain copy to clipboard print ?

01.

webkitgradient(radial, centro_interno, radio_interno, centro_externo, radio_externo, parada[, parada]+)

centro_interno es el centro del crculo interno del degradado, mientras que centro_externo lo es del crculo externo. Se pueden utilizar las palabras clave left, center y right para designar la componente horizontal, y top, center y bottom para la componente vertical. Tambin podemos usar porcentajes.

Por otro lado, radio_interno y radio_externo, como sus nombres indican, son los radios de estos dos crculos. Por ltimo tenemos una serie de paradas, que funcionan de forma similar a los degradados lineales. Al utilizar la siguiente propiedad, por ejemplo:
view plain copy to clipboard print ?

01. 02. 03. 04. 05. 06. 07. 08. 09. 10.

backgroundimage:webkitgradient( radial, center center, 0, 50% 50%, 90, colorstop(0.1, #888), colorstop(0.3, #999), colorstop(0.9, #CCC) );

el bloque tomara el siguiente aspecto:

2 de 8

26/01/2012 20:55

Degradados con CSS

http://mundogeek.net/archivos/2011/04/04/degradados-con-css/

Safari 5.1+, Chrome 10+, Firefox 3.6+ y Opera 11.10+

Segn el borrador de la W3C el degradado lineal se crear de esta forma:
view plain copy to clipboard print ?

01.

lineargradient([direccin,]?

parada[, parada]+);

O si queremos que el degradado se repita varias veces, hasta el final del bloque:
view plain copy to clipboard print ?

01.

repeatinglineargradient([direccin,]? parada[, parada]+);

El primer valor, opcional, es la direccin del gradiente. Este se puede especificar mediante un ngulo (0deg, 90deg, 200deg, ) o con un punto, siendo la direccin en este caso la lnea que pasa por dicho punto y por el centro del elemento. Para especificar el punto se pueden utilizar las palabras clave left, center y right para la componente horizontal, y top, center y bottom para la componente vertical. En caso de no indicarse la direccin del gradiente, se utiliza top como valor por defecto, es decir, el gradiente ira de arriba a abajo en lnea recta. A continuacin tenemos las paradas, compuestas por los colores, y, opcionalmente, la posicin en la lnea en la que se situar dicho color. Las siguientes propiedades, por ejemplo, crearan un degradado entre dos tonos rojos en un ngulo de 170, situndose el primero de los tonos a 30px del inicio de la recta y el segundo a 50px:
view plain copy to clipboard print ?

01. 02. 03.

backgroundimage:mozlineargradient(170deg, #E04141 30px, #CD2727 50px); backgroundimage:webkitlineargradient(170deg, #E04141 30px, #CD2727 50px); backgroundimage:olineargradient(170deg, #E04141 30px, #CD2727 50px);

Para los degradados radiales se utiliza la siguiente sintaxis:

view plain copy to clipboard print ?

01. 02. 03. 04. 05.

radialgradient( [centro,]? [externo,]? parada[, parada]+ )

El primer valor, opcional, es el centro del crculo interior en el que comienza el degradado. Si se omite, el valor por defecto es center. El segundo valor, tambin opcional, define la circunferencia externa. Se indica primero la forma, usando las palabras clave circle (crculo, radio constante) o ellipse (elipse, radio vertical y horizontal), y a continuacin el tamao, usando las palabras clave:
closest-side: la figura externa toca el borde/s ms cercano al centro del bloque closest-corner: la figura externa toca la esquina/s ms cercana al centro del bloque farthest-side: la figura externa toca el borde/s ms alejado del centro del bloque farthest-corner: la figura externa toca la esquina/s ms alejada del centro del bloque contain: sinnimo de closest-side cover: sinnimo de farthest-corner

Por ltimo, se indican una o ms paradas en la misma forma que los degradados lineales. El siguiente ejemplo crea un degradado radial de rosa a rojo en la esquina superior izquierda:
view plain copy to clipboard print ?

01. 02. 03.

backgroundimage:mozradialgradient(20px 20px, circle farthestside, pink 0%, red 90%); backgroundimage:webkitradialgradient(20px 20px, circle farthestside, pink 0%, red 90%); backgroundimage:oradialgradient(20px 20px, circle farthestside, pink 0%, red 90%);

Internet Explorer 5.5+

Internet Explorer, como dijimos, tambin permite crear degradados, aunque para ello tendremos que hacer uso de su filtro progid:DXImageTransform.Microsoft.gradient. Su uso es bastante sencillo, por lo simple de su funcionalidad. Slo hay que indicar el valor del color de inicio (startColorstr) y el de fin (endColorstr), de la siguiente forma:
view plain copy to clipboard print ?

01.

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#8AAD28, endColorstr=#EEEFB1);

3 de 8

26/01/2012 20:55

Degradados con CSS

http://mundogeek.net/archivos/2011/04/04/degradados-con-css/

Start Your Online Store Customers trust Shopify to power stores that sell millions. youtube.com/shopify
Anuncios Google

Etiquetas: css, degradados, estandares, firefox, google chrome, gradientes, internet-explorer, navegadores, opera, safari, w3c Comentarios

1.

Genoskill que persona en su sano juicio con conocimientos de programacion usaria la basura de IE
Responder

Zootropo Bueno, IE 9 no es tan malo. No me extraara nada que hubiera personas con conocimientos avanzados que lo usaran. Pero s, hay alternativas mejores.
Responder

Luis El problema no es el sano juicio del tcnico, el problema son los usosaurios
Responder

InikaDesign Concuerdo con Luis, como la mayoria de las compaias utilizan windows por ende la gran mayoria de los usuarios utilizan IE, hay otras alternativas, pero como proveedores muchas veces debemos ajustarnos a lo que utilizan nuestros clientes.
Responder

TeKNo dUKe Es simple el cliente no sabe por eso contrata a un tcnico, quien no sabe, no debe tener derecho a opinar. Que luego los informticos sean todos unos arrastrados y terminen montando webs para que funcionen slo en IE6 porque el cliente se lo pide es historia aparte.
Responder

vladimir prieto un peln mal redactado/enredado lo que plantea @TeKNo dUKe, pero creo que por ah va el tema de fondo. somos nosotros, los entendidos en la materia, quienes debemos guiar a los usuarios. ellos se dejan guiar.

KRM El problema es que el usuario no pide en realidad detalles tcnicos, te pide resultados, y el resultado que espera es que sus usuarios puedan acceder al servicio.

4 de 8

26/01/2012 20:55

Degradados con CSS

http://mundogeek.net/archivos/2011/04/04/degradados-con-css/

anrose Cuando se crea una pagina web se hace de forma que se vea en todos los navegadores igual. No puedes hacer una web que cuando se abra con IE se vea muy fea, con firefox se vea muy pequea, pero con chrome se vea bien. Las webs se hacen para que la vean diferentes usuarios con cualquier navegador. Si lo que quieres es una web para verla solo tu, entonces hazla como tu quieras

2.

Zootropo Por cierto, Opera 11.10 est en beta todava, para los que sepan muy bien cmo andan los noruegos.
Responder

3.

Silverdisc Ya decia yo, pensaba que tenia la 11.10, y en realidad tengo la 11.01. Ya iba a trollear un poco con mi indignacin si no me llego a fijar xD
Responder

4.

DoctorPC Nada como colocar una imagen en vez del chorizo de CSS para la degradacin (Yo uso Explorer, aguante Explorer!)
Responder

Annimo Eso supone una peticin http ms y es mucho menos mantenible

Responder

Annimo Qu tal usar sprites?

Responder

IPannima Obvious troll is obvious

Responder

5.

Pejeno Por fortuna la cuota de mercado de IE no hace ms que descender. Aqui en Mxico he visto como personas que usaban el IE por borreguera ahora usan Firefox o Chrome (especialmente el ltimo, por alguna razn). Los beneficiados son los desarrolladores.
Responder

6.

el-vividor No se ustedes, pero yo desde que aparecio el Chrome me parecio el mejor ante todos, es sencillo, rapido y no pesa mucho como los el Firefox ni el Explorer.
Responder

anonimus Chrome es para el usuario final, por lo simple, pero Mozilla es de lejos para la mesa de trabajo de un desarrollador
Responder

7.

Betamina Cuando tenga un poco de tiempo voy a empezar a leer sobre CSS
Responder

8.

falin

5 de 8

26/01/2012 20:55

Degradados con CSS

http://mundogeek.net/archivos/2011/04/04/degradados-con-css/

Magnfico aporte. Estoy descubriendo CSS en un proyecto web en el que estoy metido y me ha encantado. Enhorabuena! PD: Cuando este montado ya lo mostrar
Responder

9.

charlie IE9 trabaja directamente con el sistema operativo, le bajo el sombrero a windows por esto. en la administracion de los recurso es muy bueno. y mucho mas velos que firefox
Responder

anonimus por eso te menten virus por esa coladera

Responder

10.

GerweX Segn Dortorpc es mejor usar una imagen que dicho cdigo para crear un degradado. La idea de sto es que un cdigo carga ms rpido que una imagen, por eso es mejor realizar un degradado con CSS, la nica desventaja es se no funciona con IE.
Responder

11.

omaro Me da risa muchos de ustedes, se creen informticos y son unos cerrados de mente. Hay que saber manejar todas las tecnologas. Me parece que es pattico que tu pgina funcione en el explorador que t quieras. Hay que saber trabajar en todos los exploradores, que no puedan significa que carecen de los conocimientos para hacerlo. Si es que son informticos de verdad tienen que trabajar con todas las tecnologas de la misma forma.
Responder

anonimus Tu lo has dicho tecnologas, yo te pregunto desde cuando IE lo ha sido, este explorador en el mundo de la tecnologa es como un producto chino
Responder

12.

jeus empleo Hola, para ie9 solamente se agrega en la hoja de estilos el filter? o donde va? Saludos
Responder

13.

Andres | Super Afiliados X El problema con las imagenes, si la intencin es de colocarlas de fondo, es que toca disearlas en principio de acuerdo al tamao final que uno quiere que tome en el sitio, pues de lo contrario se van a crear mosaicos que van a daar la presentacin de la pgina.
Responder

Kesymaru Si eso es un echo, si necesitas aplicar un degradado de color a diferentes paginas, tablas y otros con diferentes anchuras y alturas lo mejor es el css, ademas de ser mucho mas rapido nos permite un usu mas generico, algo que en imagenes significaria crear barias y ajustarlas al tamao requerido.
Responder

14.

Kesymaru Una agregado, para internet explorer ese codigo no funciona bien, pero no es cualpa del programador sino del browser que nunca busca la compatibilidad clasico de M$ por otro lado creo que el codigo le falta algo al final GradientType=0, quedaria asi: filter:progid:DXImageTransform.Microsoft.gradient(startColorStr=#92D050, EndColorStr=#ffffff, GradientType=0 );

6 de 8

26/01/2012 20:55

Degradados con CSS

http://mundogeek.net/archivos/2011/04/04/degradados-con-css/

Responder

Deja un comentario
Nombre email (no se mostrar) Tu web (opcional)

EMV Newline GmbH Vertrieb von EMV Komponenten und EMV Dienstleistungen
www.emv-newline.de

Mozart Concerts Vienna In Musikverein, Opera, Konzerthaus. Quick and Secure Booking. No Fees!
www.viennaconcerts.com

Hotel zum Lwen Freiburg Lehen Tel: +49 (0)761 / 84661

www.hotel-zum-loewen-frei

Aqua Ultraviolet Want Clear, Healthy, Clean Water? Try The Leader In UV and Filtration
www.aquaultraviolet.com/

Hoteles Baratos Encuentra Ofertas y Opiniones de Villa Huinid Resort & Spa!
TripAdvisor.es/Hoteles

Mundo geek es una web escrita por Ral Gonzlez Duque, dedicada principalmente a las nuevas tecnologas y la informtica.

Mundo geek en
Facebook Me gusta A 3,989 personas les gusta Mundo geek.

Juan Anthony Tania Plug-in social de Facebook

Archivos Acerca Contacto Traducciones Wiki

7 de 8

26/01/2012 20:55

Degradados con CSS

http://mundogeek.net/archivos/2011/04/04/degradados-con-css/

Aviso legal

8 de 8

26/01/2012 20:55