JMiur [E]

Hay muchas formas de mostrar imágenes con efectos diversos utilizando sólo CSS; el problema que tienen muchos es que estas cosas suelen no ser "amigables", no es cosa de copiar y pegar para que funcione sino que requiere intentar entender cómo funcionan para poder adaptarlas a determinado contexto. Por ejemplo, eso pasa con CSS3 Gallery de Andrea Giammarchi que tiene una idea muy interesante sobre la que uno puede jugar, modificar y probar distintas alternativas.

Por lo general, todo se ve bien pero los ejemplos tienen sus trampas; se muestran en páginas vacias donde todo se posiciona de manera absoluta y no hay nada otra cosa que influya; son contextos asépticos y si queremos usarlo en un blog o una página web donde haya otros elementos alrededor, las cosas se complican; más aún si no se tienen en cuenta que los navegadores no funcionan igual y que hay propiedades que no reconocen.

Todo eso suele tener solución; basta jugar un poco con las propiedades y probar a ver que sale aunque, eventualemente, es posible que no salga nada.

En este caso, voy a usar cuatro imágenes y las colocaré en una lista ordenada a la que idendificaré con un ID:
<ul class="thumb">
  <li><img src="URL_imagen_1"/></li>
  <li><img src="URL_imagen_2"/></li>
  <li><img src="URL_imagen_3"/></li>
  <li><img src="URL_imagen_4"/></li>
</ul>
<div> ....... cualquier contenido ....... </div>
Eso es lo de menos, la clave, claro, es el CSS así que acá va un modelo de ejemplo:
<style>

  /* la lista flota a la izquierda porque quiero que el DIV con el texto se muestre a su lado */
  /* por ese motivo, debo dimensionarla con width y height  */
  ul.thumb {
    float: left;
    height: 240px;
    list-style: none;
    margin: 0;
    position: relative;
    width: 260px;
  }

  /* cada item es una imagen que fuerzo a que se muestren pequeñas */
  ul.thumb li {
    /* se posicionand e manera absoluta */
    position: absolute;
    left: 50px;
    top: 0;
    z-index: 0;
    /* algo de decoración */
    background-color: #FFF;
    box-shadow: 0 0 10px #444 inset;
    padding: 10px;
    /* el tamaño de la imagen a mostrar */
    height: 112px;
    width: 150px;
    /* la transición será el efecto */
    -moz-transition: all 1s ease-in-out 0s;
    -webkit-transition: all 1s ease-in-out 0s;
    -o-transition: all 1s ease-in-out 0s;
  }
  ul.thumb li img {
    height: 100%;
    width: 100%;
  }

  /* cada item se posiciona y se rota a gusto */
  ul.thumb li:nth-child(1) {
    -moz-transform: rotate(20deg);
    -webkit-transform: rotate(20deg);
    -o-transform: rotate(20deg);
    margin-top: 100px;
  }
  ul.thumb li:nth-child(2) {
    -moz-transform: rotate(-30deg);
    -webkit-transform: rotate(-30deg);
    -o-transform: rotate(-30deg);
    margin-top: 0px;
  }
  ul.thumb li:nth-child(3) {
    -moz-transform: rotate(-15deg);
    -webkit-transform: rotate(-15deg);
    -o-transform: rotate(-15deg);
    margin-top: 75px;
  }
  ul.thumb li:nth-child(4) {
    -moz-transform: rotate(10deg);
    -webkit-transform: rotate(10deg);
    -o-transform: rotate(10deg);
    margin-top: 50px;
  }

  /* el efecto al poner el cursor encima */
  ul.thumb li:hover {
    /* se elimina la rotación */
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    /* se muestra la imagen con su tamaño real */
    height: 375px;
    width: 500px;
    /* se la posiciona y se la pone en primer plano */
    margin-left: 0px;
    margin-top: -50px;
    z-index:10;
    /* algo de decoración */
    border-radius: 10px;
    padding:20px;
  }
