Simulando Flash con CSS
No se si es el titulo correcto para lo que pretendo mostrarles en esta oportunidad, pero creo que se le aproxima bastante. En realidad no vamos a simular nada, ni vamos a re-inventar la internet. Lo que quiero mostrarles, es como animar un menu usando CSS (Hojas de estilo)
Lo primero que necesitamos, es crear una imagen con movimiento que llamaremos bg.gif (ojo, es importante que sea un GIF para poder animarlo) Esta imagen la podemos crear en el Gif Animator, en Flash, o en cualquier programa que nos permita este tipo de animacion en la imagen.
Para efectos del tutorial, lo voy a realizar en Flash, aunque como dije antes, es exactamente igual.
Abrimos el Flash y creamos un nuevo documento, una vez abierto, le damos el tamaño que deseamos, en este caso lo haremos de 50 px de ancho por 20 de
alto. En el fotograma 1, creamos un rectangulo, del color de fondo deseado (para este ejemplo usamos el negro) y le borramos los bordes. Lo hacemos lo mas pequeño posible en cuanto al alto, tal vez 1.5 px. lo cual les quedara algo asi
Luego creamos un fotograma clave en el fotograma 10, le damos un alto de 10px a nuestra imagen y la acomodamos para que quede bien encajada. El resultado de este paso seria esto
El paso siguiente es crear un nuevo fotograma clave en el fotograma 20. Le aumentamos el alto a 20 px (el maximo de la imagen que estamos trabajando) centramos todo nuevamente para que quede prolijo y nos quedara algo asi
Acto seguido seleccionamos todos los fotogramas y le creamos una animacion de forma, grabamos con el nombre que queremos y lo exportamos como un GIF con el nombre de bg.gif
Ahora, a lo bueno, debemos crear el estilo en una hoja que podemos llamar estilo.css y creamos el identificador menu
/*simulando flash con css
Veperu.com*/
margin:0 auto;
width: 50px;
font-size: 12px;
list-style:none;
}
#menu li a {
font-weight: normal;
text-decoration: none;
text-align: left;
background: #FFFDF5;
display:block;
width:100%;
}
#menu li a:hover {
color:#EEEEEE;
font-weight: bold;
font-size: 12px;
background: #FFFDF5 url(bg.gif) right center repeat;
}
Ese seria nuestro archivo de estilos. La explicacion es algo sencilla, la primera capa o identificador, le indicara al navegador cuando debe aplicar esta capa, como en nuestro menu utilizaremos las listas desordenadas usamos el UL. La segunda capa, nos dice que cuando estemos usando un enlaces dentro de las etiquetas li debe usar esos atributos. Por ultimo, y aqui viene el "truco", cuando pasemos el mouse sobre el enlace (a:hover) usara estas caracteristicas y lo mas importante es que usara nuestra imagen de fondo.
El otro archivo que necesitaremos es el menu.htm en donde insertaremos el menu que queremos usar. El codigo puede ser algo como esto:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Simulando Flash con CSS -Veperu.com</title>
<style type="text/css">
<!–
@import url("estilo.css");
–>
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a href="#">Seccion 1</a></li>
<li><a href="#">Seccion 2</a></li>
<li><a href="#">Seccion 3 </a></li>
</ul>
</div>
</body>
</html>
Es un menu muy basico, donde estamos usando dentro de la capa "menu" las propiedades descritas en el estilo.css. Agregamos la lista desordenada con 3 items y sus respectivos enlaces.
Grabamos todo y ahora probamos nuestro archivo menu.htm y deberia funcionar (al menos si hicimos todo como debia, si no funciona no es mi culpa 
)
Notas
* Podemos hacer que el efecto sea mas rapido, para ello usamos menos fotogramas (en lugar de usar como fotogramas claves el 1, el 10 y el 20, podemos usar el 1, el 5 y el 10)
* Podemos hacer el efecto en sentido horizontal, para ello, lo que hacemos es ir creciendo el rectangulo de forma….. horizontal, en lugar de vertical como en el ejemplo
* podemos hacer que el texto se mueva hacia la izquierda, derecha o que se centre, para ello en la capa menu a:hover, incluimos la siguiente linea text-align:left; o text-align:right; o text-align:center
* Puedes usar otras formas en lugar de un rectangulo, tal vez redondear las puntas o cualquier otra.
* Los 3 archivos deben estar en la misma carpeta.
Cualquier duda que puedan tener, pueden preguntar sin problemas que hare lo posible por solucionarlo.
Salu2
Fecha: 31 / 07 / 07
Simular falsh con CSS…
Si tienes pensando en hacer un menu para tu pagina web y no tienes ni idea de como trabajar en Flash, o simplemente no te gusta usarlo, esta es una buena forma para arle un cierto movimiento a tu menu para que quede mas "interactivo"….