Leyendo SigT me encuentro con este tutorial, interesante para aquellos que no deseen utilizar javascript para crear el efecto de Ligthbox, pueden usar esta técnica utilizando únicamente CSS.
Pueden ver el resultado final de este tutorial. Trata solamente de mostrar 2 divs al momento de dar “clic” uno el overlay que hará que nuestra pantalla se haga un poco más oscura y content que será donde mostraremos nuestro contenido.
efecto de lightbox con CSS…
CSS se ha convertido en la nueva manera (junto con otras tecnologías) de diseñar en la web. Cosas que antes se hacían de otra manera (JavaScript, etc.) ahora se hacen con CSS. Este es un tutorial que me ha parecido muy interesante, para hacer el efe…
[...] fin, he encontrado temas y temas y más temas dentro de este sitio (como este porque me fascinan los CSS) y la verdad, felicidades a su [...]
Código open source para maquetación de páginas web, flexible y rápido, basado en estandares CSS. La documentación está en español ;) markercss.com
Con este sencillo script, podras generar thumbnails o imagenes en miniatura al vuelo de las imágenes de tu página, bastante fácil de implementar. Tan solo debes subir un archivo .php a tu servidor y llamar a la imagen con una serie de parámetros para configurar tamaño y calidad… http://code.google.com/p/timthumb/
Woothemes ah liberado un hermosos set de iconos, estos han sido diseñados por WeFunction. woothemes.com
Linkwithin es un plugin para wordpress que nos permite rescatar los post perdidos al buscar los post relacionados al artículo que estemos escribiendo y enlazándolo con la primera imagen del artículo… linkwithin.com
Impresionante lista de tutoriales, todos con una calidad sorprendente para diseñaores gráficos o web realmente vale la pena revisarlos. webdesigndev.com
7 comentarios para Crear el efecto de lightbox solo con CSS
Muy bueno infectedfx, ya hacia falta algo asi sin tener que usar javascript
jaaja sinpatico!
Bueno hay que ser un poco realistas, es imposible por el momento realizar el efecto de lightbox sin un poco de javascript, aunque si bien es cierto que es casi un 80% de css y un 20 de js. Recordar que se debe invocar el id del elemento con el getElementById y crear el efecto fade. Muy buena informacion de cualquier manera…
che, pero eso de 100% no tiene nada…. o_O
en ie no anda ni para atrás. :-X
igual se agradece.
saludos!
@Alejandro Torres Si bro, apenas está como en etapa de desarrollo pero puede ser una buena opción.
@rene Estoy de acuerdo bro, además actualmente ya incluir librerías como mootools ó scriptaculous es muy común y vamos por unos kb más ese bonito efecto de lightbox vale la pena, pero solo es una alternativa.
@torka Cierto, en IE falla, lástima, pero como decía anteriormente, es solo una alternativa que se anda desarrollando
habrá que esperar que se pueda fixear.
Que tal?
Como puedo hacer el efecto de light box automaticamentre cuando carga la pagina, sin necesidad de hacer click
Que tal, yo implemente este efecto en la galeria de mi sitio web y la verdad es que es muy buena opcion.