Tecnologia de porta deslizante em CSS

Um avanço frequentemente discutido em CSS é a capacidade de empilhar imagens de fundo, permitindo que deslizem umas sobre as outras para criar efeitos especiais. De acordo com as regras atuais do CSS 2.0, cada imagem de fundo requer seu próprio elemento HTML. Em muitos casos, a marcação típica já fornece uma variedade de elementos para usarmos como componentes gerais da interface.

Com um design simples, podemos fazer isso.

De onde vem a inovação?

Muitas tags de navegação baseadas em CSS que vi têm em sua maioria as mesmas características: um bloco de cores retangular, talvez apenas um contorno, sem borda para a tag atualmente selecionada e a tag muda de cor quando o ponteiro do mouse se move sobre ela. Isso é tudo que o CSS pode nos dar? Uma série de caixinhas e cores monótonas?

Antes do CSS ser amplamente adotado, vimos muitas inovações no design de navegação por guias. Forma original, mistura especializada de cores e imitação de muitas interfaces físicas do mundo real. Mas esses designs geralmente dependem demais de imagens com texto elaboradas de maneira complexa ou são empacotados em tabelas aninhadas. Modificar o texto ou alterar a ordem dos rótulos requer um processo complexo. É até impossível esticar o texto, ou isso afetará muito o layout da página.

As barras de navegação somente texto são mais duráveis ​​e carregam mais rápido do que as barras de navegação texto como imagem. Da mesma forma, podemos até adicionar atributos alt a cada imagem. Para pessoas com baixa visão, o texto simples pode ser redimensionado livremente. Não é de surpreender que as barras de navegação baseadas em texto simples, estilizadas com CSS, estejam de volta ao web design. No entanto, a maioria dos designs de barras de navegação baseados em CSS ainda não fazem sentido até agora. Uma tecnologia recentemente adotada (como CSS) pode nos permitir fazer melhor, sem perder o efeito daquelas tags de tabela e imagem mencionadas anteriormente.

tecnologia de portas deslizantes

Belo acabamento, componentes de interface verdadeiramente flexíveis e dimensionamento adaptável com base no texto, podemos criá-lo com duas imagens de fundo independentes. Um à esquerda e outro à direita. Pense nessas duas imagens como duas portas de correr que deslizam juntas e se sobrepõem para ocupar um espaço mais estreito, ou que se afastam uma da outra para ocupar um espaço mais amplo, conforme mostrado na imagem a seguir:

Neste modelo, uma imagem mascara parte de outra imagem. Suponha que coloquemos algum conteúdo exclusivo ao redor de cada imagem, como cantos arredondados para rótulos. Não queremos que a imagem superior obscureça completamente a inferior. Para evitar que isso aconteça, podemos tornar a imagem acima (a da esquerda neste exemplo) o mais estreita possível. Mas ainda garanta uma certa largura para mostrar a exclusividade de um lado da etiqueta. Se os cantos externos forem arredondados, devemos controlar a imagem acima para ter a mesma largura da parte do arco.

Se o alvo aumentar de tamanho e exceder a largura mostrada acima, a imagem será esticada devido a alterações no tamanho e na fonte do texto, criando lacunas desagradáveis. O que precisamos julgar é prever quanto será essa escalabilidade. Se eu alterar o tamanho da fonte no navegador, o alvo aumentará? Na prática, devemos pelo menos estimar que o tamanho da fonte aumente para 300%. As imagens de fundo também precisam acomodar esse crescimento. Para o exemplo acima, definimos a imagem inferior (direita) para 400*150 pixels e a imagem superior para 9*150 pixels.

Se a etiqueta for esticada, a imagem desliza, a porta fica mais larga e mais parte da imagem é revelada:

Neste exemplo, fiz duas imagens de etiquetas 3D finas e suaves no Photoshop, conforme mostrado no início do artigo. Por um lado, o interior é claro e a borda é mais escura para representar o rótulo atualmente selecionado. Para aplicar este modelo de truque às imagens esquerda e direita, precisamos expandir a área coberta pela imagem do rótulo e cortá-la em duas partes:

