CSS Lightbox

Estava hoje no trabalho a tentar meter um lightbox em javascript a funcionar, quando encontrei o seguinte tutorial. Por achar que é de extremo interesse aqui vai.

Hoje vou-vos ensinar um novo modo de fazer uma lightbox. Muitos dos tutoriais de lightbox’s são atravês da utilização de javascript, mas vou-nos ensinar a fazer uma lightbox mais rápida e level apenas utilizando apenas CSS (Cascading Style Sheet) e “quase nada de javascript”

Vamos começar por definir o CSS. Este CSS é composto por 2 estilos, sendo eles:

.black_overlay{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}

.white_content {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
padding: 16px;
border: 16px solid orange;
background-color: white;
z-index:1002;
overflow: auto;
}

O primeiro black_overlay, é responsável por por colocar todo o browser com um genero de camada preta, enquanto que o segundo define a caixa que aparece em cima dessa camada.

Agora na parte do body, para que a lightbox funcione é necessário colocar as seguintes linhas:

Teste a uma lightbox . Para isso clicar aqui

E pronto, como podem ver em meia duzia de linhas são capazes de colocar uma lightbox nos vossos sites, sem grandes chatices recorrendo apenas a CSS.