Efeito Light box Semantico puro css3

Bem galera hoje vou trazer um efeito bem útil para quem quer poupar tempo de ficar criando postagens para explicar uma simples palavra ou mostrar um video numa outra página se não a mesma.

Demonstração

bem galera é simples assim procure por ]]></b:skin> e cole o código abaixo, ACIMA DELA

/* Lightbox
----------------------------------------------- */
   .lightbox { left: -999em; position: absolute; }
   .lightbox { left: -999em; position: absolute; }
   .lightbox:target { bottom: 0; left: 0; right: 0; top: 0; position: absolute; }
   .lightbox:target .close a { background: rgba(0, 0, 0, 0.75);bottom: 0; left: 0; right: 0; top: 0; position: absolute; z-index: 1; }
   .close span { color: #FFFFFF; font-size: 2em; text-indent: 0; position: absolute; right: 0.5em; top: 0.5em; }
   .close {text-indent: -999em;}
   .lightbox:target div { background: #FFFFFF; position: absolute; left: 50%; top: 20%; z-index: 99; }
   .w60p { margin-left: -30%; width: 60%; -webkit-border-radius: 10px ;} .w300 { margin-left: -150px; width: 300px; } .w640 { margin-left: -320px; width: 640px; }
   .h60 { height: 60px; margin-top: -30px; } .h400 { height: 400px; margin-top: 0px; } .h386 { height: 386px; margin-top: 0px; }
   .scroll { overflow-y: scroll; padding: 0 1em; }
   .boxfocus { bottom: 0; left: 0; right: 0; top: 0; position: absolute; }
   .boxfocus div { background: #FFFFFF; position: absolute; left: 50%; top: 50%; z-index: 99; }
   .boxfocus .close a { bottom: 0; left: 0; right: 0; top: 0; position: absolute; z-index: 1; }

Agora vamos entender como incorpora isso do jeito que você querer preste bem atenção porque é facil se perder nesse código apesar de ser só html bom só copiar e substituir onde for pedido cole o código abaixo ou no corpo da própria postagem ou no gadget html/Javascript


Lightbox com Links
Light Box com Link/IMAGEM

 <a href="#Imagem1">Texto do Link</a><br />
<div class="lightbox" id="Imagem1">
<div class="w300 h60">
<img alt="TITULO DA IMAGEM" height="ALTURA DA IMAGEM DA LIGHTBOX" src="LINK DA IMAGEM QUANDO CLICAR NA LIGHTBOX" width="LARGURA DA IMAGEM DALIGHTBOX" />
   </div><div class="close">
<a href="#" title="Clique para fechar">Close X</a></div>
</div>

Bem galera vou explicar, depois de # vc ta vendo escrito Imagem1 sempre comece com #example, dai intaum na linha de baixo esta <div class="lightbox" id="Imagem1"> vc sempre colocará o texto que esta depois da #,sendo como no example que ficou <a href="#example">...</a> dai na linha ficaria <div class="lightbox" id="example">, não esqueça de altera a altura e largura da imagem e substituir o texto pelo link da imagem e o titulo da mesma! Clique para fechar é o title que aparece pra fechar a lightbox


Light Box com Link/TEXTO/IMAGEM A DIREITA/ESQUERDA

 <a href="#content" title="Content Lightbox">LINK DO TEXTO DA LIGHTBOX</a>
  <br />
<div class="lightbox" id="content">
<div class="w60p h400 scroll">
<h2>TITULO AONDE FICA ACIMA DO TEXTO DA LIGHTBOX</h2>
<img height="150px;" imageanchor="1" src="LINK DA IMAGEM" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;" width="110px;" />TEXTO DA LIGHTBOX</div>
<div class="close">
<a href="#" title="Clique aqui para fechar">Close X</a></div>
</div>

Bem galera essa é um pouquinho mais complicada mais não é muito diferente, é assim a parte depois do href é a mesma coisa você pode mudar o <a href="#content" title="texto">....</a> para <a href="#exampletexto" title="texto">...</a> e sempre alterar o da linha abaixo que é <div class="lightbox" id="content"> para <div class="lightbox" id="exampletexto" não esqueçam que se alterar depois do #.... sempre terão que alterar o id="..." par ao mesmo escrito depois da #.
o resto é só substituir caso queira redimensionar a imagem só mudar o height="150px;" para a altura preferencial e o width="110px;" para a largura que preferir, para mudar a imagem de lado só alterar left por right.

Light Box com Link/VIDEO

<a href="#video" title="Video Lightbox">LINK DA LIGHTBOX</a>
  <br />
<div class="lightbox" id="video">
<div class="w640 h386">
CÓDIGO DO VIDEO COM HEIGHT DE 390PX E WIDTH 640PX
   </div>
<div class="close">
<a href="#" title="Clique aqui para fechar">Close X</a></div>
</div>

Bem galera mesma coisa acho que vocês ja entenderão o papel do # então só fazer a mesma coisa e ir substituindo onde pede. bom é isso galera só mais uma explicação antes de encerrar o tutorial

Lightbox com Imagens
Os lightbox com imagem quee u fiz é só você substituir o LINK DA LIGHTBOX por <img src="LINK DA IMAGEM " height="altura da imagem" width="largura da imagem" title="titulo da imagem"/> bom é isso galera até próximo tutorial qualquer duvida to no xat!