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.