Comunidad de diseño web y desarrollo en internet

Efecto Tsunami en botonera, pero con CSS

Por La100rra el 22 de Abril de 2006 con 35,353 visitas
HTML, CSS y Javascript Otros tutoriales por La100rra.

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

Envia un comentario (24)

css

Por Alan el 23 de Abril de 2006

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 La100rra el 23 de Abril de 2006

Si, extremadamente sencillo .
Por Mariux el 23 de Abril de 2006

muy buen dato la100ra!
Por arturo garcia el 23 de Abril de 2006

me gusto mucho ahora quiero probarlo
Por DanielSemper el 23 de Abril de 2006

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 La100rra el 23 de Abril de 2006

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
Por jaime el 24 de Abril de 2006

haaa jijo, donde puedo ver un tutorial de como hacer ese menu en flash?
Por siddharta el 24 de Abril de 2006

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!
Por Georginho el 24 de Abril de 2006

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 La100rra el 24 de Abril de 2006

Para Georginho y jaime

Aquí les dejo el enlace del tutorial
Por soundwave el 24 de Abril de 2006

nunca esta demas saberlo ...gracias la100rra
Por neojp el 24 de Abril de 2006

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 Gilbert el 27 de Abril de 2006

Totalmente de acuerdo con danielsemper
Por nexux el 28 de Abril de 2006

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 Stopa el 29 de Abril de 2006

muy interesante la100rra

lo malo es que en el maldito IE no en todas la versiones funciona
Por Kenshin77 el 07 de Septiembre de 2006

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 alexha el 15 de Marzo de 2008

bui bueno me cirvio para una tarea del colepozz
espero ue me saque buena nota akjkajkajkja

vale poozzz xauuu
Por MaBoRaK el 18 de Marzo de 2008

kilroy te lo agradece
Por matiasnicolas el 14 de Mayo de 2008

si la verdad que es re sencillo, el Problema es que los de arriba no se les puede poner un degrade de tamaño; aunque es una opcin simple para poder utilizar, habria que ver algo con ajax para que quede bien bueno, hay varios ejemplos dando vueltas.
Por banesa el 03 de Noviembre de 2008

el tsunami es muy fuerte y tenemos que tener cuidado
Por Necro el 08 de Febrero de 2009

Disculpa como puedo lograr ese efecto en flash, podrias postear el archivo flash?
Por mela... el 22 de Noviembre de 2009

presiso una explicación para el cole sobre q proboca el tsunami i analizarlo me pueden ayudar???
Por ThonyFD el 27 de Marzo de 2012

Aun veo gente hacer referencia a IE6... no puedo creerlo
Por Mariux el 27 de Marzo de 2012

ThonyFD :
Aun veo gente hacer referencia a IE6... no puedo creerlo

estas reviviendo un post del 2006.....

Efecto Tsunami en botonera, pero con CSS

Publica tu comentario

o puedes...