-
Cómo crear una mesa de luz HTML
-
La mesa de luz es una herramienta de diseño web que crea una pequeña caja que muestra el contenido como imágenes o texto en el mismo que aparece en el centro de la pantalla cuando se hace clic en un enlace. Hay muchas variaciones de la creación de una caja de luz, y la mayoría de ellos requieren que se use algo de JavaScript. Hay, sin embargo, una manera de crear un efecto de luz en su sitio web utilizando sólo código HTML.Instrucciones
1 Abra un editor de texto como Bloc de notas o TextEdit. Introducir en el código CSS en la parte de encabezado de su página. Primer tipo "<style type =" text / css ">" en la página HTML. Siga esto con el código:
.black_overlay {
display: none;
position: absolute;
arriba: 0%;
izquierda: 0%;
width: 100%;
altura: 100%;
background-color: negro;
z-index: 1001;
-moz-opacidad: 0,8;
opacidad: 0,80;
filtro: alfa (opacidad = 80);
}
.white_content {
display: none;
position: absolute;
superior: 25%;
izquierda: 25%;
anchura: 50%;
altura: 50%;
padding: 16px;
frontera: 16px sólido de color naranja;
background-color: blanco;
z-index: 1002;
overflow: auto;
}
Para terminar el encabezado con "</ style>"
2 Tipo "<div id =" "class =" luz white_content "> Pruebas ... Los mensajes de texto </ div> <div id =" fade "class =" black_overlay "> </ div>" en la sección del cuerpo de su sitio web. Esto va a definir el contenido que desea que aparezca en su mesa de luz. Cualquier HTML puede insertarse aquí.
3 Añadir un botón "Cerrar" de su caja de luz escribiendo "<a href =" javascript: void (0) "onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a>" dentro del contenido de su mesa de luz.
4 Crear un enlace a la mesa de luz escribiendo "<a href =" javascript: void (0) "onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">Click Aquí </a> "Sustituir" Haga clic aquí "con el texto que desea para su enlace.
5 Guarde el archivo. Ahora ha creado una mesa de luz con sólo HTML.
Consejos y advertencias
- Integrar su caja de luz en una sección de su sitio web. Son especialmente buenos para la visualización de imágenes o videos.