Light box apenas com CSS

LIGHT BOX SEM JS, APENAS COM CSS

Neste experimento, clicando em um link de 'abrir' aparece um light box,  assim deixando todos os outros elementos da página não são clicáveis​​. Ao fechar o modal também tem animação, com um efeito de minimizar.
 É claro que, usando imagens e JS você terá um resultado com mais opções,  algo como apertar ESC para fechar nunca será reproduzida em CSS. Puro CSS raramente é a melhor solução pronta para produção, mesmo assim é sempre bom apliarmos nossos conhecimento em CSS.
Observação: Use um navegador atual.

---

Como fazer

Esse é o CSS necessário para que tudo aconteça:

a:link, a:visited {
 text-decoration: none;
 color: #000000;
 }
a:hover {
 text-decoration: underline; 
 color: #000000;
 }
a:active {
 text-decoration: none;
 color: #000000;
 }

.modal {

/* sobrepor conteúdo da página */
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.5);
z-index: 10000;

/* Efeito de opacidade ao abrir */
-webkit-transition: opacity 500ms ease-in;
-moz-transition: opacity 500ms ease-in;
transition: opacity 500ms ease-in;

/* esconder */
opacity: 0;
pointer-events: none;
}

/* mostrar */
.modal:target {
opacity: 1;
pointer-events: auto;
}

/* conteúdo */
.modal > div {
width: 500px;
background: #fff;
position: relative;
margin: 10% auto;

/* Padrão de animação */
-webkit-animation: minimise 500ms linear;

/* Embelezando */
padding: 30px;
-moz-border-radius: 7px;
border-radius: 7px;
-webkit-box-shadow: 0 3px 20px rgba(0,0,0,0.9);
-moz-box-shadow: 0 3px 20px rgba(0,0,0,0.9);
box-shadow: 0 3px 20px rgba(0,0,0,0.9);
background: -moz-linear-gradient(#fff, #ccc);
background: -webkit-gradient(linear, right bottom, right top, 

color-stop(1, rgb(255,255,255)), color-stop(0.57, rgb(230,230,230)));
text-shadow: 0 1px 0 #fff;
}

/* Substituir animação na abertura */
.modal:target > div {
-webkit-animation-name: bounce;
}

.modal h2 {
font-size: 36px;
padding: 0 0 20px;
}

@-webkit-keyframes bounce {
  0% {
   -webkit-transform: scale3d(0.1,0.1,1);
   -webkit-box-shadow: 0 3px 20px rgba(0,0,0,0.9);
  }
  55% {
   -webkit-transform: scale3d(1.08,1.08,1);
   -webkit-box-shadow: 0 10px 20px rgba(0,0,0,0);
  }
  75% {
   -webkit-transform: scale3d(0.95,0.95,1);
   -webkit-box-shadow: 0 0 20px rgba(0,0,0,0.9);
  }
  100% {
   -webkit-transform: scale3d(1,1,1);
   -webkit-box-shadow: 0 3px 20px rgba(0,0,0,0.9);
  }
}

@-webkit-keyframes minimise {
  0% {
   -webkit-transform: scale3d(1,1,1);
  }
  100% {
   -webkit-transform: scale3d(0.1,0.1,1);
  }
}

/* link para fechar */
.modal a[href="#close"] {
position: absolute;
right: 0;
top: 0;
color: transparent;
}

/* restaura estilos */
.modal a[href="#close"]:focus {
outline: none;
}

/* Cria botão fechar */
.modal a[href="#close"]:after {
content: 'X';
display: block;

/* Posição */
position: absolute;
right: -10px;
top: -10px;
width: 1.5em;
padding: 1px 1px 1px 2px;

/* Estilo */
text-decoration: none;
text-shadow: none;
text-align: center;
font-weight: bold;
background: #000;
color: #fff;
border: 3px solid #fff;
-moz-border-radius: 20px;
border-radius: 20px;
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
box-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

.modal a[href="#close"]:focus:after,
.modal a[href="#close"]:hover:after {
-webkit-transform: scale(1.1,1.1);
-moz-transform: scale(1.1,1.1);
}

.modal a[href="#close"]:focus:after {
outline: 1px solid #000;
}

/* Abrir modal */
a.openModal {
margin: 1em auto;
display: block;
width: 200px;
background: #ccc;
text-align: center;
padding: 10px;
-moz-border-radius: 7px;
border-radius: 7px;
background: -moz-linear-gradient(#fff, #ddd);
background: -webkit-gradient(linear, right top, right bottom,

 from(rgb(255,255,255)), to(rgb(230,230,230)));
text-shadow: 0 1px 0 #fff;
border: 1px solid rgba(0,0,0,0.1);
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.3);
-moz-box-shadow: 0 1px 1px rgba(0,0,0,0.3);
box-shadow: 0 1px 1px rgba(0,0,0,0.3);
}

a.openModal:hover,
a.openModal:focus {
background: -moz-linear-gradient(#fff, #ccc);
background: -webkit-gradient(linear, right top, right bottom,

 from(rgb(255,255,255)), to(rgb(200,200,200)));
}

Aqui está um HTML simples apenas para uma demonstração simples:

<!DOCTYPE html>
<html dir="ltr" lang="en-US" id="paulrhayes-com" class="noJs">
<head>
 <meta charset="UTF-8" />
 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 <title></title>
 <link rel="stylesheet" type="text/css" href="estilo.css" />
</head>
<body class="experiment">
<div id="wrapper">

 <a href="#example" class="openModal">Abrir modal</a>
 <a href="#example2" class="openModal">Abrir outro modal</a>
 <aside id="example" class="modal">
  <div>
   <h2>Modal box</h2>
   <p>
    Teste1, Teste1, Teste1, Teste1, Teste1, Teste1, Teste1, Teste1, 

Teste1, Teste1, Teste1, Teste1, Teste1, Teste1, Teste1, Teste1, Teste1, Teste1, Teste1, Teste1, Teste1, Teste1, Teste1, Teste1, Teste1, Teste1, Teste1, Teste1, Teste1, Teste1, Teste1.
   </p>

   <a href="#close" title="Fechar">Fechar</a>
  </div>
 </aside>
 <aside id="example2" class="modal">
  <div>
   <h2>Outro modal box</h2>
   <p>Teste2, Teste2, Teste2, Teste2, Teste2, Teste2, Teste2, Teste2, Teste2,

 Teste2, Teste2, Teste2, Teste2, Teste2, Teste2, Teste2, Teste2, Teste2, Teste2,

 Teste2 , Teste2, Teste2, Teste2, Teste2, Teste2,

 Teste2, Teste2, Teste2, Teste2, Teste2, Teste2, Teste2.</p>

   <a href="#close" title="Fechar">Fechar</a>
  </div>
 </aside>
 </div>
</body>
</html>

Baixar arquivos do artigo 

É isso ai galera, simples e claro.

Aparentemente esse CSS pode assustar um pouco mas analisando bem não fica difícil.

Até a próxima.

Read more »

Posted in: CSS,HTML