You are on page 1of 8

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

0

Twittear

15

Recomendar

7

Aunque se trata de una característica experimental, sujeta a posibles cambios en el futuro, los navegadores más populares del mercado ya permiten hoy en día, en sus últimas versiones, la creación de fondos con degradados o gradientes sin necesidad de usar imágenes, utilizando exclusivamente CSS. Esto, cómo no, a excepción 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 creación de degradados utilizando CSS, a principios de 2008. Su implementación, 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.

‐webkit‐gradient(linear, punto_inicio, punto_fin, parada[, parada]+) ‐webkit‐gradient(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 vería 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 creación de degradados, a las que Mozilla añade el prefijo -moz-, por tratarse de una implementación propietaria de una característica 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 año 2011, Webkit (Safari 5.1 y Google Chrome 10) adoptó también estas funciones, aunque manteniendo las anteriores por razones de compatibilidad. Opera también se ha sumado a su implementación, introduciendo estas funciones en la versión 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 versión 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 más populares, podríamos 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 */ background‐color:#2B93D2; /* Safari 4+ y Chrome 1+ */ background‐image:‐webkit‐gradient(linear, left top, left bottom, color‐stop(0, #2B93D2), color‐stop(1, #77BCE6)); /* Safari 5.1+ y Chrome 10+ */ background‐image:‐webkit‐linear‐gradient(#2B93D2, #77BCE6); /* Firefox 3.6+ */ background‐image:‐moz‐linear‐gradient(top, #2B93D2, #77BCE6); /* Opera 11.10+ */ background‐image:‐o‐linear‐gradient(top, #2B93D2, #77BCE6); /* Internet Explorer 5.5+ */ filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#2B93D2', EndColorStr='#77BCE6'); }

1 de 8

26/01/2012 20:55

04. Por otro lado. 06. view plain copy to clipboard print ? 01. background‐image:‐webkit‐gradient( radial. Los degradados radiales toman la siguiente forma: view plain copy to clipboard print ? 01.3. indicaría que queremos un gris oscuro en la mitad del degradado. color‐stop(0. que funcionan de forma similar a los degradados lineales. Por último tenemos una serie de paradas. 0. 02. ‐webkit‐gradient(linear. son los radios de estos dos círculos. Al utilizar la siguiente propiedad. El valor color-stop(0. 08. 05. 06. color‐stop(0. #999). y top. center y bottom para la componente vertical. 10. color‐stop(0. si utilizáis Safari o Chrome.Degradados con CSS http://mundogeek. punto_fin. 90. en cuyo caso. radio_interno. El siguiente ejemplo crearía un degradado entre tres tonos de gris. parada]+) punto_inicio y punto_fin definen una recta que es la dirección en la que se bottom como punto de fin. parada]+) centro_interno es el centro del círculo interno del degradado. centro_interno. También podemos usar porcentajes. radio_externo. 50% 50%. center y right para designar la componente horizontal. 07. radio_interno y radio_externo. punto_inicio. Se pueden utilizar las palabras clave left. Los degradados lineales se crean de la siguiente manera: view plain copy to clipboard print ? 01. color‐stop(0. 05.9. Safari 4+ y Chrome 1+ Empecemos por la antigua sintaxis de Webkit. respectivamente. por ejemplo. mientras que centro_externo lo es del círculo externo. right top. parada[. Podéis ver el resultado un poco más abajo. Las “paradas” son funciones color-stop() que indican el color que tomará el degradado en un cierto punto de la línea. También se puede utilizar from() y to() para indicar el color al inicio y al final de la línea. 03. 03. 02.1. 09. no hace falta especificar el punto. por ejemplo: view plain copy to clipboard print ? 01. el bloque tomaría el siguiente aspecto: 2 de 8 26/01/2012 20:55 .1.3. background‐image:‐webkit‐gradient( linear.5. 08. el degradado se aplicará de la esquina aplicará el gradiente. left bottom. color‐stop(0.9. 07. ‐webkit‐gradient(radial. #888). de la esquina superior derecha a la inferior izquierda. como sus nombres indican.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. color‐stop(0. #333). #999). #CCC) ). center center. #CCC) ). Con left top como punto de inicio y right superior izquierda a la inferior derecha. parada[. obviamente. 04. #88857D). centro_externo.

de la siguiente forma: view plain copy to clipboard print ? 01.Microsoft. endColorstr=#EEEFB1). El siguiente ejemplo crea un degradado radial de rosa a rojo en la esquina superior izquierda: view plain copy to clipboard print ? 01. opcionalmente. center y right para la componente horizontal. Chrome 10+. 3 de 8 26/01/2012 20:55 . usando las palabras clave: closest-side: la figura externa toca el borde/s más cercano al centro del bloque closest-corner: la figura externa toca la esquina/s más cercana al centro del bloque farthest-side: la figura externa toca el borde/s más alejado del centro del bloque farthest-corner: la figura externa toca la esquina/s más alejada del centro del bloque contain: sinónimo de closest-side cover: sinónimo de farthest-corner Por último. 200deg. se indican una o más paradas en la misma forma que los degradados lineales. …) o con un punto. y a continuación el tamaño. pink 0%. define la circunferencia externa. como dijimos. pink 0%. linear‐gradient([dirección. repeating‐linear‐gradient([dirección. 04.5+ Internet Explorer. center y bottom para la componente vertical. parada]+).]? parada[. Se indica primero la forma. red 90%). Sólo hay que indicar el valor del color de inicio (startColorstr) y el de fin (endColorstr).Degradados con CSS http://mundogeek. 90deg. #CD2727 50px). Este se puede especificar mediante un ángulo (0deg. Su uso es bastante sencillo.]? [externo. #E04141 30px. opcional. radio vertical y horizontal).gradient. Para los degradados radiales se utiliza la siguiente sintaxis: view plain copy to clipboard print ? 01. background‐image:‐o‐radial‐gradient(20px 20px.6+ y Opera 11.Microsoft. red 90%). En caso de no indicarse la dirección del gradiente.]? parada[. por ejemplo. crearían un degradado entre dos tonos rojos en un ángulo de 170º.net/archivos/2011/04/04/degradados-con-css/ Safari 5. 02. es el centro del círculo interior en el que comienza el degradado. usando las palabras clave circle (círculo. background‐image:‐moz‐radial‐gradient(20px 20px. 02. también permite crear degradados. siendo la dirección en este caso la línea que pasa por dicho punto y por el centro del elemento. radio constante) o ellipse (elipse. pink 0%. aunque para ello tendremos que hacer uso de su filtro progid:DXImageTransform. background‐image:‐webkit‐linear‐gradient(170deg. 03. es decir. circle farthest‐side. Firefox 3. 03. Si se omite. y top.10+ Según el borrador de la W3C el degradado lineal se creará de esta forma: view plain copy to clipboard print ? 01. red 90%). Para especificar el punto se pueden utilizar las palabras clave left. parada]+ ) El primer valor. y. la posición en la línea en la que se situará dicho color. Internet Explorer 5. el gradiente iría de arriba a abajo en línea recta. O si queremos que el degradado se repita varias veces. background‐image:‐webkit‐radial‐gradient(20px 20px. #CD2727 50px). #CD2727 50px). #E04141 30px. compuestas por los colores. circle farthest‐side.]? parada[. #E04141 30px. Las siguientes propiedades. filter:progid:DXImageTransform. también opcional. 03.1+. radial‐gradient( [centro. el valor por defecto es center. background‐image:‐o‐linear‐gradient(170deg. 02.gradient(startColorstr=#8AAD28. A continuación tenemos las paradas. por lo simple de su funcionalidad. es la dirección del gradiente. circle farthest‐side. background‐image:‐moz‐linear‐gradient(170deg. parada]+). situándose el primero de los tonos a 30px del inicio de la recta y el segundo a 50px: view plain copy to clipboard print ? 01. opcional. se utiliza top como valor por defecto. 05. hasta el final del bloque: view plain copy to clipboard print ? 01. El segundo valor. El primer valor.

Genoskill que persona en su sano juicio con conocimientos de programacion usaria la basura de IE Responder Zootropo Bueno. el problema son los usosaurios Responder InikaDesign Concuerdo con Luis. no debe tener derecho a opinar. internet-explorer. y el resultado que espera es que sus usuarios puedan acceder al servicio. hay alternativas mejores. pero como proveedores muchas veces debemos ajustarnos a lo que utilizan nuestros clientes. ellos se dejan guiar. youtube. Responder TeKNo dUKe Es simple el cliente no sabe por eso contrata a un técnico. No me extrañaría nada que hubiera personas con conocimientos avanzados que lo usaran. gradientes. quien no sabe. Pero sí. Que luego los informáticos sean todos unos arrastrados y terminen montando webs para que funcionen sólo en IE6 porque el cliente se lo pide es historia aparte. firefox. pero creo que por ahí va el tema de fondo. IE 9 no es tan malo. quienes debemos guiar a los usuarios. Responder vladimir prieto un pelín mal redactado/enredado lo que plantea @TeKNo dUKe. w3c Comentarios 1. estandares. hay otras alternativas. te pide resultados. degradados. safari. los entendidos en la materia. navegadores.com/shopify Anuncios Google Etiquetas: css.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. 4 de 8 26/01/2012 20:55 . opera. Responder Luis El problema no es el sano juicio del técnico. somos nosotros. KRM El problema es que el usuario no pide en realidad detalles técnicos. google chrome. como la mayoria de las compañias utilizan windows… por ende la gran mayoria de los usuarios utilizan IE.

pero Mozilla es de lejos para la mesa de trabajo de un desarrollador Responder 7. para los que sepan muy bien cómo andan los noruegos. y en realidad tengo la 11. Aqui en México he visto como personas que usaban el IE por borreguera ahora usan Firefox o Chrome (especialmente el último. es sencillo. rapido y no pesa mucho como los el Firefox ni el Explorer. Los beneficiados son los desarrolladores. con firefox se vea muy pequeña.10 está en beta todavía. Betamina Cuando tenga un poco de tiempo voy a empezar a leer sobre CSS Responder 8.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. Ya iba a trollear un poco con mi indignación si no me llego a fijar xD Responder 4. por alguna razón). Las webs se hacen para que la vean diferentes usuarios con cualquier navegador.Degradados con CSS http://mundogeek. entonces hazla como tu quieras… 2. Pejeno Por fortuna la cuota de mercado de IE no hace más que descender. Responder anonimus Chrome es para el usuario final. pero yo desde que aparecio el Chrome me parecio el mejor ante todos. por lo simple. Responder 3. Silverdisc Ya decia yo. Zootropo Por cierto.01…. DoctorPC Nada como colocar una imagen en vez del chorizo de CSS para la degradación… (Yo uso Explorer. Si lo que quieres es una web para verla solo tu. No puedes hacer una web que cuando se abra con IE se vea muy fea. Responder 6. falin 5 de 8 26/01/2012 20:55 . Opera 11. el-vividor No se ustedes.10. pensaba que tenia la 11. aguante Explorer!) Responder Anónimo Eso supone una petición http más y es mucho menos mantenible Responder Anónimo ¿Qué tal usar sprites? Responder IPanónima Obvious troll is obvious Responder 5. pero con chrome se vea bien.

y mucho mas velos que firefox Responder anonimus por eso te menten virus por esa coladera Responder 10. Enhorabuena! PD: Cuando este montado ya lo mostraré Responder 9. Responder 11. Hay que saber manejar todas las tecnologías. es que toca diseñarlas en principio de acuerdo al tamaño final que uno quiere que tome en el sitio. le bajo el sombrero a windows por esto. algo que en imagenes significaria crear barias y ajustarlas al tamaño requerido. charlie IE9 trabaja directamente con el sistema operativo. Andres | Super Afiliados X El problema con las imagenes. EndColorStr=’#ffffff’. si la intención es de colocarlas de fondo. se creen informáticos y son unos cerrados de mente. pues de lo contrario se van a crear mosaicos que van a dañar la presentación de la página. GradientType=0 ).Degradados con CSS http://mundogeek. Responder anonimus Tu lo has dicho tecnologías. Hay que saber trabajar en todos los exploradores. en la administracion de los recurso es muy bueno. omaro Me da risa muchos de ustedes.net/archivos/2011/04/04/degradados-con-css/ Magnífico aporte. 6 de 8 26/01/2012 20:55 . jeus empleo Hola. 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. Responder 14. por eso es mejor realizar un degradado con CSS. Si es que son informáticos de verdad tienen que trabajar con todas las tecnologías de la misma forma. Responder Kesymaru Si eso es un echo. para ie9 solamente se agrega en la hoja de estilos el filter? o donde va? Saludos Responder 13. tablas y otros con diferentes anchuras y alturas lo mejor es el css.Microsoft. para internet explorer ese codigo no funciona bien. Kesymaru Una agregado. yo te pregunto desde cuando IE lo ha sido. Estoy descubriendo CSS en un proyecto web en el que estoy metido y me ha encantado. Me parece que es patético que tu página funcione en el explorador que tú quieras. GerweX Según Dortorpc es mejor usar una imagen que dicho código para crear un degradado. ademas de ser mucho mas rapido nos permite un usu mas generico.gradient(startColorStr=’#92D050′. La idea de ésto es que un código carga más rápido que una imagen. la única desventaja es se no funciona con IE. que no puedan significa que carecen de los conocimientos para hacerlo. si necesitas aplicar un degradado de color a diferentes paginas. este explorador en el mundo de la tecnología es como un producto chino Responder 12.

hotel-zum-loewen-frei… Aqua Ultraviolet Want Clear. Konzerthaus.989 personas les gusta Mundo geek. dedicada principalmente a las nuevas tecnologías y la informática.de Mozart Concerts Vienna In Musikverein. Mundo geek en Facebook Me gusta A 3.com Hotel zum Löwen Freiburg Lehen Tel: +49 (0)761 / 84661 www.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. Healthy. Quick and Secure Booking. No Fees! www. Clean Water? Try The Leader In UV and Filtration www.aquaultraviolet.Degradados con CSS http://mundogeek.es/Hoteles Mundo geek es una web escrita por Raúl González Duque. Juan Anthony Tania Plug-in social de Facebook Archivos Acerca Contacto Traducciones Wiki 7 de 8 26/01/2012 20:55 .viennaconcerts. Opera.com/ Hoteles Baratos ¡Encuentra Ofertas y Opiniones de Villa Huinid Resort & Spa! TripAdvisor.emv-newline.

Degradados con CSS http://mundogeek.net/archivos/2011/04/04/degradados-con-css/ Aviso legal 8 de 8 26/01/2012 20:55 .