A mesma abordagem será aplicada ao rótulo denominado “atual”. Assim que tivermos essas quatro imagens (1, 2, 3, 4) podemos começar a fazer nossas etiquetas com marcação e CSS.

criação de rótulos

Ao usar CSS para criar listas horizontais, você descobrirá que existem pelo menos duas maneiras de organizar os itens da lista na mesma linha. Ambos os métodos têm seus próprios méritos, mas ambos exigem CSS para resolver a confusão causada pelo layout. Um método usa caixas embutidas, o outro usa carros alegóricos.

O método um, que pode ser mais comum, é exibir todos os itens da lista inline. A beleza da abordagem inline reside na sua simplicidade. No entanto, para a tecnologia de portas deslizantes da qual estamos prestes a falar, o método inline apresenta alguns problemas de interpretação em navegadores específicos. O método dois, no qual nos concentraremos, é usar flutuadores para organizar os itens da lista na mesma linha. Frustrantemente, o comportamento aparentemente contraditório dos carros alegóricos escapa à lógica natural. Ainda assim, vale a pena discutir o entendimento básico de como lidar com vários elementos flutuantes e o que significa flutuação confiável.

Usaremos outro tipo de elemento flutuante para resolver o problema de disposição dos elementos flutuantes. Desta forma, o elemento pai abrange completamente o elemento filho. Portanto, podemos adicionar cor e imagem de fundo ao rótulo. É muito importante lembrar que os elementos de texto imediatamente após o rótulo usam a função clear em CSS para limpar objetos flutuantes. Isso evita que rótulos flutuantes afetem a posição de outros elementos na página.

Começamos com a seguinte marcação:

<div id="cabeçalho">
<ul>
<li><a href="#">Página inicial</a></li>
<li id="current"><a href="#">Notícias</a></li>
<li><a href="#">Produtos</a></li>
<li><a href="#">Sobre</a></li>
<li><a href="#">Contato</a></li>
</ul>
</div>

Na realidade, o div #header também pode conter o logotipo e a caixa de pesquisa. Para nosso exemplo, queremos reduzir o valor de cada hiperlink na cadeia de âncoras. Obviamente, esses valores devem conter corretamente a localização do arquivo ou diretório.

Começamos a projetar a lista posicionando o contêiner #header. Isso garante que o contêiner realmente atue como um contêiner para conter os itens da lista que flutuam dentro dele. Como o elemento está flutuando, também precisamos declarar sua largura como 100%. Adicione um fundo amarelo temporário para garantir que o contêiner pai preencha completamente toda a área atrás do rótulo. Da mesma forma, defina as propriedades de texto padrão para garantir um estilo uniforme:

#cabeçalho {
flutuar:esquerda;
largura:100%;
fundo: amarelo;
tamanho da fonte:93%;
altura da linha:normal;
}

Agora, também precisamos definir o valor padrão de margem/preenchimento para a lista não ordenada como 0 e remover a marca na frente do item da lista. Cada item da lista flutua para a esquerda:

#headerul {
margem:0;
preenchimento:0;
estilo de lista: nenhum;
}
#header li {
flutuar:esquerda;
margem:0;
preenchimento:0;
}Defina a cadeia de âncoras para forçar a renderização como um objeto de bloco e poderemos controlar todos os estilos sem preocupação:

#cabeçalho a {
exibição: bloco;
}

A seguir, adicionamos a imagem de fundo à direita do item da lista (alterações mostradas em negrito):

Agora podemos posicionar a imagem esquerda à esquerda da cadeia de âncoras (o elemento dentro do contêiner). Também adicionamos preenchimento, que amplia a etiqueta e afasta o texto das bordas da etiqueta:

#cabeçalho a {
exibição: bloco;
background:url("norm_left.gif")
canto superior esquerdo sem repetição;
preenchimento: 5px 15px;
}

