Como fazer uma Lightbox em CSS

Escrito por jackson lewis | Traduzido por camila rodrigues
  • Compartilhar
  • Tweetar
  • Compartilhar
  • E-mail

Light box é o termo usado para o método usado para dividir a apresentação de fotos especiais ou avisos em um site da web para os usuários. A prática comum de programação usada para a criação de uma light box é com "cascading stylesheets" (CSS) para criar uma light box, a fim de manter os dados a partir da página web separados do estilo de exibição contido dentro do CSS. Criar uma light box consiste em criar uma estrutura de armazenamento seguido por definir o comportamento das páginas web para visualização da imagem ou mensagem especial.

Nível de dificuldade:
Moderadamente fácil

Outras pessoas estão lendo

O que você precisa?

  • Editor de texto

Lista completaMinimizar

Instruções

  1. 1

    Abra o editor de texto do seu computador e cole o seguinte código CSS no arquivo, a fim de configurar a estrutura de recipiente a ser utilizado para o código lightbox. Isso estabelece várias caixas aninhadas que comporão a estrutura de uma light box. Copie este código:

    <div class=\"onView\">On <div class=\"offView\">Off</div> <div class=\"viewBox\"></div> <div class=\"content\"> </div> </div>

  2. 2

    Adicione as seguintes instruções para o arquivo CSS antes da estrutura de caixa aninhada da etapa 1. Estas funções CSS serão usadas para definir o comportamento da light box com base na ação do utilizador sobre a página da web. Essas são as instruções:

    .onView {} .offView {} .viewBox {} .content {}

  3. 3

    Preencha a definição de função para a função .onView com as seguintes informações. Isso vai mudar a visão da página para exibir a lightbox com uma mudança de fundo na página web quando a lightbox for ativada, e redefinir a vista quando ela estiver desativada. Esta é a informação do código a ser usado para esta função:

    .onView {padding:4px; width:30px; background:#999; border:#333 solid; border-width:2px;}

    .offView { display:none;}

  4. 4

    Defina o viewBox e as funções de conteúdo da página para mudar a visualização da página web para o conteúdo da página inicial, bem como a aparência desejada para a lightbox colocando o seguinte código no documento CSS:

    .viewBox { width:100%; height:100%; float:center; position:relative; z-index:100; background-color:#999999; top:0px; left:0px; right:0px; display:none; opacity: .80; }

    .content { width: 620px; height: 400px; border: solid 2px #fff; background: #ccc; margin-top: 15px auto; position:relative; z-index:200; top: 30px; display:none; padding:10px GO }

  5. 5

    Adicione duas regras adicionais de CSS para implementar a funcionalidade de lightbox dinâmica da página web, baseada em ações do usuário com o mouse, no final do arquivo CSS:

    .onView:hover div, .offVoew {display:block;} .offVoew:hover + .viewBox {display:none;}

  6. 6

    Salve o arquivo CSS e faça o upload para o seu site para ver a sua lightbox recém-criada.

Não perca

Filtro:
  • Geral
  • Artigos
  • Slides
  • Vídeos
Mostrar:
  • Mais relevantes
  • Mais lidos
  • Mais recentes

Nenhum artigo disponível

Nenhum slide disponível

Nenhum vídeo disponível