</style>
El estilo utiliza la pseudo-clase nth-child que, lamentablemente, no está implementada en Internet Explorer salvo a partir de su versión 9 así que, lo primero que habría que hacer es intentar que la galería se vea en IE8. Eso, es algo que puede hacerse de distinto modos, ninguno es ideal pero ... es lo que hay.

Por ejemplo, podemos agregar el script ie9js que es un script que agrega una cantidad de funciones extras, ayudando a que las versiones más viejas de IE interpreten propiedades que normalmente no están implementadas. Se coloca antes de </head>:
<!--[if lt IE 9]>
<script src='http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js'/>
<![endif]-->
En este caso, la solución es parcial ya que, de todos modos, la rotación de las imagenes deberá hacerse utilizando filtros lo que también implcia cambair los margenes y por lo tanto, será necesario usar condicionales así que deberemos agregarles algún ID a cada etiqueta LI; en este caso, las llamé IE1, LE2, IE3 e IE4.

<!--[if IE]>
<style type='text/css'>
  ul.thumb li { zoom: 1; }
  #IE1 {
    margin-left: -30px;
    margin-top: -20px;
    filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.9396926207859084, M12=-0.3420201433256687, M21=0.3420201433256687, M22=0.9396926207859084, sizingMethod='auto expand');
  }
  #IE2 {
    margin-left: -20px;
    margin-top: 15px;
    filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.8660254037844387, M12=0.49999999999999994, M21=-0.49999999999999994, M22=0.8660254037844387, sizingMethod='auto expand');
  }
  #IE3 {
    margin-left: -30px;
    margin-top: 50px;
    filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.9659258262890683, M12=0.25881904510252074, M21=-0.25881904510252074, M22=0.9659258262890683, sizingMethod='auto expand');
  }
  #IE4 {
    margin-left: 0px;
    margin-top: 90px;
    filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.984807753012208, M12=-0.17364817766693033, M21=0.17364817766693033, M22=0.984807753012208, sizingMethod='auto expand');
  }
  ul.thumb li:hover {
filter: progid:DXImageTransform.Microsoft.Matrix(enabled='false') !important;
  }
</style>
<![endif]-->



Maecenas congue ornare fermentum. Aliquam orci ipsum, fringilla id vehicula eget, consequat ut lorem. Nunc commodo ornare diam, at varius felis imperdiet et. Aenean commodo malesuada nibh eu eleifend. Sed et ante vitae nisi ullamcorper pretium. In id convallis tellus. Phasellus feugiat, arcu ac scelerisque interdum, purus dui rutrum diam, et sollicitudin ante diam ac diam? Duis nec erat metus. Duis placerat eros vel elit feugiat ornare blandit urna laoreet. Phasellus dapibus lorem sit amet tortor adipiscing non mollis felis pretium. In vitae lectus nec justo viverra eleifend. Duis hendrerit est quis nulla faucibus quis suscipit ante condimentum. Etiam scelerisque lacus ac neque eleifend rhoncus. Suspendisse potenti. Mauris vulputate varius elementum. Proin semper leo nec augue massa nunc.

59 comentarios:

deathdan93  

Está espectacular, en serio :O

Responder
Graciela  

Reprecioso Jmiur! me encanta :P

Responder
Adrián J. Messina  

¡wOW!
Esto es un lujo, realmente fascinante.
Agradecido de que nos lo muestres.
Un abrazo.

Responder
Nguyễn Mạnh Phát  

Hi Vaga, I found a special comment form. It is called nested comment.

http://shamsmi.blogspot.com/2008/07/threaded-comments-in-blogger.html

You can develop this one.

Responder
Karla  

Cool JMiur!, en lo personal no me gustan las rotaciones en las imágenes por que se ven dentadas en Google Chrome, me extraña de ese navegador si se supone es de los mejores, eso dice ellos, ahhha...

Saludos!

Responder
Gem@  

Es un regalo para los sentidos que aún no siendo amigables son tentadores :)

Responder
Martín Rocha  

Hola JMiur...aqui de visita =)...exelete y solo con css d+...te queria consultar sobre una plantilla que estoy rediseñando...esta es la plantilla http://goo.gl/4cx8w presisamente es el buscador el cual quiero mover hasta por encima del menu, encontre para hacerlo pero junto con el me arrastra el menu..como puedo hacer Jmiur? agregar algun parametro o quitar n c..desde ya muchas gracias y me encanto el diseño del facebook vas a tener q hacer un post xn los lineamientos html je...estas en G+ JMiur?..saludos que andes bien.

Martin

Responder
Beben Koben  

i think master JMiur can develop it ;)
he's a great about script

here my version

http://beben-koben.blogspot.com/2010/01/threade-comments-in-blogger.html

nice hover master :D

Responder
JMiur  

Martín Rocha:
Yo lo veo arriba del menú ¿Cual es la idea? ¿moverlo para que quede en la misma línea del menú? Para eso, lo razonable sería mover el código; sino, también podrías buscar esto:
.span-24, div.span-24 { ................. }
y agregarle position: relative;
luego añadir una regla apra el rectángulo del buscador:
#topsearch {
position: absolute;
right: 10px;
top: 192px;
}
y poniendo valores en right y top lo puedes ubicar en cualquier parte con cierta precisión.

Beben Koben:
I will see it :-)

Responder
Martín Rocha  

Exelente genio =)..ya lo pude ubicar en el lugar, probe con varios valores y propiedades pero no encontre la convinacion para correr la parte de ingresar texto en el buscador hacia la izquierda Jmiur..cual es ese valor a modificar? y por otro lado cual es la propiedad que hay que aumentar para que el menu sea mas ancho?.
Saluod q ands bn Jmuir y espero me encuentres por G+ jeje.

Responder
JMiur  

Martín:

Entiendo que eso es provocado porque el texto está alineado a la derecha con esta regla:

#search {
text-align: right;
}

Deberías eliminarla y se alineará a la izquierda pero, también se moverá la imagen de la lupa porque el ancho del área donde se escribe, es menor y para reposicionar esa lupa, deberás aumentar ese ancho que ahora está definido así:

#topsearch #s {
width: 220px;
}

Responder
EpideMia  

Hola JMiur!!

hace rato que no te escribo.

me gustó mucho el truco, ya voy a ver donde lo pongo.

te hago una pregunta, se pueden poner otros tipos de archivos que no sean imagenes??


muchas gracias!!

Responder
JMiur  

Se podría poner cualquier cosa pero claro, deberá adaptarse para cada uno de ellos; por ejemplo, se deberá definir de qué manaera se puede permutar su tamaño.

Responder
Martín Rocha  

mil gracias Jmiur quedo re bn...ahora como siempre re contento en firefox, entro a ese ie y siempre jode jeje...en este caso es en las miniaturas de los post q n son las mismas medidas q veo en firefox...hay algo mal o se le puede condicionar medidas especiales u algo asi para ie? Desde ya mil gracias JMiur que andes bien.

Responder
JMiur  

Hay una definición en esa plantilla que dice:
.post-body img {
max-width: 99% !important;
}
¿Qué sentido tiene? ¿Para quñe la usas? Mejor, quítala.

Responder
Martín Rocha  

Genio total Jmiur je...todo culpa de la plantilla q venia con eso jeje.
Un abraso y muchas gracias JMiur que andes bien.

Responder
JMiur  

Perfecto, Martín. Imaginé que era así pero, tenía mis dudas :D

Responder
Martín Rocha  

Quedo perfecto =)...
Ahora note que al aumentar vista con el cntrl + (+) el buscador cambia de lugar y no se mantiene en proporcion..como puedo solucionar eso JMiur?
Desde ya muchas gracias.
Martin

Responder
JMiur  

Pasará lo mismo si redimensionas la ventana o si la resolución del monitor es otra. Todo eso pasa porque está posicionado de manera absoluta y por lo tanto, se ubica a 390p pixeles del borde derecho, sin importa cual es el ancho total.

