Saltar al contenido

Cómo crear un efecto Lightbox sólo con CSS

16 mayo, 2018
Lightbox

Gracias a CSS podemos crear hermosas animaciones sin necesidad de utilizar plugins externos. Es por ello que hoy os voy a enseñar a crear vuestro propio Lightbox. ¿Te invito a que pruebes!

Lightbox y sus plugins

Generalmente para realizar este efecto se suelen utilizar librerías de JavaScript. En JQuery podemos encontrar algunos conocidos como Lightbox por Lokesh Dhakar, o FancyBox.

Si bien nos ahorra tiempo tecleando código, pueden también afectar al rendimiento de nuestra web. Por tanto mi recomendación es usarlos únicamente en casos extremadamente necesarios.

Para evitarlo vamos a crearlo nosotros mismo utilizándo únicamente Html5 y Css3, generando así un código limpio para nuestra web.

 

Crea una Barra de Progreso Animada en CSS3

 

El Html

Creamos un archivo html. En éste incluimos una imagen para aplicarle el efecto.

El CSS3

Aquí nos encargaremos de generar el efecto mediante el uso de transiciones y transformaciones en CSS3.

 

Demo

Aquí os dejo una demostración funcional del código anteriormente expuesto. Espero que os sea de gran utilidad y podáis utilizarlos en vuestros proyectos web.

Ver mi Snippet Responsive CSS LightBox by Antonio José (@ajmorales73) on CodePen.

 

Olvidate del Copy/Paste y ve escribiendo el código poco a poco y viendo los resultados. Así aprenderás y te convertirás en un ninja del diseño web. 😉

No olvides dejarme tus estrellas, likes y compartir en vuestras redes sociales. ¡Gracias!

 

Contenido Relacionado