Simulando botão flash com CSS

Publicado em: 20/01/2006

Introdução

É prática comum projetar-se mecanismos de navegação para sites, que utilizam botões criados com tecnologia Flash. Até mesmo para desenvolvedores não especialistas com a tecnologia, a montagem de um menu baseado em Flash é uma tarefa relativamente simples considerando que existem incontáveis códigos "pronto para uso" nos mais variados tipos de fontes gratuitas na Internet.

O Dreamweaver disponibiliza um conjunto de vários tipos e efeitos para botão, criando automaticamente o código flash que faz funcionar os botões. Não sou especialista nesta tecnologia, aliás na verdade, pouco entendo de Flash, mas por pura curiosidade gastei algumas horas explorando o menu "Insert > Media > Flash Buttom" do DW e como consequência das minhas experiências resolvi simular com CSS o efeito flash de dois dos botões gerados pelo DW.

Não vou entrar no mérito do uso de tecnologias e nem em considerações a respeito de qualquer item de Web Standards que porventura possam vir a ser levantadas em função do conteúdo deste tutorial. Existem vários blogs, fóruns, listas de discussão e artigos que têm exaustivamente tratado do assunto Flash x Standards e este não é o caso desta matéria, mas simplesmente o resultado da minha curiosidade em replicar com CSS um efeito que é gerado com Flash.

Objetivo

Neste tutorial mostrarei como obter, com uso de CSS, um efeito dinâmico disparado pelo evento "onmouseover" e sem uso de script, simulando o comportamento de um botão criado com Flash. Ao final da leitura desse tutorial você estará capacitado a projetar a mudanças de comportamento em links, passando de um estado estático para um estado dinâmico.

Os botões em flash

Escolhi os botões do menu do DW denomidados "Slider" e "Diamond Spinner". O primeiro imita o movimento de uma porta corrediça abrindo e o segundo o movimento giratório de um diamante. Criei uma página web mostrando os dois botões gerados em flash pelo DW.
Dê uma olhada na página.

Se você abriu o código fonte da página viu os elementos object, param e embed característicos do Flash, se não abriu ou não viu, está convidado a voltar e fazer isso, para futura comparação com o código fonte da página CSS.

A estrutura da marcação XHTML para os botões

Ressalvados casos especiais, o elemento de marcação mais apropriado para um mecanismo de navegação com mais de um link é um dos elementos HTML para listas. Usaremos neste tutorial o elemento lista não ordenada ul com dois itens, para comportar os dois diferentes botões.

Não é boa prática adotar-se design diferentes para de links em mesmo mecanismo de navegação, mas aqui a finalidade principal é mostrar a técnica de construção e não construir um menu. Assim sendo, adotarei uma mesma lista para os dois diferentes botões, para agilizar a explicação.

<ul id="flash">

<li class="um">
<a href="#"><span>Link 1</span></a>
</li>

<li class="dois">
<a href="#"><span>Link 2</span></a>
</li>

</ul>

Convém notar no código acima:

1. O elemento ul que engloba toda a navegação recebeu o nome "flash" para seu identificador ID. Poderia ser qualquer nome com p. ex: "dentadura", mas prefira nomes que se relacionem com a finalidade ou estrutura do elemento;
2. O primeiro item da lista recebeu o nome "um" para sua classe e aqui, também uma boa escolha seria o nome "slider";
3. O segundo item da lista recebeu o nome "dois" para sua classe e aqui, também uma boa escolha seria o nome "spinner";
4. O texto de cada link foi cercado com o elemento span para permitir que se "esconda" o texto que será substituido pela imagem.

Nota: Atribuir ID e classe em uma determinada lista, como fizemos acima, tem a finalidade de permitir estilizar a lista sem interferir com outras listas existentes na página que não devam ser atingidas pelas regras de estilo.

Fica por conta do leitor reproduzir o código acima e verificar no navegador como é a renderização inicial da nossa lista.

Fundamentos da técnica

O comportamento do botão que contém o link nada mais é do que um simples rollover de imagem para o qual a imagem que substitue a imagem original, é animada. Assim, a animação que é feita em flash, deverá ser substituida por uma imagem do tipo gif animada.

Uma das técnicas empregadas para obter o efeito rollover de imagem é via JavaScript. Contudo nosso objetivo é fazer funcionar o botão, com uso CSS e sem qualquer script. Não vou me estender aqui, explicando como construir um rollover de imagem com CSS, mas é fundamental que você conheça a técnica para prosseguir neste tutorial.
Assim, recomendo uma leitura no tutorial "Menu com rollover de imagem".

Vamos então em frente, supondo que você entende como construir um rollover de imagem com CSS

As imagens do rollover

No estado inicial do link em repouso, as imagens estáticas (paradas) são mostradas a seguir:

Imagem: link1.gif de 147 x 33px

Imagem: link2.gif de 105 x 22px

E, para o estado do link com o mouse sobre ele, as imagens animadas (em movimento) são mostradas a seguir:

- Imagem: link1-over.gif

- Imagem: link2-over.gif

Nota: A animação da imagem para o Link 1 mostrada acima está em loop infinito para efeito de ilustração. No projeto do botão use animação sem loop.

O código CSS para o rollover

E finalmente a folha de estilos para criar o efeito.

<style type="text/css"

ul#flash li{list-style-type:none;}
/* Retira os marcadores de listas */

ul#flash li.um a {
display:block;
width:147px;
height:33px;
background: transparent url(link1.gif) left top no-repeat;}

ul#flash li.um a:hover {
background: transparent url(link1-over.gif) left top no-repeat;
}

ul#flash li span {
display:none; /* Esconde o texto do link */
}

ul#flash li.dois a {
display:block;
width:105px;
height:22px;
background: transparent url(link2.gif) left top no-repeat;
}

ul#flash li.dois a:hover {
background: transparent url(link2-over.gif) left top no-repeat;
}

</style>

É isso! Veja uma página com os botões funcionando com CSS

E novamente, a página com os botões em Flash

E não esqueça de olhar e comparar o código fonte das páginas.

Links relacionados a este tutorial

• Menu com rollover de imagem
• A propriedade background
• Background interativo
• Construção de gif animada no Fireworks
• Salvar gif animada no Fireworks