Estilización de elementos en pantalla completa con CSS | Desarrollo web

Introducción

En este laboratorio, exploraremos cómo usar el selector de pseudo-elemento CSS :fullscreen para aplicar estilos a un elemento cuando está en modo pantalla completa. Crearemos un botón usando Element.requestFullscreen() para poner el elemento en pantalla completa con el fin de previsualizar el estilo. Al final de este laboratorio, tendrás una mejor comprensión de cómo crear elementos en pantalla completa con estilos personalizados usando CSS.

Este es un Guided Lab, que proporciona instrucciones paso a paso para ayudarte a aprender y practicar. Sigue las instrucciones cuidadosamente para completar cada paso y obtener experiencia práctica. Los datos históricos muestran que este es un laboratorio de nivel principiante con una tasa de finalización del 100%. Ha recibido una tasa de reseñas positivas del 100% por parte de los estudiantes.

Pantalla Completa

index.html y style.css ya se han proporcionado en la máquina virtual.

Para dar estilo a un elemento en modo pantalla completa, puedes usar el selector de pseudo-elemento CSS :fullscreen. También puedes crear un botón que ponga el elemento en pantalla completa con fines de vista previa usando un <button> y Element.requestFullscreen(). Aquí hay un ejemplo de código:

<div class="container">
  <p>
    <em
      >Haz clic en el botón siguiente para poner el elemento en modo pantalla
      completa.
    </em>
  </p>
  <div class="element" id="element">
    <p>Cambio de color en modo pantalla completa!</p>
  </div>
  <br />
  <button
    onclick="var el = document.getElementById('element'); el.requestFullscreen();"
  >
    ¡Entrar en Pantalla Completa!
  </button>
</div>

.container {
  margin: 40px auto;
  max-width: 700px;
}

.element {
  padding: 20px;
  height: 300px;
  width: 100%;
  background-color: skyblue;
  box-sizing: border-box;
}

.element p {
  text-align: center;
  color: white;
  font-size: 3em;
}

/* Para Internet Explorer */
.element:-ms-fullscreen p {
  visibility: visible;
}

/* Para navegadores modernos */
.element:fullscreen {
  background-color: #e4708a;
  width: 100vw;
  height: 100vh;
}

Haga clic en 'Go Live' en la esquina inferior derecha para ejecutar el servicio web en el puerto 8080. Luego, puede actualizar la pestaña Web 8080 para previsualizar la página web.

Resumen

¡Felicidades! Has completado el laboratorio de Pantalla Completa. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.