.: HosiriS :.

Informatica e non solo

Effetto lightbox con i CSS3

Posted by hosiris su marzo 28, 2011

In questo post vedremo come creare un effetto lightbox senza dover per forza usare del codice Javascript, alleggerendo un po’ il carico sul browser. Premetto che non è una mia soluzione (quando vedi certe cose ti dici sempre: “ma perché non ci ho pensato io? in fondo non è difficile”), ma cercherò di tradurre le parti più importanti.

Iniziamo con l’inserire il seguente codice sulla nostra pagina HTML:

<div id="container">
    <div id="header">
        <h1>Lightbox CSS</h1>
    </div>
    <div id="content">
        <h2>Cliccare sui link per vedere l'effetto in azione</h2>
        <p>Questo è un codice di esempio che mostra come lavora l'effetto lightobox. Clicca <a href="#lightbox">qui</a></p>
    </div>
</div>
<!--[if IE]>
<div class="ie-bg"></div>
<![endif]-->

Adesso inseriamo i vari elementi che saranno visualizzati dopo il click, utilizziamo una lista come segue:

<ul id="lightboxes">
    <li id="lightbox">
        <div class="box">
            <h3>Qui</h3>
            <p>
                Dopo il click viene visualizzata questa parte.
            </p>
            <a href="#" class="close" title="close window">x</a>
        </div>
    </li>
</ul>

Adesso non ci resta che creare il nostro foglio di stile. Inseriamo il seguente codice:

#lightboxes {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
list-style-type: none;
text-align: left;
overflow: hidden;}
#lightboxes li {
width: 100%;
height: 9999px;
position: relative;
background: rgba(0,0,0,.5);}
#lightboxes .box {
position: absolute;
width: 400px;
height: 400px;
left: 50%;
top: 50px;
border: 10px solid #999;
margin-left: -230px;
background-color: #fff;
padding: 20px;}
#lightboxes h3 {
font-weight: normal;
font-size: 1.8461em;
margin: 0 0 0.4583em 0;}
#lightboxes a.close {
position: absolute;
top: 20px;
right: 20px;
display: block;
width: 20px;
line-height: 20px;
text-align: center;
background-color: #ddd;
text-decoration: none;
font-weight: bold;
color: #999;
font-size: 1.2em;}
#lightboxes a.close:hover {
background-color: #999;
color: #fff;}
#lightboxes #close {
background-color: transparent;
z-index: -1;}
</style>
<!--[if IE]>
<style type="text/css">
html {
overflow-y: auto;}
#lightboxes {
position: relative;}
#lightboxes .ie-bg {
background: #000;
position: absolute;
z-index: -1;
width: 100%;
height: 100%;
filter: alpha(opacity=75);}
</style>
<![endif]-->

Da notare che come sempre IE deve creare problemi e che quindi è stato necessario aggiungere una parte specifica con un div a parte.
Il codice non mi sembra particolarmente complesso (ecco perchè mi sono detto… ma guarda queste che colpo di genio) ed anche il funzionamento è abbastanza logico: al click del link veniamo indirizzati verso il div associato che anziché venir mostrato a parte (di sotto, di lato…) viene visualizzato sopra il precedente testo.
Come aggiungere più link? Facile capire che ad ogni nuovo link deve corrispondere un elemento nella lista con un elemento class uguale all’ancora del link.

Fonte originale by Jenna Smith con il codice completo per un primo esempio.

Lascia un commento

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...

 
%d blogger cliccano Mi Piace per questo: