Selector Css de ancestro y precedentes "funcional". 25.2.12
Selector Css de ancestro y precedentes "funcional".
Dentro de los selectores y pseudoselectores que define el actual css hay una imposibilidad o carencia a día de hoy: el que haga posibles actuar sobre los elementos precedentes.
Esto es, el selector de ancestros y de precedentes.
Bien es cierto que el último documento del grupo de trabajo de la W3C relativo a los selectores ya lo incluye. Es el famoso "Selectors level 4", el origen de la falsa (hoy) creencia de la existencia de Css4, de la que ya he hablado.
Lamentablemente, es algo que está en un estadio demasiado inicial y a día de hoy, que yo sepa, ningún navegador le da soporte.
Pero como con todo, el que no exista no quiere decir que no se pueda conseguir, mejor dicho, emular, dicho comportamiento. Lograr, empleando sólo Css, cambiar la propiedades de un elemento que aparece antes en el DOM al actuar, :hover por ejemplo, en uno posterior.
Un caso real
Vamos con una simple lista:
<ul class="acordeon">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
La típica situación de una lista para conformar un acordeón (slider), en la que inicialmente cada elemento | li | tenga un tamaño y el que reciba el foco aumente, decreciendo todos los demás.
Y su css inicial.
ul.acordeon {
position: relative;
width: 90%;
height: 100px;
margin: 0 auto;
padding: 0;
overflow: hidden;
}
ul.acordeon > li {
margin: 0;
width: 25%; /*tamaño inicial*/
height: 100%;
float: left;
transition: .7s;/*animamos el cambio de tamaño*/
}
Con los selectores Css actuales no hay forma de que haciendo :hover sobre el 3º li tanto el 1º como el 2º cambien en algo.
Así que este es el punto que necesita un enfoque distinto. Algo tan sencillo de lograr con l siguiente declaración:
ul.acordeon:hover > li {
width: 15%;
}
Será la propia lista al recibir el puntero la que haga que sus hijos cambien el tamaño. Por lo que a continuación sólo tenemos que lograr que el hijo que reciba el puntero sea el que crezca para ocupar todo el espacio que queda libre.
ul.acordeon > li:hover {
width: 55%;
}
Y todo el rollo anterior para lograr lo siguiente:
Kseso
the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso
Saludos kseso, me encantan tus posts porque me gusta lo que tratas de hacer, el uso de css en su mejor expresion es cosa de buen gusto y por eso te felicito
ResponderEliminarmil exitos para ti!!!!!!!!!!
p.d. me llevo el codigo de slider para implementarlo en mi blog, estuve rato pensando que seria mejor si con jquery y kwicks o con puro css, al final me atrapo la sencillez del codigo.
Saludos Kseso
ResponderEliminarLlegué hasta aquí a través del blog de Oloman, buscando hacer algo diferente con las imágenes para los post. No quería usar más scripts, porque hace poco Google auto-paginó mi blog y me redujo las entradas del inicio de 6 a 4 -.-
Así que en mi intensa búsqueda de hacer algo, encontré este código CSS que emula perfectamente un slide de imágenes. Sin embargo hay alguna otra cosilla que me pregunto si podría hacerse. Mi conocimiento de HTML y CSS es bastante limitado, simplemente trato de 'comprenderlo' a través de la lógica, y no siempre surte efecto
Si te pasas por aquí: http://bk-201-fansub.blogspot.com.es/2013/04/black-rock-shooter.html verás una entrada en la que uso tu código para hacer un slide con las capturas del episodio. Me preguntaba varias cosas
1- Si es posible con CSS hacer que la imagen se adapte, sea cual sea su tamaño, al tamaño propio de la caja contenedora del acordeón (así todas las imágenes se redimensionarían al tamaño contenedor). En principio se puede hacer simplemente redimensionando las imángenes con Photoshop, no sería problema vaya
2- Si es posible que la imagen que tenga el tamaño máximo inicial sea la central, en lugar de la que está a la derecha. Para lo que lo quiero, que es mostrar capturas de pantalla de los vídeos fansubeados de anime, pues quedaría bastante chulo
Hay tamaños de contenedor, de las imágenes que se muestran, etc., etc., que me cuesta asimilar. Ya digo que mis conocimientos de esto son limitados, así que esos width: no termino de comprender muy bien cómo van. Intenté cambiar alguno, y o me desaparecía una imagen, o al expandirse desaparecía otra, en fin.. =P
Un saludo, y gracias por este código que sin duda aligerará el blog
@Svalin
ResponderEliminar1.- Las medidas con la que se muestra una imagen pueden alterarse vía Css declarando su tamaño.
Y para que sean igual a su contenedor sólo necesita declarar una de ellas (ancho o alto) y la segunda se ajusta en función de la primera para mantener la relación de aspecto:
img {
width: 100%;
}
En estos casos hay que procurar que la relación ancho/alto de la imagen sea igual a la de su contenedor como mínimo para evitar zonas sin cubrir.
2.- No. Css no tiene mecanismos (ni es su cometido) para alterar al vuelo (programar) que unas imágenes aparezcan antes que otras en el DOM en función de sus tamaños. Necesitará de un lenguaje de programación.
Un saludo
Pues nada, comprendido todo Kseso =)
ResponderEliminarGracias por el código, lo tengo implementado en el blog y ha gustado mucho. Me apunto al tema de la licencia beerware, así que si alguna vez por un casual nos viéramos, recuérdame que te debo una cervecita