Lightbox fet amb semàntica CSS3

Ja fa dies, vaig veure aquest article en el qual s’explicava com aconseguir un producte semblant al que obtenim amb Lightbox o Shadorbox però només en CSS i, evidentment, prescindint dels bonics efectes (o no) que poden fer les dues llibreries esmentades.

Podeu veure un exemple en viu del resultat que han obtingut i fer-te una idea de què podries arribar aconseguir només amb CSS i quan fora necessari l’ús del JavaScript.

Segons l’article original, s’està arribant a un ús inadequat de JavaScript, amb frameworks com jQuery, ja que donen uns resultats excel·lents a la vista. Tot i aquest darrer motiu, troben necessari donar una solució a aquest problema i per això mostren com fer-ho per als fanàtics del CSS.

Anem a veure una mica el codi que utilitzen. Anem al gra, és a dir, veurem com cal declarar el div que volem que formi el “Lightbox” i com definir els estils CSS per a que actuï de la manera desitjada.

Primer l’html:

1. <div class=”lightbox” id=”content”><div class=”W60p h400 scroll”>
2. <h2>El nostre contingut</h2>
3. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent quis felis suscipit tellus euismod varius quis ut nibh. Curabitur in ante nunc, vitae venenatis dui.</p>
4. <p><a href=”#” title=”Close This Content Lightbox”>Tanca <span>X</span></a></p>
5. </div></div>

El css que ens faria falta:

1. html, body { height: 100%; overflow: hidden; width: 100%; margin: 0; padding: 0; }
2. body { overflow-y: auto; }
3. .lightbox { left: -999em; position: absolute; }
4. .lightbox:target { bottom: 0; left: 0; right: 0; top: 0; position: absolute; }
5. .lightbox:target .close a { background: rgba(0, 0, 0, 0.75); bottom: 0; left: 0; right: 0; top: 0; position: absolute; z-index: 1; }
6. .close span { color: #FFFFFF; font-size: 2em; text-indent: 0; position: absolute; right: 0.5em; top: 0.5em; }
7. .close {text-indent: -999em;}

A nivell general aquest seria el secret per tal d’aconseguir el lightbox, tot i que no s’acaba aquí i, si ho vols utilitzar el recomano que vagis a Pixelovers i segueixis un per un els passos que expliquen, per tal d’aconseguir un bon funcionament amb tots els navegadors.

Tags: CSS, JavaScript, jQuery, lightbox, Programació, shadowbox, Web

Articles relacionats

Esborrar nodes del DOM en PHP

Deck.js – Presentacions en HTML5

Mozilla presenta WebAPI

OOCSS (2a part), profunditzant en els widgets

La setmana a Twitter