Degradados Con CSS

0 Twittear 15

Degradados con CSS

Aunque se trata de una característica experimental, sujeta a posibles cambios en el futuro, los navegadores más populares del mercado ya permiten hoyen 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 degradadosutilizando CSS, a principios de 2008. Su implementación, disponible para Safari 4 y superiores y Google Chrome 1 y superiores, soportaba degradadoslineales y radiales utilizando las sintaxis:

view plain copy to clipboard print ?

‐webkit‐gradient(linear, punto_inicio, punto_fin, parada[, parada]+) 01.

‐webkit‐gradient(radial, centro_interno, radio_interno, centro_externo, radio_externo, parada[, parada]+) 02.

Desde Mozilla se comenzó entonces a implementar una sintaxis similar a la de Webkit, ampliada, que se vería abandonada al poco tiempo, cuando laW3C 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 unaimplementació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 linealradial-gradient(): para crear un degradado radialrepeating-linear-gradient(): para crear un degradado lineal que se va repitiendo hasta el final del bloquerepeating-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 razonesde compatibilidad. Opera también se ha sumado a su implementación, introduciendo estas funciones en la versión 11.10 del navegador. Webkit y Operautilizan, 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, porlo 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 losnavegadores más populares, podríamos hacer lo siguiente:


.degradado { 01.

/* Color alternativo para versiones que no soporten degradados */ 02.

background‐color:#2B93D2; 03.

04.

/* Safari 4+ y Chrome 1+ */ 05.

background‐image:‐webkit‐gradient(linear, left top, left bottom, color‐stop(0, #2B93D2), color‐stop(1, #77BCE6)); 06.

07.

/* Safari 5.1+ y Chrome 10+ */ 08.

background‐image:‐webkit‐linear‐gradient(#2B93D2, #77BCE6); 09.

10.

/* Firefox 3.6+ */ 11.

background‐image:‐moz‐linear‐gradient(top, #2B93D2, #77BCE6); 12.

13.

/* Opera 11.10+ */ 14.

background‐image:‐o‐linear‐gradient(top, #2B93D2, #77BCE6); 15.

16.

/* Internet Explorer 5.5+ */ 17.

filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#2B93D2', EndColorStr='#77BCE6'); 18.

} 19.

Shopify Helps You SellSee how Shopify simplifiedEcommerce for Charleston Biscuitsyoutube.com/shopify

Anuncios Google

7Recomendar

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

1 de 8 26/01/2012 20:55

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:


‐webkit‐gradient(linear, punto_inicio, punto_fin, parada[, parada]+) 01.

punto_inicio y punto_fin definen una recta que es la dirección en la que se aplicará el gradiente. Con left top como punto de inicio y rightbottom como punto de fin, por ejemplo, el degradado se aplicará de la esquina 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 línea. El valor color-stop(0.5,#333), indicaría que queremos un gris oscuro en la mitad del degradado. También se puede utilizar from() y to() para indicar el color al inicio y al finalde la línea, respectivamente, en cuyo caso, obviamente, no hace falta especificar el punto.

El siguiente ejemplo crearía un degradado entre tres tonos de gris, de la esquina superior derecha a la inferior izquierda. Podéis ver el resultado un pocomás abajo, si utilizáis Safari o Chrome.


background‐image:‐webkit‐gradient( 01.

linear, 02.

right top, 03.

left bottom, 04.

color‐stop(0.1, #88857D), 05.

color‐stop(0.3, #999), 06.

color‐stop(0.9, #CCC) 07.

); 08.

Los degradados radiales toman la siguiente forma:


‐webkit‐gradient(radial, centro_interno, radio_interno, centro_externo, radio_externo, parada[, parada]+) 01.

centro_interno es el centro del círculo interno del degradado, mientras que centro_externo lo es del círculo externo. Se pueden utilizar las palabrasclave left, center y right para designar la componente horizontal, y top, center y bottom para la componente vertical. También podemos usarporcentajes.

Por otro lado, radio_interno y radio_externo, como sus nombres indican, son los radios de estos dos círculos.

Por último tenemos una serie de paradas, que funcionan de forma similar a los degradados lineales.

Al utilizar la siguiente propiedad, por ejemplo:


background‐image:‐webkit‐gradient( 01.

radial, 02.

center center, 03.

0, 04.

50% 50%, 05.

90, 06.

color‐stop(0.1, #888), 07.

color‐stop(0.3, #999), 08.

color‐stop(0.9, #CCC) 09.

); 10.

el bloque tomaría el siguiente aspecto:


2 de 8 26/01/2012 20:55

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

Según el borrador de la W3C el degradado lineal se creará de esta forma:


linear‐gradient([dirección,]? parada[, parada]+); 01.

O si queremos que el degradado se repita varias veces, hasta el final del bloque:


repeating‐linear‐gradient([dirección,]? parada[, parada]+); 01.

El primer valor, opcional, es la dirección del gradiente. Este se puede especificar mediante un ángulo (0deg, 90deg, 200deg, …) o con un punto, siendola dirección en este caso la línea que pasa por dicho punto y por el centro del elemento. Para especificar el punto se pueden utilizar las palabras claveleft, center y right para la componente horizontal, y top, center y bottom para la componente vertical. En caso de no indicarse la dirección delgradiente, se utiliza top como valor por defecto, es decir, el gradiente iría de arriba a abajo en línea recta.

A continuación tenemos las paradas, compuestas por los colores, y, opcionalmente, la posición en la línea en la que se situará dicho color.

Las siguientes propiedades, por ejemplo, crearían un degradado entre dos tonos rojos en un ángulo de 170º, situándose el primero de los tonos a 30px delinicio de la recta y el segundo a 50px:


background‐image:‐moz‐linear‐gradient(170deg, #E04141 30px, #CD2727 50px); 01.

background‐image:‐webkit‐linear‐gradient(170deg, #E04141 30px, #CD2727 50px); 02.

background‐image:‐o‐linear‐gradient(170deg, #E04141 30px, #CD2727 50px); 03.

Para los degradados radiales se utiliza la siguiente sintaxis:


radial‐gradient( 01.

[centro,]? 02.

[externo,]? 03.

parada[, parada]+ 04.

) 05.

El primer valor, opcional, es el centro del círculo interior en el que comienza el degradado. Si se omite, el valor por defecto es center.

El segundo valor, también opcional, define la circunferencia externa. Se indica primero la forma, usando las palabras clave circle (círculo, radioconstante) o ellipse (elipse, radio vertical y horizontal), y a continuación el tamaño, usando las palabras clave:

closest-side: la figura externa toca el borde/s más cercano al centro del bloqueclosest-corner: la figura externa toca la esquina/s más cercana al centro del bloquefarthest-side: la figura externa toca el borde/s más alejado del centro del bloquefarthest-corner: la figura externa toca la esquina/s más alejada del centro del bloquecontain: sinónimo de closest-sidecover: sinónimo de farthest-corner

Por último, se indican una o más 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:


background‐image:‐moz‐radial‐gradient(20px 20px, circle farthest‐side, pink 0%, red 90%); 01.

background‐image:‐webkit‐radial‐gradient(20px 20px, circle farthest‐side, pink 0%, red 90%); 02.

background‐image:‐o‐radial‐gradient(20px 20px, circle farthest‐side, pink 0%, red 90%); 03.

Internet Explorer 5.5+

Internet Explorer, como dijimos, también permite crear degradados, aunque para ello tendremos que hacer uso de su filtroprogid:DXImageTransform.Microsoft.gradient. Su uso es bastante sencillo, por lo simple de su funcionalidad. Sólo hay que indicar el valor delcolor de inicio (startColorstr) y el de fin (endColorstr), de la siguiente forma:


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


3 de 8 26/01/2012 20:55

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

Genoskill

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

Responder

1.

Zootropo

Bueno, IE 9 no es tan malo. No me extrañaría 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 técnico, el problema son los usosaurios

Responder

InikaDesign

Concuerdo con Luis, como la mayoria de las compañias utilizan windows… por ende la gran mayoria de los usuarios utilizan IE, hayotras 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 técnico, quien no sabe, no debe tener derecho a opinar. Que luego losinformáticos sean todos unos arrastrados y terminen montando webs para que funcionen sólo en IE6 porque el cliente se lo pidees historia aparte.

Responder

vladimir prieto

un pelín 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 técnicos, te pide resultados, y el resultado que espera es que sususuarios puedan acceder al servicio.

Start Your Online StoreCustomers trust Shopify to powerstores that sell millions.youtube.com/shopify

Anuncios Google


4 de 8 26/01/2012 20:55

anrose

Cuando se crea una pagina web se hace de forma que se vea en todos los navegadores igual. No puedes hacer una webque cuando se abra con IE se vea muy fea, con firefox se vea muy pequeña, 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 verlasolo tu, entonces hazla como tu quieras…

Zootropo

Por cierto, Opera 11.10 está en beta todavía, para los que sepan muy bien cómo andan los noruegos.

Responder

2.

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 indignación si no me llego a fijar xD

Responder

3.

DoctorPC

Nada como colocar una imagen en vez del chorizo de CSS para la degradación…(Yo uso Explorer, aguante Explorer!)

Responder

4.

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

Pejeno

Por fortuna la cuota de mercado de IE no hace más que descender. Aqui en México he visto como personas que usaban el IE por borreguera ahorausan Firefox o Chrome (especialmente el último, por alguna razón). Los beneficiados son los desarrolladores.

Responder

5.

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 elExplorer.

Responder

6.

anonimus

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

Responder

Betamina

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

Responder

7.

falin8.


5 de 8 26/01/2012 20:55

Magnífico 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

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. ymucho mas velos que firefox

Responder

9.

anonimus

por eso te menten virus por esa coladera

Responder

GerweX

Según Dortorpc es mejor usar una imagen que dicho código para crear un degradado.La idea de ésto es que un código carga más rápido que una imagen, por eso es mejor realizar un degradado con CSS, la única desventaja es se nofunciona con IE.

Responder

10.

omaro

Me da risa muchos de ustedes, se creen informáticos y son unos cerrados de mente. Hay que saber manejar todas las tecnologías. Me parece quees patético que tu página funcione en el explorador que tú quieras. Hay que saber trabajar en todos los exploradores, que no puedan significa quecarecen de los conocimientos para hacerlo.Si es que son informáticos de verdad tienen que trabajar con todas las tecnologías de la misma forma.

Responder

11.

anonimus

Tu lo has dicho tecnologías, yo te pregunto desde cuando IE lo ha sido, este explorador en el mundo de la tecnología es como un productochino

Responder

jeus empleo

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

Saludos

Responder

12.

Andres | Super Afiliados X

El problema con las imagenes, si la intención es de colocarlas de fondo, es que toca diseñarlas en principio de acuerdo al tamaño final que unoquiere que tome en el sitio, pues de lo contrario se van a crear mosaicos que van a dañar la presentación de la página.

Responder

13.

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 esel css, ademas de ser mucho mas rapido nos permite un usu mas generico, algo que en imagenes significaria crear barias y ajustarlas altamaño requerido.

Responder

Kesymaru

Una agregado, para internet explorer ese codigo no funciona bien, pero no es cualpa del programador sino del browser que nunca busca lacompatibilidad 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 );

14.


6 de 8 26/01/2012 20:55

Responder

Deja un comentario

Nombre

email (no se mostrará)

Tu web (opcional)

Mundo geek es una web escrita por Raúl González Duque, dedicada principalmente a las nuevas tecnologías y la informática.

Juan Anthony Tania

Mundo geek en

Facebook

A 3,989 personas les gusta

Mundo geek.

Me gusta

Plug-in social de Facebook

ArchivosAcercaContactoTraduccionesWiki

EMV Newline

GmbHVertrieb von EMVKomponenten undEMV Dienstleistungenwww.emv-newline.de

Mozart Concerts

ViennaIn Musikverein,Opera, Konzerthaus.Quick and SecureBooking. No Fees!www.viennaconcerts.com

Hotel zum LöwenFreiburg Lehen Tel:+49 (0)761 / 84661www.hotel-zum-loewen-frei

Aqua UltravioletWant Clear, Healthy,Clean Water? Try TheLeader In UV andFiltrationwww.aquaultraviolet.com/

Hoteles Baratos¡Encuentra Ofertas yOpiniones de VillaHuinid Resort & Spa!TripAdvisor.es/Hoteles

…


7 de 8 26/01/2012 20:55

Aviso legal


8 de 8 26/01/2012 20:55

Degradados Con CSS

Documents

Transcript of Degradados Con CSS