Lo razonable, para posicionar algo, es usar posiciones relativas a algún contenedor; en este caso, puede ser outer-wrapper. Así que si agregas:

#outer-wrapper {
.......
position: relative;
}

Luego, puedes cambiar el valor de right para que el buscaro quede siempre dentro del rectángulo del blog. El valor, tendrá como borde derecho el borde del blog y no el borde de la ventana del navegador.

Responder
Martín Rocha  

Quedo de 10 Jmiur muchas gracias..
ahora ando con dos cuestioens que aunque busco en su codigo no lo encuentro...es en el menu vertical, entre cuadro y cuadro aparece un punteado y no se como quitarlo.
Y despues el widget de subcripcion que aunq le aumento el valor no aumenta su ancho y no veo forma.
Muchas gracias de nuevo JMiur un saludo.
Martin

Responder
JMiur  

El CSS dice esto:

.sidebar ul li {
.......
border-bottom: 1px dotted #696666;
}

y ese es el borde punteado.

Responder
Martín Rocha  

Soy malisimo jeje...muchas gracias Jmiur quedo de 10, estaba por aplicar eso de que la cabecera rota cuando se actualiza la pagina pero el porblema queda mal ya que en ella por defecto hay 3 widgets en la zona de la cabezera y a la hora de agregar el codigo de imagenes en uno de ellos queda cortada, la solucion claro seria dejarlo con uno solo en todo su espacio pero no se como quitarlo bien y mucho menos dejarlo solo en la cabecera.
Desde ya muchas gracias Jmiur saludos.
Martin

Responder
JMiur  

La imagen original es un fondo que está en #outer-wrapper por lo tanto, si se quiere hacer que cambie, lo que debe hacerse es cambiar esa imagen de fondo y no agregar otro widget.

En lugar de cosas así:
document.write('<img src="http://3.bp.blogspot.com/-MOSQ5QGBW9o/Tmwjt_wV3sI/AAAAAAAACcE/BSranlsWw9M/s00/back.jpg">')
usar algo así:
document.getElementById.style.backgroundImage="http://3.bp.blogspot.com/-MOSQ5QGBW9o/Tmwjt_wV3sI/AAAAAAAACcE/BSranlsWw9M/s00/back.jpg";

Responder
Martín Rocha  

Probe ello JMiur pero no cargan, lo que pasa es que el codigo que aplique es uno para rotar la imagen de titulo con cada recarga del blog. Primero probe con el que comentas http://goo.gl/dc3tq pero sucede que te muestra 2 imagenes divididas y tambien molesta los sectores de widgets en el header haciendo que no se vean completas.
Luego probe con este de su colega http://goo.gl/m2WTe pero el problema es que como la pantilla tiene 2 o 3 widgets en el header solo muestra la imagen hasta los limites de ese widget, luego se corta.
La solucion pienso seria de dejar solo un widget en la zona del header asi alli aplicar el codigo y se ven completas las imagenes pero no se que secciones elimnar del codigo para dejar uno solo alli.
Esta es una captura de los widgets: http://goo.gl/2VwX9
Un saludo JMiur y muchas gracias.
Martin.

Responder
JMiur  

El script que se muestra áca y al cual haces referencia, funcionaría perfectamente ya que, como te dije antes, la imagen que usas no está en una etiqueta IMG sin oque es el fondo de un DIV cuyo ID es header-wrapper.

Es por eso que el script de Ciudad Blogger te funciona parcialmente, porque en ese caso, se escribe una etiqueta IMG que es perfectamente válido y correcto pero que no se adapta a tu diseño, l oque debes hacer es cambiar la propiedad background.

Responder
Martín Rocha  

ha claro si ya te entendi JMiur en mi plantilla se gestiona la img de una forma poco comun y no como una cabecera realamente.
Por ello lo que decis de cambiar la propiedad pero ay sea en su sistema o el de su colega Jmiur en que parte modifico para cambiar esa propiedad?
Saludos que andes bien.
Martin

