El CSS3 nos permite agregar varios fondos en una misma etiqueta,; esto lo hacemos separándolos por comas; por ejemplo:
.demo {
background-color: #FFF;
background-image: url(IMAGEN1),url(IMAGEN2);
background-repeat: no-repeat;
background-position: left top, right bottom;
}Como las gradientes son fondos, nada impide que las combinemos con otras imágenes:
.demo {
background-color: #FFF;
background-image: url(IMAGEN), -moz-linear-gradient(#FFF, #000);
background-image: url(IMAGEN), -webkit-linear-gradient(#FFF, #000);
background-image: url(IMAGEN), -o-linear-gradient(#FFF, #000);
background-image: url(IMAGEN), -ms-linear-gradient(#FFF, #000);
background-repeat: no-repeat;
background-position: right bottom, left top;
}Del mismo modo, podemos combinar varios tipos de gradientes, separándolas con comas:
background-image: linear-gradient(#000,#ABC,transparent), linear-gradient(right,#880, #234); background-image: linear-gradient(#000000, #CBA, transparent), radial-gradient(#FF0, #F00,transparent); background-image: linear-gradient(transparent, #000000, #ACA), linear-gradient(right, #DFD, #080)
8 comentarios:
Súper bueno el CSS3.
Buena entrada.
Saludos.
Me encantó :D
JMIUR Fiel a su estilo , como siempre, excelente.
Genial, está bien agrupar esta serie de entradas sobre gradientes porque son muchas y variadas :)
Por cierto se dice gradient o gradientes? tengo la duda y es un buen momento.
Que bueno, estoy probando y salen cosas realmente extraordinarias.
Gracias como siempre por el trabajo.
Muchas gracias! no sabía que se podían combinar! me las estaba viendo y deseando para combinar una imagen y un degradado :S
no lo entiendo =/..
hay que adivinar para los que no manejan bien blogger, algunos procesos para lograrlo...
como lo inserto? en que lugar de la plantilla? copio y pego
.demo {
background-color: #FFF;
background-image: url(IMAGEN1),url(IMAGEN2);
background-repeat: no-repeat;
background-position: left top, right bottom;
}
remplaso los link de imagen 1 y 2 y listo?
?????
Es divertido para jugar un rato.
Gem@:
gradient es en ingés, gradiente en spanish :D
amovi:
Esto nada tiene que ver con Blogger, el CSS es la forma de establecer estilos en cualquier pagina web y no hay nada que copiar y pegar. Las reglas de estilo se colocan entre etiquetas <style> y </style> ya sea en la plantilla, en un post o donde quieras.
¿Quiere dejar un comentario?
recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...
Nota: sólo los miembros de este blog pueden publicar comentarios.
Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.
Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...