Cristalab

Efecto Tsunami en botonera, pero con CSS

Por: La100rra + 22.04.2006

Blogueando me topé con éste efecto maravilloso, imagino que ya algunos lo han visto en Flash, si no, lo pueden ver aquí:



Pués ahora Paul Armstrong nos muestra como hacer algo parecido pero con CSS, pueden ver la explicación aquí

Lo malo, no funciona con IE6 y menores.

Ver página de Ejemplo

Otro ejemplo

Etiquetas css

Comentarios | Enviar un comentario
Que bueno! Como diablos no pensé en eso?
Son solo selectores adyacentes

Código :

<style type="text/css">
body {
   font-family: Helvetica, Arial, Verdana, sans-serif;
   font-size: 85%;
}
li { font-size: 1em; }
li:hover { font-size: 2em; }
li:hover + li { font-size: 1.6em; }
li:hover + li + li { font-size: 1.3em; }
</style>

Por: Alan
Si, extremadamente sencillo .


Guiño
Por: La100rra
muy buen dato la100ra!
Por: Mariux
me gusto mucho ahora quiero probarlo
Por: arturo garcia_blog
Sinceramente el efecto Tsunami se consigue con un perfecto y suave resultado en flash, pero esto se pierde completamente con este intento en CSS, el cambio de tamaño de font se vé brusco y sin elegancia.
Por: DanielSemper

la100rra :

Pués ahora Paul Armstrong nos muestra como hacer algo parecido pero con CSS


Es imposible hacerlo igual con CSS y lo sabes.

Simplemente es una opción más de un menú vistoso sin flash.

Por cierto la relación con el efecto tsunami se la dí yo, si lées en la página de Paul nunca lo menciona, él se inspiró en el menú de MacOs Guiño
Por: La100rra
haaa jijo, donde puedo ver un tutorial de como hacer ese menu en flash? Riendo
Por: jaime_blog
en realidad el efecto en si, no me gusta mucho que digamos (flash o CSS), pero saber que esto se puede hacer en CSS tan facilmente me da algunas ideas para explorar nuevos efectos.

Gracias la 100ra, buen dato! Thumbs up
Por: siddharta
Lo que dice Jaime es acertado "¿Donde puedo ver un tutorial de como hacer ese menu en flash?" por que en realidad flash tiene mucho mas y mejores efectos que css.

pregunto lo mismo
Por: Georginho_blog
Para Georginho y jaime

Aquí les dejo el enlace del tutorial Guiño
Por: La100rra
nunca esta demas saberlo ...gracias la100rra Guiño
Por: soundwave_blog
Es bueno aclarar que esto en una PC algo vieja puede ser muuuy lento, si el efecto de :hover en IE6 no es muy bueno y falla mucho, no me quiero imaginar verlo en un IE6 de una PC vieja, o peor aún en Firefox (que es algo pesado).

Es una gran idea, la otra vez vi el mismo efecto en CSSplay pero usando imagenes, esto es más c00l usando CSS2 y selectores adyacentes.

PD: El ejemplo puede funcionar si se agrega el Script-IE7, pero dudo que funcione rápidamente.
Por: neojp_blog
Totalmente de acuerdo con danielsemper
Por: Gilbert_blog
Cita:
Pués ahora Paul Armstrong nos muestra como hacer algo parecido pero con CSS, pueden ver la explicación aquí

Lo malo, no funciona con IE6 y menores.

Hay una pagina web (http://www.dhteumeuleu.com/) que tambien tiene uno parecido.. pero no se si es el mismo... que tambien funciona bajo Firefox... o sea... tu entras en el sitio en la seccion Text y te muestra el mismo ejemplo utilizando tambien CSS pero mas javascript. Y he probado ingresando con Internet Explorer, y cuando uno entra en la seccion Text aparece el menu igual.. pero cuando realmente se pone bueno es cuando quieres acceder a su demostración ... es ahi cuando IE se vuelve instable.

Ojala que le sirva de algo el comentario... y no se olviden.. la dirección es (http://www.dhteumeuleu.com/)
Por: nexux _blog
muy interesante la100rra Thumbs up

lo malo es que en el maldito IE no en todas la versiones funciona Triste
Por: Stopa
hola soy principiante en el manejo del flash me gustaria saber como poder hacer ese efecto de tsunami ya como menu que cada una de las letras sea un boton y ke el menu tenga un scroll text que al llegar a la ultima opcion del menu vuelva a empezar desde la primera opcion igual al ir hacia arriba al llegar al primero le siga la ultima opcion no c si pueda hacer les agradeceria si me pudieran ayudar con eso.
Por: Kenshin77_blog
bui bueno me cirvio para una tarea del colepozz
espero ue me saque buena nota akjkajkajkja

vale poozzz xauuu
Por: alexha _blog
kilroy te lo agradece
Por: MaBoRaK
Deja un comentario
IMPORTANTE

Recuerda ser respetuoso, no insultes a otras personas, ni uses palabrotas, hay una persona al otro lado de la pantalla.

Habla bien, NO ESCRIBAS EN MAYUSCULA TODO, no escribas como en un SMS, evita cosas como "ke", "x q" y demás abreviaciones.

Aquí funcionan las etiquetas de los foros, puedes usar [b] para negrita, [img] para las imágenes, [url] para los enlaces, etc.

Si tienes preguntas técnicas, envíalas mejor al foro.