Tecnología

Inicio

Cómo crear una mesa de luz HTML

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.