Backgrounds múltiples en CSS3 y un truco gradual
Con CSS3 el soporte a múltiple background nos permite ser mucho más creativos al momento de solucionar problemas de estilos, cuando antes sólo dependíamos de crear y anidar etiquetas y cortar esos gif’s y png’s que tanto nos han atormentado.
La sintaxis para fondos múltiples es bastante intuitiva:
background: url(…) top left no-repeat, url(…) right bottom no-repeat;Su soporte -a la fecha según caniuse.com- es favorable para los browsers modernos. Para los que no lo soporten esta declaración será totalmente ignorada, por lo que mi recomendación es que primero definas un background como fallback y luego escribas los múltiples que necesites.
Fondos con gradientes
Como algunos ya podrán haber probado, con CSS3 podemos crear gradientes (lineales o radiales) y tratarlos directamente como imágenes. Su soporte también ya está ampliado y la sintaxis es familiar:
background-image: -webkit-gradient(linear, 0 top, 0 bottom, from(#f00), to(#f60));Aunque no se han puesto de acuerdo con normalizarla, así es para Firefox:
background-image: -moz-linear-gradient(90deg, #f00, #f60);El truco
Necesitaba unir en el fondo del <body> un patrón como imagen en png, con un fondo gradiente radial. Lo que se haría antes sería el fondo gigantesco ya con el gradiente y el patrón, el cual pesaría muchos kilos y lo pondría como fondo del <body> (quizás con el fondo al 100%), pero ahora la cosa cambió. Como el gradiente para CSS es una imagen, podemos utilizarlo como un background-image más. El código quedó de la siguiente manera:
background-color: #141414;
background-image: url('pattern.png');
background-image: url('pattern.png'), -webkit-gradient(linear, 50% 50%, 0, 50% 50%, 500, from(#f00), to(#300));
background-image: url('pattern.png'), -webkit-linear-gradient(#f00, #300);
background-image: url('pattern.png'), -moz-linear-gradient(#f00, #300);
background-image: url('pattern.png'), -ms-linear-gradient(r#f00, #300);
background-image: url('pattern.png'), -o-linear-gradient(#f00, #300);
background-image: url('pattern.png'), linear-gradient(#f00, #300);Links:
Sobre el Autor: Jorge Epuñan
Soy quien escribe en este sitio: diseñador gráfico de profesión, desarrollador web por preferencia y amante de la interacción humano-computador. Cuando no pienso en web, salgo a trotar por mis barrios en Santiago, Chile o me junto con amigos a un bar a conversar sobre nuevas tendencias y tecnologías. Twitter profesional y personal, además del Contacto.
inyaka
04 / Julio / 2012
Jorge Epuñan
05 / Julio / 2012
Desarrollador Web Freelance
30 / Julio / 2012