Desta forma obtemos o efeito 2. Observe como nosso rótulo é moldado. Aqui, os usuários do IE5/Mac ficarão imediatamente surpresos: "Oh meu Deus, minhas guias estão empilhadas verticalmente e se estendem por toda a tela, nós o ajudaremos a resolver isso imediatamente!" Por enquanto, tente seguir os passos abaixo ou, se for conveniente, mude temporariamente para outro navegador e o problema com a versão IE5/Mac será resolvido imediatamente.

Agora que a imagem de fundo do rótulo geral está completa, precisamos substituir a imagem do rótulo “atual”. Conseguimos isso adicionando id="current" e uma cadeia de âncoras ao item da lista de destino. Como não há necessidade de alterar a aparência do plano de fundo além da imagem, usamos o recurso background-image:

Colocamos a imagem no fundo do contêiner #header (substituindo o fundo amarelo original), movemos a imagem de fundo para a parte inferior e adicionamos a cor de fundo correspondente ao espaço em branco acima da imagem. Ao mesmo tempo, remova o preenchimento herdado de body e adicione 10 pixels de preenchimento nas partes superior, esquerda e direita de ul:

#cabeçalho {
flutuar:esquerda;
largura:100%;
plano de fundo:#DAE0D2 url("bg.gif")
repita-x inferior;
tamanho da fonte:93%;
altura da linha:normal;
}
#headerul {
margem:0;
preenchimento: 10px 10px 0;
estilo de lista: nenhum;
}

Fazemos isso reduzindo o valor do preenchimento inferior da cadeia de âncoras normal em 1 pixel (5px-1px=4px) e, em seguida, adicionando o preenchimento subtraído à cadeia de âncoras "atual".

retoques finais

Observadores atentos podem ter notado os cantos da etiqueta branca no exemplo anterior. Esses cantos opacos são usados ​​para evitar que a imagem abaixo apareça na imagem acima. Em teoria, poderíamos tentar usar parte da imagem de fundo para caber no fundo da etiqueta. Mas nosso rótulo aumentará de altura. Se tentarmos mover a cor de fundo, a imagem de fundo ficará mais curta. Em vez disso, altere a imagem para que os cantos da etiqueta fiquem transparentes. Se o arco tiver suavização de serrilhado, usaremos uma cor de fundo mais uniforme em torno de suas bordas.

Agora que os cantos ficaram transparentes, a imagem à esquerda aparecerá através dos cantos da imagem à direita. Para compensar, adicionamos preenchimento (9px) ao item do formulário que corresponde à largura da imagem à esquerda. Agora que adicionamos preenchimento ao item do formulário, precisamos remover a mesma largura para centralizar o texto (15px-9px=6px):

#header li {
flutuar:esquerda;
background:url("direito.gif")
canto superior direito sem repetição;
margem:0;
preenchimento:0 0 0 9px;
}
#cabeçalho a {
exibição: bloco;
background:url("esquerda.gif")
canto superior esquerdo sem repetição;
preenchimento: 5px 15px 4px 6px;
}

Ainda não acabou, porque a adição de 9 pixels de preenchimento cria um espaço entre a imagem esquerda e o lado esquerdo da etiqueta. Agora que as bordas esquerda e direita da “porta” visível estão conectadas, não precisamos mais manter a imagem esquerda no topo. Portanto, troque a ordem das duas imagens de fundo e inverta-as. Troque também as duas imagens usadas na tag "atual":

#header li {
flutuar:esquerda;
background:url("esquerda.gif")
canto superior esquerdo sem repetição;
margem:0;
preenchimento:0 0 0 9px;
}
#header a, #header forte, #header span {
exibição: bloco;
background:url("direito.gif")
canto superior direito sem repetição;
preenchimento: 5px 15px 4px 6px;
}
#header #atual {
imagem de fundo:url("left_on.gif");
}
#header #atual a {
imagem de fundo:url("right_on.gif");
preenchimento inferior: 5px;
}

