×
Loading ...

Como fazer painéis suspensos com "divs" sobrepostas usando o CSS

Atualizado em 19 julho, 2017

O CSS permite sobrepor "divs", de modo que se crie uma imagem de duas separadas. Isso significa que é possível cortar imagens em arquivos menores para reduzir o carregamento no servidor, o que faz com que as páginas carreguem mais rápido no navegador do usuário. As classes do CSS fornecem uma maneira de criar menus, direções visuais e cabeçalhos de site com suas imagens.

Instruções

  1. Clique com o botão direito no arquivo HTML que contém as "divs" que você quer editar. Clique em "Abrir com" e clique no editor de HTML que desejar usar.

    Loading...
  2. Crie as classes do CSS. Neste exemplo, duas "divs" sobrepostas serão usadas e cada "div" contém uma imagem. O código a seguir define as propriedades de sobreposição da "div":

  3. Configure as "divs" que se sobreporão. O código HTML a seguir cria duas tags "

    " que serão usadas como painéis sobrepostos:

    Substitua no código o nome das imagens pelo das suas próprias imagens de painel.

  4. Salve o arquivo e abra a página HTML no seu navegador. Analise o resultado. Se desejar mover a imagem para a esquerda ou para a direita, será necessário editar as configurações da classe no CSS. Geralmente, é necessário testar algumas vezes antes de descobrir as configurações ideais em pixeis para as suas "divs".

Loading...

Referências

Loading ...
Loading ...