Publicidad [cerrar]
                 ¿Quieres registrarte?

Efecto Tsunami en botonera, pero con CSS

Por: La100rra
22 de Abril del 2006
5449 de clabLevel
Otros artículos de La100rra
29,220 visitas
css

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

Enviar a twitter Enviar a facebook


También te interesa


Etiquetascss

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 .


;)
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 ;)
Por: La100rra
haaa jijo, donde puedo ver un tutorial de como hacer ese menu en flash? :lol:
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! (y)
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 ;)
Por: La100rra
nunca esta demas saberlo ...gracias la100rra ;)
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 (y)

lo malo es que en el maldito IE no en todas la versiones funciona :(
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
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: matiasnicolas
el tsunami es muy fuerte y tenemos que tener cuidado
Por: banesa-blog
Disculpa como puedo lograr ese efecto en flash, podrias postear el archivo flash?
Por: Necro
presiso una explicación para el cole sobre q proboca el tsunami i analizarlo me pueden ayudar???
Por: mela...-blog
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.





Publicidad [cerrar]
[ musica | lanzarote | horoscopos | video chat gratis webcam | juegos ]
horoscopos diseño grafico valencia