Depois de completar isso, chegamos ao Efeito 4. Observe que os cantos transparentes criam uma área não clicável no lado esquerdo da etiqueta. Esta área está fora do texto, mas ainda é perceptível. Não é necessário utilizar imagens transparentes em ambos os lados da etiqueta. Se não quisermos criar esta área inválida, então temos que usar uma cor atrás da etiqueta e depois substituir a imagem transparente nos cantos da etiqueta por esta cor. Agora apenas mantemos esse canto transparente.

Para o resto do problema, faremos todas as alterações de uma vez: tornar o texto do rótulo mais pesado, alterar o texto do rótulo normal para marrom, alterar o texto do rótulo "atual" para cinza escuro, remover o sublinhado do link e, finalmente, altere a cor do texto suspenso Alterado para a mesma cor cinza escuro. Após uma série de alterações, veremos o efeito até agora 5.

Solução consistente
Após o Efeito 2, um problema que reconhecemos é que no modo de navegação IE5/Mac, cada guia se estende e ocupa toda a largura do navegador, de modo que as guias são empilhadas verticalmente. Não é isso que queremos.

Na maioria dos navegadores, um elemento flutuante diminui para um tamanho mínimo do conteúdo que o contém. Se um elemento flutuante contiver uma imagem ou for uma imagem, ele será reduzido para a largura da imagem. Se contiver apenas texto, será reduzido até a largura do texto mais longo e sem topo.

Ocorre um problema em imagens no IE5/Mac quando um elemento de objeto de bloco de largura automática é inserido em um elemento flutuante. Outros navegadores ainda minimizam os floats e ignoram os elementos de bloco dentro do contêiner. Mas o IE5/Mac não segue esse comportamento; em vez disso, expande os elementos do objeto float e block para o máximo possível. Para resolver este problema, vamos flutuar a cadeia de âncoras ao mesmo tempo, mas apenas para IE5/Mac, para não abrir mão de outros navegadores. Primeiro, definimos as regras flutuantes para a cadeia de âncoras. Em seguida, usamos o método de comentário de barra invertida para ocultar esta regra, de modo que ela só tenha efeito no IE5/Mac e ignore outros navegadores:

Faça inferências a partir de um exemplo Acabamos de praticar a técnica da porta deslizante, usando texto simples e uma lista não ordenada para criar rótulos de navegação, com um pouco de estilo. Ele carrega rapidamente, é fácil de manter e o tamanho do texto pode ser bastante expandido sem prejudicar a aparência. Não precisamos reiterar a flexibilidade da tecnologia de portas deslizantes na criação de estilos complexos de barras de navegação.

Não há nada em que você não possa pensar e nada que você não possa fazer. O efeito final nos mostra um exemplo, mas nosso projeto não pode ser limitado por isso.

Em alguns casos, os rótulos não são necessariamente simétricos. Rapidamente fiz uma segunda versão desta etiqueta, também com estilo 3D sombreado, bordas angulares e uma parte esquerda distinta. De acordo com a segunda versão, podemos até trocar as posições das imagens esquerda e direita. Com esse layout detalhado e controle inteligente de imagem, podemos remover a borda inferior do botão para que a imagem do rótulo se encaixe melhor no fundo, conforme mostrado na terceira versão. Se o seu navegador suportar alternar entre várias folhas de estilo, você poderá usá-lo para alternar livremente entre várias versões da barra de navegação.

Existem muitos outros efeitos que não mencionamos. Uma observação rápida: mudei a cor do texto ao passar o mouse, mas a imagem inteira pode ser substituída para criar um efeito de transformação mais interessante. Mesmo que haja dois elementos HTML aninhados na marcação, o CSS pode ser usado para obter alguns efeitos que ainda não pensamos. O que criamos neste exemplo é apenas uma barra de abas horizontal, mas portas deslizantes podem ser usadas em muitas outras situações. O que você acha?