Menú deslizante letra a letra y opción tras opción 12.11.14
Demo de un menú en el que las opciones se despliegan una tras otra y letra tras letra. Con plegado inverso al despliegue. Pero mejor que explicartelo es que veas la demo ;-)
Menú deslizante letra a letra y opción tras opción
Tras publicar la demo del artículo Palíndromos y bifrontes autoexplicados con "animation" Css
, basada en jugar con la propiedad Css letter-spacing, por ahí surgió la posibilidad de encontrar una aplicación más práctica o realista que el juego presentado en ese artículo.
Así que nada más práctico que los típicos menús de opciones desplegables. Los que suelen llamarse allá en la lengua del imperio
algo así como sliding menú
o en otras ocasiones también marquesinas (marquee
).
En esta ocasión me explayo un poco más con los selectores para invertir el orden en que se despliegan o pliegan las opciones y jugando con transition-delay que lo hagan una tras otra en vez de todas simultáneamente.
Disfruta
See the Pen vEBqOW by Kseso (@Kseso) on CodePen.
Como ves, todo se basa en una técnica muy conocida por los lectores de este blog. A estas alturas más que mucho uso es ya todo un abuso de la pseudoclase :checked aplicada a inputs
junto al combinador de hermano ( ~ ).
){kind=link}
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 sigo tu blog constantemennte es de gran ayuda, pero tengo una pregunta, ¿quisiera saber como haces tus iconos de redes sociales, humans.text, Codepen, etc? que aparecen en la parte inferior de tus posts, utilizas imágenes y Sprites para que cambien de color al hacer el Hover??. Saludos y gracias...
ResponderEliminarHola Marcelo
EliminarNo. Los iconos no son imágenes y con la técnica de sprites css.
Son lo que podríamos llamar SVG ubícuos ;-)
Lo tienes explicado en detalle en el artículo SVG Guía de inicio. Creación, uso y manejo de imágenes svg en la web
En concreto en el punto 4 que allí llamo SVG desplazado
Un saludo
Gracias por la info, ,e sirvió mucho :)
EliminarAl final le encontraste la vuelta. Quedó muy bien con el efecto rebote; la animación lineal era lo que me hacía pensar que no se iba a ver lindo.
ResponderEliminarProbé lo del 'line-height', y hoy no me resulta tan llamativo. Lo traté de usar para desplegar párrafos de un texto largo, o tener todo comprimido en una línea y desplegarla con un 'checkbox'. No lo voy a publicar, porque no me gustó.
Y encima después vos lo vas a hacer bien, y me vas a humillar.
Para hacer algo parecido con line-height primero habría que tener en cuenta que esta propiedad no admite valores negativos.
EliminarQuizás jugando con la altura del párrafo (o mejor con max-height si va a haber animaciones) y la transición por pasos [steps] para dar la sensación de que el párrafo aparece línea a línea.
Pero tranquilo, Furoya, que como no acabo de visualizar exáctamente tu "juego" tienes tiempo de reintentarlo xD
Un saludo
Hola Kseso. Hace tiempo que quería preguntarte sobre este Menú que me pareció genial. Estoy tratando de armar un blog, y haciendo distintas pruebas sobre el mismo he echo algunas pequeñas variaciones, y una de ellas es colocar una imagen animada en lugar de una fija. Mi pregunta es la siguiente:
ResponderEliminarSe podría hacer que vayan pasando distintas imágenes tipo slider, o que cada vez que que se actualice la página aparezca una imagen distinta?
Te dejo el link para que veas a que me refiero http://imagenesmz.blogspot.com.ar/
Todavía estoy en la tarea de su confección pero la idea está instalada.
Desde ya te agradezco si pudieras responderme.
Saludos.
Hola Fabián
EliminarDéjame que en primer lugar te felicite por algunas de tus fotos. Muy buenas.
Pero al lío ;-)
"¿Se podría hacer que vayan pasando distintas imágenes tipo slider?"
Sí. Sólo necesitas armar una pequeña animación (@keyframes) ya sean las imágenes como fondo o como elementos del html.
En el blog he publicado algunas demos que podrías usar como base. En este artículo tienes algunas.
"¿o que cada vez que que se actualice la página aparezca una imagen distinta?"
En esto Css no tiene copetencia, ya requiere de programación. Necesitarás javascript o algún otro lenguaje. Creo que no te será difícil hallar algún código al respecto.
Par terminar ¿me permites una pequeña sugerencia? ¿Sí? Gracias.
Creo que deberías pedir otras opiniones y replantearte la música que carga por defecto y que no se puede´parar (yo al menos no vi los controles).
Un saludo
Nos quejamos varias veces de que las CSS's no ofrecieran algunos valores que el navegador puede obtener facilmente, como un número aleatorio, una hora, una fecha, un ancho o alto de algún elemento, o su cantidad total.
EliminarExisten preprocesadores que (obviamente) trabajan con lenguaje de programación, y quizá por ese lado se encuentre algo; pero como yo no los uso (siempre estoy por estudiarlos, y siempre aparece otra cosa que hacer) solamente dejo esto como una idea.
Si el dato es "local", siempre se puede obtener con javascript, y después meterlo con el mismo lenguaje en un atributo 'data-algo' que para algunos casos se puede leer con CSS (bah, hasta donde recuerdo, sólo para pseudoelementos y filtrado por selectores de atributo).
Varias veces estuve por comentarle al Dueño del Circo (aka, Kseso) si no sería buena idea dejar algunos métodos sencillos para sacar valores con lenguaje de programación y después pasarlos (o reescribirlos) al CSS. A mí no me gusta que se ofrezca código para copiar y pegar, pero teniendo en cuenta que ésta es una comunidad de desarrolladores y diseñadores que ya pasaron sus días de aprendices, el mostrar cómo interactúa JS con CSS puede ser un incentivo para que más de uno aprenda algo nuevo por las suyas.
No sé si merecen un artículo propio o quizá un ejemplo en los comentarios; pero en tu caso, Fabian Jofre, obtener un número al azar (o casi, porque sale del reloj de la máquina) y usarlo para cargar una imagen con ese número en un 'content' o hasta un verdadero 'background-image', es muy sencillo. O se puede hacer "todo" en javascript, que como te dijo Kseso, con cualquier buscador aparecen ejemplos.
Furoya dixit
EliminarVarias veces estuve por comentarle al Dueño del Circo (aka, Kseso) si no sería buena idea...
No sólo he pedido, rogado, suplicado... he llegado a mendigar xD
Tienes mi correo. Manda lo que quieras y creas conveniente.
A la espera quedo
(Bien, Fabian Jofre, al final lo conseguiste. Y Kseso lo publicó.
EliminarJavascript desde cero: background-image aleatorio.
Es una de las tantas formas; no sé si te sirve. )
Estimado furoya, buen día:
ResponderEliminarPor desgracia para ustedes, por estos lares no solo pasan expertos, también pasamos algunos "manitas chapuceros", ¿como obtener de consulta medios, los valores de ancho x alto ventana y dpi o lo "como sellame" para utilizar con calc() en css3?
Saludos dkompras.
Hola Manuel Rosendo Castro Iglesias.
EliminarHasta que encontraste una manera de escribirme.
;-)
(Perdón a todos, es un chiste para dos.)
Veamos, la idea no es dejar código para copiar y pegar, y esto de las medidas en las pantallas es algo que seguro vamos a explicar más adelante (si Kseso y/o el resto de la comunidad no me echan antes). Como lo que publico son solamente "inicios" para que quien esté interesado comience a investigar por su cuenta (y sobre todo a experimentar), lo que puedo hacer ahora es dejarte los métodos que existen para averiguar dimensiones de pantalla. El mayor problema era las incompatibilidades, así que no estoy seguro de cuáles funcionan dónde. Tengo un documento muy viejo para probarlas, quizá lo cuelgue en Codepén si aún funciona.
Por ahora te dejo éstas
[code]
screen.height //altura total de pantalla
screen.width //ancho total de pantalla
screen.availHeight //altura disponible viewport
screen.availWidth //ancho disponible viewport
[/code]
Hay montones más, las vas a encontrar en cualquier tutorial.
Con respecto a los "dpi" o "ppp", creo que IExplorer tenía algo para eso, pero me parece que la forma más práctica de calcularlos es haciendo un elemento de una pulgada de lado y luego hacer que JS lo mida en pixeles. Solamente hay que medir el alto o el ancho.
[code]
<div style="width: 1in; height: 1in; overflow: hidden; background-color: red; ">
</div>
<script type="text/javascript">
prompt("Una pulgada cuadrada contiene estos pixeles", document.querySelector('div').offsetHeight + "ppp.");
</script>
[/code]
Para estar seguro de que contó bien, podés mirar la configuración del monitor, y si dice el mismo valor, entonces funciona.
Lo de 'calc()' puede ser un problema. No es que no se pueda, pero meterse con JS dentro de la hoja CSS es algo más avanzado (a menos que se haga la salvajada de reescribir como texto todo el contenido del elemento '<style>', que yo lo hice varias veces). Si ya estás en un lenguaje de programación, lo más coherente es hacer los cálculos con él, y aplicar el resultado al elemento que lo necesite.
Bueno, medio que se truló la respuesta al usar 2 'code', pero igual de entiende.
EliminarUn saludo.
Bueno, medio que se truló la respuesta al usar 2 'code', pero igual de entiende.
EliminarUn saludo.
Estimado furoya: A pesar de que hice mi primera página web en un ordenador "toshiva 1200 xs" com procesador 286c y 1 mega de ram. So DOS3.2 y lenguaje htm. el menda de programación tiene menos idea que algunos pol...os. La verdad me sacas del html (que es más o menos lo que sabía, y de ccs, básico, pero muy básico (que es tan solo separar parte del código y guardarlo aparte), y pienso que se me cambió el idioma del ordenador. No entiendo nada. No estoy sugiriendo que me pasen ningún código, ya intentaré averiguar como, es lo que hacia en mis tiempos mozos, y de eso ya llovió un rato. Lo que me gustaría saber es:
ResponderEliminar1.- en que lenguaje tengo que buscar ¿java, javascript, php,?
2.-¿se puede?
3.- ¿me puedes dar alguna pista?
Att. un boquiabierto admirador.
http://web.archive.org/web/20010401000000*/http://www.webtelmex.net.mx/brais.
Bueno, aquí tenemos al menos una dificultad.
EliminarConvengamos que este es un blog más que interesante, pero no es "pa'todos". Es de CSS avanzado. Que el autor lo haga parecer fácil es mérito de él, no de los temas tratados.
Cualquier novato puede entrar a aprender, pero si no sabe HTML y CSS nada más por haber estudiado uno o dos tutoriales, no se le puede sacar todo el provecho. Antes de meterte en nada tan complejo como cálculos, primero afirmate en estructuras y estilos de páginas web.
Lo que estamos viendo en estos artículos es javascript, lo dice en el título. Al igual que otros lenguajes mencionados, funciona del lado del cliente, del ordenador, y es con lo que deberías seguir.
Java es interesante, pero se está orientando más a aplicaciones, ya se lo ve poco en páginas web; y PHP es el paso siguiente a manejarse con código localmente; es lenguaje de servidor. Hay otros, pero por acá no los tocamos.
Ponerte al día te va a llevar un buen tiempo, las cosas cambiaron mucho en los últimos 5 años, y ya venían cambiando de antes. La ventaja es que están respetando un poco más los estándares y eso hace más fácil el aprendizaje.
Y ya hay mucho código publicado, para copiar y pegar. En aquellos años no teníamos de donde aprender o mirar para después practicar. Ahora te va a ser más fácil. De hecho, el código que quedó mal allá arriba era un cut&paste, te debería mostrar los dpi en un prompt para que los copies. Claro si es que realmente funciona en todos los casos, seguramente alguien que sepa del tema de resoluciones más que yo lo va a confirmar.
Te lo repito para que se vea mejor
[code]
<div style="width: 1in; height: 1in; overflow: hidden; background-color: red; ">
</div>
<script type="text/javascript">
prompt("Una pulgada cuadrada contiene estos pixeles", document.querySelector('div').offsetHeight + "ppp.");
</script>
[/code]
Suerte.
Bien, se que es muy duro ponerse al día después de 20 años de no usar código directo.
ResponderEliminarCuando se empezó a usar Java, me puse con ello, pero ¡surgió el temible ventanal 3.1! y casi al mismo tiempo PHP.
Vamos que lo dejé correr y me pase a la publicación con los programas de edición ¡Gravísimo error!
Mientras no me meta al interior del DOM, no lo llevo tan mal, ya que éste usa un lenguaje más complejo.
Copiar y pegar, en realidad no es tan malo, si buscas aprender, te muestra la solución encontrada por otros (creo que es el fundamento de este blog). Partiendo de ahí, modificando y experimentado, con tiempo y paciencia, y nunca perdiendo la calma; puedes aprender (así lo hice en mis inicios), en ocasiones descubrirás que has errado el camino, en otras encontrarás soluciones alternativas útiles (las cuales es de cortesía publicar en contraprestación).
Volviendo al tema:
Si utilizo la primera parte de tu solución, veré los datos de mi ordenador. con el script de java (que ya conocía) el usuario tiene que permitirlo, es decir, tenerlo instalado.
El viewport, por lo visto, te responde únicamente verdadero o falso. y hasta este momento no he encontrado nada que me haga pensar lo contrario.
En tu comentario del 31/01/2015, perdón, 31/ene/2015. ya planteas un poco esta cuestión.
--- creo haber leído algo sobre unos nuevos atributos ccs " http://www.w3.org/TR/selectors4/ " que ya permiten obtener fecha y demás, ya comentado en algún post de este blog ---
la función calc() nos permite en un atributo numérico hacer cálculos," http://dev.w3.org/csswg/css-values-3/ ".
en ese comentario, entendí que podías haber encontrado la forma de acceder a dicha información sin recurrir a lenguajes externos.
Por lo visto me equivoqué, lo siento, y pido disculpas por ello.
¡GRACIAS!
Lo único que pude contar con CSS es un total de elementos, la mayor parte de la información se captura con JS, y después se pasa a los estilos. De momento, seguimos así.
ResponderEliminarLo que colgué es el documento para probar medidas. No están todas y me parece que hay diferentes interpretaciones sobre lo que deberían medir, y lo que en realidad miden, pero tendría que hacer más pruebas y no tengo tanto tiempo por ahora. Te lo dejo al menos actualizado para IE9 en adelante, porque el original ni andaba en HTML5
Measures browser and document.