Responder
JMiur  

En http://dimensionpeliculas.blogspot.com/ usa el mismo script que tienes pero elimina la etiqueta IMG

Luego, cambia lo que dice:
document.write('<img src="http://3.bp.blogspot.com/-MOSQ5QGBW9o/Tmwjt_wV3sI/AAAAAAAACcE/BSranlsWw9M/s00/back.jpg">')
y todos los demás que son similares.

Reemplázalos por algo así:
document.getElementById("outer-wrapper").style.backgroundImage="url(http://3.bp.blogspot.com/-w59lpOc858o/Tmv6XdpMa1I/AAAAAAAACbU/iDd1gRAUzmA/s00/back.jpg)";

Responder
Martín Rocha  

Impecable Jmiur muchas gracias =)...al fianl solo le quite el texto cn el que empezaba y le deje el script y quedo de 10.
Solo me queda la consulta de como mover el texto "continuar leyendo" el cual modifoque pero no encuentro segun su ID donde estan los valores a modificar...estan Jmiur o hay que agregarlos de alguan forma?
Muchas gracias
Martin

Responder
JMiur  

Ese texto n otiene propeidades así que debes crear una regla. Por ejemplo:

.readmorecontent {
margin-top:30px;
}

Responder
Martín Rocha  

Mil gracias JMiur le agregue alguna propiedad mas y quedod e 10, ahora me encontre con el slideshow que viene por defecto que aparece en todas las paginas, lo compare con los que vienen para agregar y en ellos para que solo aparezca en la principal se modifica la seccion del widget pero en este caso no es uno.
Hay alguna manera para que ese slideshow solo aparezca en la principal Jmir?
Muchas gracias un saludo.

Responder
JMiur  

Usa códigos condicionales. Fíjate en esta entrada.

Responder
Martín Rocha  

Al principio dije que no encontraria mas el inicio y final del codigo jeje pero al final le encontre la vuelta y quedo genial gracias Jmiur.
Me encontre con que no encuentro la parte de editar cuantos post pero por pagina, como veras la plantilla ya añade una paginacion, lo maximo que encontre es ademas de otro titulos similares pero alli nada mas regulta el "mostrando X paginas de X" pero no la cantidad de post por pagina, hay forma seba?
Que andes bien JMiur y disculpa.
Martin

Responder
JMiur  

Eso está en Configuración | Formato o en Configuración | Entradas y Comentarios del nuevo diseño.

Responder
Martín Rocha  

Si probe ello JMiur y nada de echo aplique lo que explicas en esta entrada http://vagabundia.blogspot.com/2009/03/controlar-al-cantidad-de-entradas-por.html pewor tampoco.
En esta parte en teoria se regula ello:


...
var postperpage=7;
var numshowpage=7;
...

que es lo que genera esta url por pagina
http://dimensionpeliculas.blogspot.com/search?updated-max=2011-08-29T19%3A45%3A00-07%3A00&max-results=7#PageNo=2
pero aunque cambie ello tampoco produce efecto.
Cual podra ser la solucion JMiur? desde ya mil gracias.

Responder
JMiur  

La cantidad de entradas por página definidas en la configuración y la cantidad de entradas por página definidas en el script deben ser la misma.

De todos modos, Blogger ignora la configuración si el tamaño de la página a ser cargada es demasiado grande con lo cual, la paginación debe hacerse usando valores bajos.

Responder
Martín Rocha  

Ok JMiur muchas gracias...pues de igual modo como se comenta la paginacion en Blogger es muy limitada por tema de feeds.
Si quiciera quitarle la paginacion y volver a "pagians antiguas, etc" que parte del codigo deberoa de borrar o sustituir?
Desde ya muchas gracias JMiur saludos que andes bien.
Martin

Responder
JMiur  

Deberías quitar el script que hayas puesto; eso es todo.

Responder
Martín Rocha  

