Lightbox: 2011

segunda-feira, 5 de setembro de 2011

Light Box Example com barra rolante

Pure CSS Light Box Example - Devin Olsen

Esta é uma demonstração de como usar css puro para recriar a famosa caixa de luz que você vê por toda a internet para galeria de fotografia e trabalho de carteira.

Mover o mouse sobre o botão para ligar a mesa de luz diante. Mover o mouse sobre o botão off para ligar o lightbox off.

Off

COLOQUE AQUI O TEXTO

Pure CSS Light Box Example - Devin Olsen<br />
<br />
<style type="text/css">
html,body{height:100%;}

#box {width:650px; text-align:left; margin-left:auto; margin-right:auto; margin-top:20px; border:#333333 dashed; border-width:1px; padding:10px;}

.onLight {padding:2px; width:20px; background:#000000; border:#333 solid; border-width:1px; cursor:pointer;}
.onLight:hover div, .offLight {display:block;}

.offLight {padding:2px; z-index:200; width:25px; background:#333; border:#333 solid; border-width:1px; position:absolute; top:560px; right:310px; display:none;  cursor:pointer;}
.offLight:hover + .lightBox {display:none;}

.lightBox {width:100%; height:100%; float:left; position:absolute; z-index:100; background-color:#000000;  top:0px; left:0px; right:0px; display:none; cursor:default; 
opacity: .80; /*FOR ALL OTHER BROWSERS AND DEVICES*/
filter: alpha(opacity=80); /*FOR IE7*/
}

.content {width: 600px; height: 460px; border: solid 2px #fff; background: #ccc; margin:20px auto; position:absolute; z-index:200; top: 230px; display:none; padding:20px;}

h2 {margin:0px;}
</style><br />
<br />
<div id="box">Esta é uma demonstração de como usar css puro para recriar a famosa caixa de luz que você vê por toda a internet para galeria de fotografia e trabalho de carteira.<br />
<br />
Mover o mouse sobre o botão para ligar a mesa de luz diante. Mover o mouse sobre o botão off para ligar o lightbox off.<br />
<br />
<div class="onLight"><br />
<div class="offLight">Off</div><div class="lightBox"></div><div class="content"><div style="-moz-background-clip: border; -moz-background-inline-policy: continuous; -moz-background-origin: padding; background: url( COLOQUE AQUI O ENDEREÇO DA IMAGEM ) repeat scroll center bottom; : orangered; height: 380px; overflow: auto; padding: 3px; position: relative;"><marquee direction="up"> </marquee><a href="COLOQUE O LINK DA PÁGINA AQUI"> <br />
<img src="COLOQUE AQUI O ENDEREÇO DA IMAGEM"width="550" height="500"> </a><br />
<a href="COLOQUE O LINK DA PÁGINA AQUI"> <img src="COLOQUE AQUI O ENDEREÇO DA IMAGEM"width="550" height="500"> </a><br />
<br />
<a href="COLOQUE O LINK DA PÁGINA AQUI"> <img src="COLOQUE AQUI O ENDEREÇO DA IMAGEM"width="550" height="500"> </a><br />
<br />
<a href="COLOQUE O LINK DA PÁGINA AQUI"> <img src="COLOQUE AQUI O ENDEREÇO DA IMAGEM"width="550" height="500"> </a><br />
<br />
<a href="COLOQUE O LINK DA PÁGINA AQUI"> <img src="COLOQUE AQUI O ENDEREÇO DA IMAGEM"width="550" height="500"> </a><br />
<br />
<a href="COLOQUE O LINK DA PÁGINA AQUI"> <img src="COLOQUE AQUI O ENDEREÇO DA IMAGEM"width="550" height="500"> </a><br />
<br />
<a href="COLOQUE O LINK DA PÁGINA AQUI"> <img src="COLOQUE AQUI O ENDEREÇO DA IMAGEM"width="550" height="500"> </a><br />
<br />
<a href="COLOQUE O LINK DA PÁGINA AQUI"> <img src="COLOQUE AQUIO ENDEREÇO DA IMAGEM"width="550" height="500"> </a><br />
<br />
<a href="COLOQUE O LINK DA PÁGINA AQUI"> <img src="COLOQUE AQUIO ENDEREÇO DA IMAGEM"width="550" height="500"> </a><br />
<br />
<a href="COLOQUE O LINK DA PÁGINA AQUI"> <img src="COLOQUE AQUIO ENDEREÇO DA IMAGEM"width="550" height="500"> </a><br />
<br />
<a href="COLOQUE O LINK DA PÁGINA AQUI"> <img src="COLOQUE AQUIO ENDEREÇO DA IMAGEM"width="550" height="500"> </a><br />
<br />
<a href="COLOQUE O LINK DA PÁGINA AQUI"> <img src="COLOQUE AQUIO ENDEREÇO DA IMAGEM"> </a><br />
<br />
<a href="COLOQUE O LINK DA PÁGINA AQUI"> <img src="COLOQUE AQUIO ENDEREÇO DA IMAGEM"width="550" height="500"> </a><br />
<br />
<a href="COLOQUE O LINK DA PÁGINA AQUI"> <img src="COLOQUE AQUIO ENDEREÇO DA IMAGEM"width="550" height="500"> </a><br />
<br />
<a href="COLOQUE O LINK DA PÁGINA AQUI"width="550" height="500"> <img src="COLOQUE AQUIO ENDEREÇO DA IMAGEM"> </a><br />
<br />
<a href="COLOQUE O LINK DA PÁGINA AQUI"> <img src="COLOQUE AQUIO ENDEREÇO DA IMAGEM"> </a><br />
<br />
COLOQUE AQUI O TEXTO<br />
<br />
</div><img src="COLOQUE AQUI O ENDEREÇO DA IMAGEM "width="600" height="450" alt="funny dog" style="margin-left:0px;" /><br />
<br />
<br />
</div></div></div>

Pure CSS Light Box Example - Devin Olsen

Off

COLOQUE AQUI O TEXTO

Pure CSS Light Box Example - Devin Olsen<br />
<br />
<style type="text/css">
html,body{height:100%;}

#box {width:650px; text-align:left; margin-left:auto; margin-right:auto; margin-top:20px; border:#333333 dashed; border-width:1px; padding:10px;}

.onLight {padding:2px; width:20px; background:#000000; border:#333 solid; border-width:1px; cursor:pointer;}
.onLight:hover div, .offLight {display:block;}

.content {width: 600px; height: 460px; border: solid 2px #fff; background: #ccc; margin:20px auto; position:absolute; z-index:200; top: 230px; display:none; padding:20px;}

Lightbox

menu do blog

Páginas

quinta-feira, 24 de novembro de 2011

segunda-feira, 5 de setembro de 2011

Light Box Example com barra rolante

Seguidores

Arquivo do blog

Quem sou eu