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!

 

Calificación de Lectores
[Total: 1 Media: 5]

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Usamos cookies para personalizar su experiencia. Si sigue navegando estará aceptando su uso. Más Información | Cerrar