JMiur [E]

Otra de las novedades del CSS3 es la posibilidad de utilizar varias imágenes de fondo en un mismo elemento. Hasta ahora, cuando colocamos un fondo a una etiqueta, el rectángulo puede contener sólo una y eventualmente, un color alternativo. Por ejemplo, un DIV así:
<div style=" background: #303941 url(URL_imagen) no-repeat 50% 50%; height: 300px; width: 300px;"></div>
Nos mostrará esto:


Es decir, un rectángulo de cierto tamaño donde la imagen de fondo esta centrada y como es pequeña, no alcanza a cubrir ese área así que el resto se llena con el color alternativo. Si quisiéramos poner una segunda imagen de fondo, deberíamos agregar otro rectángulo encima:
<div style=" background: #303941 url(URL_imagen1) no-repeat left top; height: 300px; width: 300px;">
<div style="background: transparent url(URL_imagen2) no-repeat right bottom; height: 300px; width: 400px;"></div>
</div>

Una imagen se posiciona en el ángulo superior y otra en el ángulo inferior. Como en el DIV interno el color alterno se define como transparente, la segunda imagen se superpone a la primera.

Pero, la w3org propone simplificar esto y permitir que se coloquen varias imágenes en el mismo elemento. Para esto, es más cómodo separar la definición en partes; en lugar de:
background: color url(URL_imagen) repeat posicionX posicionY;
escribiremos cada una por separado: background-color, background-image, background-repeat y background-position; separando los datos con comas:
background-image: url(URL_imagen1), url(URL_imagen2);
background-position: left top, right bottom;
background-color: #303941;
background-repeat: no-repeat;
En la primera establecemos la dirección de dos imágenes distintas, en la segunda, la posición de cada una de ellas y en las dos última, como esas propiedades serán iguales para ambas, escribimos una sola.


Algunos críticos dicen que esto sólo aumentará el peso de as páginas pero, es una opinión que no tiene sustento ya que aún sin esta facilidad, nada impide agregar muchos fondos, esta posibilidad, sólo lo hace menos engorroso. También se dice que hay una limitación de ocho alternativas dadas por las combinaciones de left top right y bottom pero es un error, no está indicado si hay una limitación y la posición puede ser definida en pixeles así que es posible colocar un número indeterminado de fondos:

ejemplo con cuatro fondos desplazados

A diferencia de otras propiedades de CSS3, esta alternativa debe usarse con cuidado ya que sólo está disponible en las últimas versiones de Firefox, Safari y Google Chrome. En Internet Explorer, usar múltiples fondos es tomado como un error y por lo tanto, no se verá ninguna imagen así que no queda más remedio que utilizar alguna clase de hack alternativo.

Lo más simple sería aprovechar que IE pasa por alto determinados errores sintácticos en el CSS (aunque es muy estricto con otros). Los navegadores ignoran las propiedades que están definidas anteponiéndoles algún caracter extra; por ejemplo _background no será tomado en cuenta , no significará nada, ni siquiera se indicará un error pero Internet Explorer ignora ese caracter extra así que acepta la propiedad como si se hubeira escrito correctamente; de este modo, podríamos agregarlo al final de las definiciones anteriores de nuestro DIV para que, al menos, se vea algún fondo:
_background: #303941 url(URL_imagen) no-repeat 50% 50%;
Hay varias teorias respecto a qué carácter usar:

*background para IE7 y versiones inferiores
_background para IE6 y versiones inferiores
#background para todas las versiones

20 comentarios:

Dña. Urraca  

Me he debido de saltar algo o estoy perdiendo la memoria ¿has hablado del CSS3 en alguna otra entrada?

Responder
JMiur  

Si, en varias Doña Urraca: curvas, fondos, sombras. Y seguirán otras :D

Responder
Raúl Montero  

No se si será por el explorador, pero no puedo ver los 2 último ejemplos...

Responder
tragalágrimas  

Mola el css3. Da la sensación por los detalles que estás dejando ver poco a poco que puede dar mucho juego.
Gracias por compartirlos

Responder
Graciela  

