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!
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
Creamos un archivo html. En éste incluimos una imagen para aplicarle el efecto.
<div id="content">
<h2>Efecto LightBox en CSS3</h2>
<a href="#image1" class="wiggle"><img src="http://placehold.it/150x150"/></a>
<div class="lightbox short-animate" id="image1">
<img class="long-animate" src="http://placehold.it/650x650"/>
</div>
<div id="lightbox-controls" class="short-animate">
<a id="close-lightbox" class="long-animate" href="#!">Close Lightbox</a>
</div>
</div>
Aquí nos encargaremos de generar el efecto mediante el uso de transiciones y transformaciones en CSS3.
* {
margin:0;
padding:0;
box-sizing:border-box;
}
html,body {
height:100%;
max-height:100%;
}
body {
background:#476C9B;
}
h2 {
font-weight:200;
font-size:40px;
padding:50px 0;
text-align:center;
color:#ADD9F4;
}
.wiggle {
display:block;
margin:0 auto;
width:150px;
height:150px;
box-shadow:8px 8px 1px 0 rgba(0,0,0,.15);
}
.wiggle:hover {
-webkit-animation:none;
}
.short-animate {
-webkit-transition:.5s ease-in-out;
-moz-transition:.5s ease-in-out;
-ms-transition:.5s ease-in-out;
-o-transition:.5s ease-in-out;
transition:.5s ease-in-out;
}
.long-animate {
-webkit-transition: .5s .5s ease-in-out;
-moz-transition: .5s .5s ease-in-out;
-ms-transition: .5s .5s ease-in-out;
-o-transition:.5s .5s ease-in-out;
transition:.5s .5s ease-in-out;
}
html,body {
height:100%;
min-height:100%;
}
.lightbox {
position:fixed;
top:-100%;
bottom:100%;
left:0;
right:0;
background:#984447;
z-index:501;
opacity:0;
}
.lightbox img {
position:absolute;
margin:auto;
top:0;
left:0;
right:0;
bottom:0;
max-width:0%;
max-height:0%;
}
#lightbox-controls {
position:fixed;
height:70px;
width:70px;
top:-70px;
right:0;
z-index:502;
background:rgba(0,0,0,.1);
}
#close-lightbox {
display:block;
position:absolute;
overflow:hidden;
height:50px;
width:50px;
text-indent:-5000px;
right:10px;
top:10px;
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-ms-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
}
#close-lightbox:before {
content:'';
display:block;
position:absolute;
height:0px;
width:3px;
left:24px;
top:0;
background:white;
border-radius:2px;
-webkit-transition: .5s .5s ease-in-out;
-moz-transition: .5s .5s ease-in-out;
-ms-transition: .5s .5s ease-in-out;
-o-transition:.5s .5s ease-in-out;
transition:.5s .5s ease-in-out;
}
#close-lightbox:after {
content:'';
display:block;
position:absolute;
width:0px;
height:3px;
top:24px;
left:0;
background:white;
border-radius:2px;
-webkit-transition: .5s 1s ease-in-out;
-moz-transition: .5s 1s ease-in-out;
-ms-transition: .5s 1s ease-in-out;
-o-transition:.5s 1s ease-in-out;
transition:.5s 1s ease-in-out;
}
.lightbox:target {
top:0%;
bottom:0%;
opacity:1;
}
.lightbox:target img {
max-width:100%;
max-height:100%;
}
.lightbox:target ~ #lightbox-controls {
top:0px;
}
.lightbox:target ~ #lightbox-controls #close-lightbox:after {
width:50px;
}
.lightbox:target ~ #lightbox-controls #close-lightbox:before {
height:50px;
}
@-webkit-keyframes wiggle {
0% {
-webkit-transform:rotate(2deg);
}
20% {-webkit-transform:rotate(-2deg);}
40% {-webkit-transform:rotate(2deg);}
60% {-webkit-transform:rotate(-2deg);}
80% {-webkit-transform:rotate(2deg);}
100% {-webkit-transform:rotate(-2deg);}
}
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!
¿Quieres poner texto detrás de un video? Aprende cómo con CapCut en este sencillo tutorial…
Aprende a crear voces con IA sorprendentemente reales para vídeos, podcasts y más. Lee nuestro…
TikTok se reinventa con TikTok Notes: una app de fotos y estilo de vida. Conoce…
¡Descubre Haiper! La alternativa gratuita a Sora de OpenAI para crear vídeos increíbles. Fácil de…
¿Buscas una alternativa a ChatGPT? Mistral AI y su chatbot Le Chat ofrecen una experiencia…
Más que un resumen: Adobe AI Assistant te ayuda a navegar y comprender PDFs con…
Esta página utiliza cookies para mejorar su rendimiento
Ver comentarios