JMiur [E]

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:

Indeziisoow  

Súper bueno el CSS3.
Buena entrada.

Saludos.

Responder
Graciela  

Me encantó :D

Responder
Hor@cio  

JMIUR Fiel a su estilo , como siempre, excelente.

Responder
Gem@  

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.

Responder
Adrián J. Messina  

Que bueno, estoy probando y salen cosas realmente extraordinarias.
Gracias como siempre por el trabajo.

Responder
Alejandro  

Muchas gracias! no sabía que se podían combinar! me las estaba viendo y deseando para combinar una imagen y un degradado :S

Responder
amovi  

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?

?????

Responder
JMiur  

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.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

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

 
CERRAR