No veo los ejemplos :(

Responder
Angel Luis Sanchez Iglesias  

Me pasa lo mismo que a Raul Montero no puedo ver los 2 últimos ejemplos. FireFox 3.5.7 para mas datos.

Responder
Gem@  

Explorer comete un error muy grande, si siguiera el ejemplo de otros navegadores yo creo que entonces ganaría muchos más usuarios de los que tiene y estaría en cabeza como explorador más utilizado.
Me ha gustado la información que das, con imágenes de fondo transparente puede conseguirse un estilo bonito de fondo.

Responder
Amador López Criado  

Tampoco yo puedo ver los dos últimos ejemplos. Ni con el Mozilla, ni con el Explorer. Saludos.

Responder
Emanuel  

JMiur en internet explorer no se bien la cosa y que es el IE8.
Dejo una imagen para que veas

http://img237.imageshack.us/img237/779/capturahg.jpg

en otro navegador se ve perfecto

Responder
HaCk CrAcK  

JMiur tengo una pregunta, yo estoy ultimamente trabajando en el blog manganimefull.blogspot.com y lo que hago es hacer post de anime y en cada post tienen links de descarga de capitulos, pero eso lo voy actualizando constantemente porq cada semana sale un nuevo capitulo, entonces ahora viene la pregunta ¿Como hago para que al actualizar ese post se mande al feed o que aparesca como si fuera nuevo? para que mis lectores sepan que hay un nuebo capitulo

Responder
Dña. Urraca  

Disculpa capitan me debo de estar ancianizando :(

Responder
El Filómata  

JMiur, hola. estoy probando colocar mis archivos tipo calendario con las instrucciones de su blog (http://goo.gl/mgRU) en mi blog de pruebas (http://probations.blogspot.com/)
Resultados: La imágen lo dice todo. Modifique el HTML de dias al español y el resto de las variables "carregando..." y "Ver Posts em Arquivos "
Si bien no tengo publicaciones, queda tildado en carregando.
Preguntas: La modificación del idioma que hice es correcta? ¿los cuadros de los dias (fecha) se adaptan al tamaño de la fuente? ¿Debe insertar en alguna parte la url de mi,blog.
Obvio, me guío por el modelo de su post tratando de llegar al de egoblogo.
Gracias JMiur.
Voy a levantar en mi blog (EL Club de los Filomatas) su post sobre Haiti. Impresionante.
Abrazo

Responder
JMiur  

Tal como dice la entrada, los dos últimos ejemplos no se verán en ninguna versión de Internet Explorer y tampoco en versiones de Firefox inferiores a la 3.6 que es la versión actual.

HaCk CrAcK:
Eso no sabría contestártelo. En principio, si la entrada es "vieja" el feed no se actualizará, si es más o menos reciente, a veces si y a veces no.

Gem@
Explorer camina lento, ha mejorado pero ha cometido el error de no incorporar todas estas funciones de CSS3 o de HTML5 aunque sea a modo experimental, tal como han hecho todos los otros. Es una pena porque todas estas cosas nuevas son muy interesantes y, aunque no las usemos por ahora, generan muchas alternativas.

Responder
Graciela  

Mira que me porto bien con Mozilla, si me dice actualiza lo hago, pero es malito :D

Responder
JMiur  

El Filómata:
Parecería que te falta una parte. Luego del script que está en el head, inmediatamente después, va otro llamado:

<script chartset='utf-8' src='/feeds/posts/summary?max-results=0&alt=json-in-script&callback=timezoneSet'/>

Fíjate en el post original para copiar eso correctamente porque desconfio de los codigos en los comentarios. Es muy importante porque eso, identifica el blog e inicializa los datos; ahora, arma todo bien pero lo deja vacio. El resto, parece correcto pero, si hay detalles que adaptar, los vemos cuando esa parte esté arreglada.

Por lo del post de Haití, solo puedo decir que, sería un honor.

Graciela:
Si no se ha actulaizado autmáticamente (parece que no lo está haciendo con esta versión), basta ir al menú Ayuda y hacer click en Buscar Actualizaciones. El resto, es como siempre.

Responder
El Filómata  

Quedó bien JMiur. Después iré corrigiendo cositas, como por ejemplo, colocar en cada entrada que aparece debajo un imagen de 16x16. Ahi esperaré tus consejos.
Abrazo.

Responder
HaCk CrAcK  

Huu que mal habra que probar con algun script o haciendo el feed a mano aunque es muy pesado modificarlo todos los dias, gracias igualmente JMiur

Responder
JMiur  

El Filómata:
Me alegro que funcionara, ahi lo veo bien. Para lo de als imágenes de fondo, imagino que es lo mismo que hablamos el toro dia de la sidebar de tu blog. Se hace exactamente del mismo modo, agregando la propiedad background o cambiándola acá:

ul#calendarUl li {
}

En todo caso, te diría que colocaras en un mes dos posts en el blog de pruebas para ver si la lista se alinea bien, si tiene el ancho suficiente, etc.

No le veo otra solución, HaCk CrAcK.

Responder
Graciela  

Ohhh Yesss lo veo, lo veo, magia magia!
Se hizo la luz, no uses Gi:O te.
Cómo se pasó esa actualización? menos mal que te tengo ahí, gracias!

Responder
JMiur  

:D

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