Probe quitando algunas partes que parecian del codigo JMiur pero al final me saltaba error o no se quitaba.
Es que la paginacion ya venia incluida en la plantilla y no se bien de donde a donde esta el script para borrarlo y si en alguna parte hay que agregar algun codigo mas para que regrese el sistema orginal.
Muchas gracias Jmiur un saludo y mil disculpa =).
Martin

Responder
JMiur  

Eso no es algo que pueda verse online.

Seguramente, es la aprte que comienza con:

var home_page="/";
var urlactivepage=location.href;

Responder
Martín Rocha  

Toda la razon, quite esa parte volvio el sistema anterior aunque persiste la cuestiond e aunque le de que me muestre mas entradas por paginas siempre aparecen 4..sera que algun codigo del sistema viejo da problemas?
Te envie la plantilla comoe sta actualmente a tu correo Jmiur por las dudas.
Un saludo que andes bien.

Responder
JMiur  

En tu plantilla sigue estando el script. Está debajo de:
<b:include name='nextprev'/>

Ese lo único que hay porque la cantidad de entradas sólo se puede controlar mediante la configuración de Blogger.

Responder
Martín Rocha  

Gracias y Gracias Jmiur =)...pues me fije en lo que demoraba mas y era la carga de imagenes que son de otro servidor y las cambie y ya me modifico la cantidad por pagina !! =).
Mil disculpas por las molestias JMiur que andes bien y gracias.

Responder
Martín Rocha  

JMiur una mas...estoy añadiendo una lista de imagenes de modo que queden una tras la otra en fila y que asi conformen una sola, en tamaño en conunto es el de la sidebar pero la ultima la tira en una segunda linea.
Si la agrego como imagen completa si queda del tamaño correcto...como puedo solucionarlo JMiur? slaudos que andes bien

Responder
JMiur  

Tendría que ver tu ejemplo. Puede ser que el ancho total sea inferior a la suma del ancho de las imagenes y no hay espacio por lo tanto, se ve abajo.

Responder
Martín Rocha  

Esto es lo que señala el HTML JMiur:

/* Outer-Wrapper----------------------------------------------- */
#outer-wrapper{width:950px;margin:0px auto 0px;padding:0;text-align:$startSide;font:$bodyfont;background: url(http://3.bp.blogspot.com/-w59lpOc858o/Tmv6XdpMa1I/AAAAAAAACbU/iDd1gRAUzmA/s00/back.jpg) left top repeat-x;position: relative;}
#content-wrapper{background: #313131;}
#main-wrapper{width:610px;padding-top:10px;padding-left:15px;padding-right:0px;float:left;word-wrap:break-word;/* fix for long text breaking sidebar float in IE */
overflow:hidden;/* fix for long non-text content breaking IE sidebar float */
}
#rsidebar-wrapper{width:310px;float:right;padding-right:5px;margin-left:5px;margin-right:0px;word-wrap:break-word;/* fix for long text breaking sidebar float in IE */
overflow:hidden;/* fix for long non-text content breaking IE sidebar float */

cual sera a modificar porque probe con aumentar los valores y como que deja de verse la sidebar ¿?
Saludos Jmiur que andes bien

Responder
JMiur  

Como te dije, debo verlo.

Responder
Martín Rocha  

Disculpa Jmiur este es el blog.
Un abrazo

Responder
JMiur  

Como te dije. La suma del ancho de las imágenes supera el ancho del contenedor.

El contenedor tiene 300 pixeles y las imágenes:
56 + 65 + 65 + 64 + 53 = 303
sobran 3 pixlees, no hay espacio y la última se muestra debajo porque no entra.

Responder
Martín Rocha  

Ha ok JMiur muchas gracias...pues le bajarle 3 pixeles y entra pero no ajusta a las imagenes de menus que es por eso mismo que decis JMiur por el tema del ancho..pero hay alguna forma de asi como sucede por ejemplo el ancho que le di al menu vertical hacer que blogger ignore ese ancho y yo le de uno en este caso 303 asi entran todas las imagenes?
Estuve probando con crearle un div dentro del elemento pero no me dio efecto seguramente mal armado je.
Un saludo JMiur que andes bien.

