Micaela 23 de enero de 2009 a las 11.00
   Imprimir artículo
elWebmaster.com

Simular un lightbox con CSS


Si te encuentras necesitando añadir un lightbox en tu sitio web probablemente te resultará muy útil la siguiente técnica que nos brindan desde la web The art of hand coding.

Se trata de un tutorial que nos enseñará de qué manera podemos simular el efecto de un lightbox simplemente mediante la utilización de CSS, para que no sea necesaria la utilización de ningún script JavaScript pre-fabricado.

El HTML debería lucir así:

<div id="hideshow" style="visibility:hidden;">
<div id="fade"></div>
<div class="popup_block">
<div class="popup">
<a href="javascript:hideDiv()"><img src="icon_close.png" class="cntrl" /></a>
<h3>Example of Styling CSS Popups</h3>
<p>Eu refero pertineo vulpes, molior, vel. Mos paulatim lobortis sed pneum antehabeo, tristique damnum dolor venio mauris, decet sudo, ibidem lucidus.
</p>
</div>
</div>
</div>

Y el CSS:

#fade {
background: #000;
position: fixed;
width: 100%;
height: 100%;
filter:alpha(opacity=80);
opacity: .80;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; /*--IE 8 Transparency--*/
left: 0;
top: 0;
z-index: 10;
}

body {
height: 100%;
margin: 0;
padding: 0;
font: normal 12px Verdana, Arial, Helvetica, sans-serif;
background: url(body_bg.gif);
position: relative;
}

#hideshow {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}

.popup_block {
background: #ddd;
padding: 10px 20px;
border: 10px solid #fff;
float: left;
width: 480px;
position: fixed;
top: 20%;
left: 50%;
margin: 0 0 0 -250px;
z-index: 100;
}

.popup_block .popup {
float: left;
width: 100%;
background: #fff;
margin: 10px 0;
padding: 10px 0;
border: 1px solid #bbb;
}

.popup h3 {
margin: 0 0 20px;
padding: 5px 10px;
border-bottom: 1px solid #bbb;
font-size: 1.5em;
font-weight: normal;
}

.popup p {
padding: 5px 10px;
margin: 5px 0;
}

.popup img.cntrl {
position: absolute;
right: -20px;
top: -20px;
}


Haz clic aquí para ver un demo>>

Para leer el tutorial completo haz clic aquí>>


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (4)

  1. Boloo dice:

    Pues habrá que probarlo. Gran trabajo 😛

  2. David Gómez Alcalá dice:

    Parece sumamente interesante, lo probaré hoy mismo en mi sitio web, me queda la duda de cómo sería con un JavaScript prefabricado. Buen trabajo.

  3. Isabelle dice:

    Wow! lo que una idea! ¡Qué concepto! Hermoso .. Increíble …

  4. Karl Denver dice:

    De donde descargo los las imagenes utilizadas en este codigo?

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder