comment
IRC Chat
play_arrow
Este sitio utiliza cookies propias y de terceros. Si continúa navegando consideramos que acepta el uso de cookies. OK Más Información.

Como crear una ventana modal o Lightbox solo utilizando CSS3?

  • 1 Respuestas
  • 958 Vistas

0 Usuarios y 1 Visitante están viendo este tema.

Desconectado Alejandro_99

  • *
  • Underc0der
  • Mensajes: 453
  • Actividad:
    0%
  • Reputación 1
  • Humildad y sencillez ante todo.
    • Ver Perfil
« en: 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¡¡



Conectado ANTRAX

  • *
  • Administrator
  • Mensajes: 5400
  • Actividad:
    40%
  • Reputación 31
  • ANTRAX
    • Ver Perfil
    • Underc0de
    • Email
  • Skype: underc0de.org
  • Twitter: @Underc0de
« Respuesta #1 en: Septiembre 30, 2014, 03:04:42 pm »
Acá te dejo un ejemplo, espero que te sirva

Código: HTML5
  1. <!DOCTYPE HTML>
  2. <No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  3. <No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  4. <No tienes permisos para ver links. Registrate o Entra con tu cuenta http-equiv="Content-Type" content="text/html; charset=iso-8859-15">
  5. <No tienes permisos para ver links. Registrate o Entra con tu cuenta>Lightbox</No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  6. <No tienes permisos para ver links. Registrate o Entra con tu cuenta type="text/css">
  7.  
  8. .general  {
  9. background-color:gray;
  10. font-family:arial, tahoma, verdana, sans serif;
  11. font-size:14px;
  12. }
  13.  
  14. #lightbox div{
  15. visibility:hidden;
  16. position:absolute;
  17. height:1%;
  18. width:1%;
  19. background-color:black;
  20. opacity: 1;
  21. }
  22.  
  23. #lightbox :target {
  24. visibility:visible;
  25. position:absolute;
  26. top:0;
  27. bottom:0;
  28. left:0;
  29. right:0;
  30. margin:auto;
  31. height:60%;
  32. width:40%;
  33. box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.4);
  34. -webkit-transition: all 0.2s ease-in;
  35. -moz-transition: all 0.2s ease-in;
  36. background-color:#f3f3f3;
  37. border-radius: 12px;
  38. border: 1px solid gray;
  39. padding: 10px;
  40. z-index:100;
  41. opacity: 1;
  42. }
  43.  
  44. .background22 {
  45. position: absolute;
  46. width:100px;
  47. height:100px;
  48. opacity:0.5;
  49. background-color=black;
  50. }
  51.  
  52. .fadeout  {
  53. visibility:hidden;
  54. top:0;
  55. bottom:0;
  56. left:0;
  57. right:0;
  58. position:absolute;
  59. margin:auto;
  60. -webkit-transition: all 0.2s ease-out;
  61. -moz-transition: all 0.2s ease-out;
  62. background-color:black;
  63. opacity:0.1;
  64. }
  65.  
  66. #close {
  67. position:absolute;
  68. top:-10px;
  69. right:-10px;
  70. width:18px;
  71. height:16px;
  72. background-color:black;
  73. text-decoration:none;
  74. font-family:arial, tahoma, verdana, sans serif;
  75. padding-left:1px;
  76. padding-top:1px;
  77. text-align:center;
  78. font-size:12px;
  79. color:white;
  80. border:2px solid grey;
  81. border-radius:25px;
  82. opacity:1;
  83. }
  84.  
  85.  
  86.  
  87. </No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  88. </No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  89.  
  90. <No tienes permisos para ver links. Registrate o Entra con tu cuenta id="lightbox" class="general">
  91. <No tienes permisos para ver links. Registrate o Entra con tu cuenta href="#light-uno">Adamatik</No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  92. <No tienes permisos para ver links. Registrate o Entra con tu cuenta href="#light-dos">BlackBird</No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  93. <No tienes permisos para ver links. Registrate o Entra con tu cuenta href="#light-tres">PhanPad</No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  94.  
  95.  
  96.   <No tienes permisos para ver links. Registrate o Entra con tu cuenta id="light-uno" class="fadeout">
  97.     <No tienes permisos para ver links. Registrate o Entra con tu cuenta href="#none" id="close">X</No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  98.     Adamatik
  99.  
  100.   </No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  101.  
  102.   <No tienes permisos para ver links. Registrate o Entra con tu cuenta id="light-dos" class="fadeout">
  103.     <No tienes permisos para ver links. Registrate o Entra con tu cuenta href="#none" id="close">X</No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  104.     BlackBird
  105.   </No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  106.  
  107.   <No tienes permisos para ver links. Registrate o Entra con tu cuenta id="light-tres" class="fadeout">
  108.     <No tienes permisos para ver links. Registrate o Entra con tu cuenta href="#none" id="close">X</No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  109.     Phanpad
  110.   </No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  111.  
  112. </No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  113. </No tienes permisos para ver links. Registrate o Entra con tu cuenta>

DEMO: No tienes permisos para ver links. Registrate o Entra con tu cuenta


 

¿Te gustó el post? COMPARTILO!



¿Como fundear un "exe"? dejarle sin avs

Iniciado por iquitoshack

Respuestas: 5
Vistas: 3085
Último mensaje Junio 07, 2012, 02:52:34 pm
por Sanko
Usar memoria externa como memoria interna.

Iniciado por CthulhuRise97

Respuestas: 4
Vistas: 2328
Último mensaje Abril 30, 2018, 05:35:43 pm
por NERV0
[SOLUCIONADO] ¿Como usar los exploits de Joomla con una página que usa joomla?

Iniciado por Cruef

Respuestas: 5
Vistas: 2594
Último mensaje Febrero 07, 2013, 07:46:41 pm
por Sanko
Cómo uso la "/" para hacer un select en una tabla

Iniciado por tetano32

Respuestas: 3
Vistas: 981
Último mensaje Diciembre 20, 2017, 04:41:12 pm
por tetano32
Como obtener informacion de la DB "mysql" con SQLMap

Iniciado por DirectxTro

Respuestas: 3
Vistas: 1366
Último mensaje Marzo 09, 2016, 08:01:03 pm
por seth