Responder
JMiur  

No es un problema de Blogger sino de propiedades agregadas y definiciones de estilo. No sé que parte del menú debería tener un ancho específico.

En cuanto a la sidebar, si algo mide 300 no puede ponerse una cosa que sea más grande así que, lo razonable es, o redimensionar las imágenes ya que tienen mucho espacio vacío alrededor, o agrandar el espacio disponible que si bien está definido como de 310 pixeles de ancho, eso, luego se reduce porque hay paddings varios que hacen que el interior, se más pequeño.

Responder
Martín Rocha  

Probe aumentar el tamaño JMiur pero despues de un valor se desaparecia la sidebar, al final la solucion que le encontre es usar la imagen completa y mapearla =).
Ahora JMiur me tope de nuevo con el tema de la cantidad de post por pagina, me tiro mas porque el causante es el slideshow y que deveria de ponerle uno las liviano.
Crees que esa sea la caisa JMiur...y estuve intentando quitar el codigo, las imagenes si pude pero de donde a donde borrar del HTML para quitar el slide completo?
La plantilla es la misma que te habia enviado a su correo y el blog es el que le comentaba anteriormente.
Un saludo JMiur muchas gracias.

Responder
JMiur  

Si aumentas el tamaño, la sidebar baja por el mismo motivo que bajan las imágenes, porque el ancho del contenedor es insuficiente.

Lo del slide no puedo decirte, habría que mirar bien al plantilla y saber cómo está puesto, tiene HTML uno o varios scripts y CSS. Eso, deberías consultarlo con quien hizo la plantilla.

Responder
Martín Rocha  

Gracias JMiur voy a ver comparando entre ambas plantillas ya q hay una sin y otra con el slide para sacarlo.
Mil gracias y diculas ser tan molesto je...un abrazo que andes bien Jmiur.

Responder
Artemisa  

Hola JMiur, quería poner esta galería en mi sidebar pero como la tengo a la derecha cuando se expanden las imagenes se ocultan parcialmente porque se salen del blg.

¿Hay alguna manera de que al pasar el ratón se expandan hacia la izquierda?
Lo he estado mirando pero no encuentro la manera de hacerlo.

Responder
JMiur  

Habría que verlo pero, podrías probar cambiando esta regla:

ul.thumb li:hover { }

por ejemplo, agregando la propiedad left
left:-300px;
así, el hover bo solo la rotará y agrandará sino que la ubicará a la izquierda

algo parecido ocurriría con translateX que es otra transformación; la sintaxis sería así:
-moz-transform: rotate(0deg) translateX(-300px);

de ese modo, rotará para ponerse derecha pero también se moverá hacia la izquierda.

Todo esto habría que verlo en un ejemplo concreto porque puede requerir alguna propiedad extra.

Responder
Artemisa  

Con las dos opciones que me das hace el efecto que yo quiero, mi problema es que por mucho que he aumentado el z-index se escondía detras del main y no había manera de solucionarlo, asi que he optado por ponerlo debajo de las entradas y condicionarlo para que solo se muestre en la portada, junto con un efecto de texto que vi aquí en Vagabundia, ha quedado genial... ahora me gusta mas!!! :D Dicen que no hay mal que por bién no venga.

Muchas gracias por tu respuesta.

Responder
JMiur  

Es probable que esa imposibilidad de ponerlo encima de las entradas no tuviera una solución sencilla y por mucho que se estableciera el valor de z-index, no funcionara. Es natural, depende de las propiedades de todo el blog, overflows y otros detalles.

Así que tu solución es más que razonable y además, queda perfecto :-D

Responder
Artemisa  

Con tus consejos, no solo se consiguen cosas geniales para el blog, también se aprende muchisimo.

Gracias.

Responder
JMiur  

Gracias, Artemisa :-)

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