Como crear una ventana modal o Lightbox solo utilizando CSS3?

Alejandro_99 · Septiembre 30, 2014, 02:53:29 PM

Hola, como crear una ventana modal o Lightbox solamente utilizando CSS3 sin utilizar javascript, he visto algunos ejemplos en Google pero la verdad no me convencieron mucho por tal motivo si alguien me puede aportar algún ejemplo o recomendarme algo bienvenido sea¡¡

ANTRAX · Septiembre 30, 2014, 03:04:42 PM

Acá te dejo un ejemplo, espero que te sirva

Código: html5

<!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15"> 
<title>Lightbox</title> 
<style type="text/css">

.general  {
background-color:gray;
font-family:arial, tahoma, verdana, sans serif;
font-size:14px;
}
 
#lightbox div{
visibility:hidden;
position:absolute;
height:1%;
width:1%;
background-color:black;
opacity: 1;
}

#lightbox :target {
visibility:visible;
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
height:60%;
width:40%;
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.4);
-webkit-transition: all 0.2s ease-in;
-moz-transition: all 0.2s ease-in;
background-color:#f3f3f3;
border-radius: 12px;
border: 1px solid gray;
padding: 10px;
z-index:100;
opacity: 1;
}

.background22 {
position: absolute;
width:100px;
height:100px;
opacity:0.5;
background-color=black;
}

.fadeout  {
visibility:hidden;
top:0; 
bottom:0;
left:0;
right:0;
position:absolute;
margin:auto;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
background-color:black;
opacity:0.1;
}

#close {
position:absolute;
top:-10px;
right:-10px;
width:18px;
height:16px;
background-color:black;
text-decoration:none;
font-family:arial, tahoma, verdana, sans serif;
padding-left:1px;
padding-top:1px;
text-align:center;
font-size:12px;
color:white;
border:2px solid grey;
border-radius:25px;
opacity:1;
}


 
</style> 
</head> 

<body id="lightbox" class="general">
<a href="#light-uno">Adamatik</a> 
<a href="#light-dos">BlackBird</a> 
<a href="#light-tres">PhanPad</a> 


  <div id="light-uno" class="fadeout"> 
    <a href="#none" id="close">X</a> 
    Adamatik
  
  </div> 

  <div id="light-dos" class="fadeout"> 
    <a href="#none" id="close">X</a> 
    BlackBird
  </div> 

  <div id="light-tres" class="fadeout"> 
    <a href="#none" id="close">X</a> 
    Phanpad
  </div> 

</body> 
</html>

DEMO: No tienes permitido ver los links. Registrarse o Entrar a mi cuenta

Como crear una ventana modal o Lightbox solo utilizando CSS3?

Alejandro_99

Septiembre 30, 2014, 02:53:29 PM

ANTRAX

Septiembre 30, 2014, 03:04:42 PM #1