Ver un Elemento cuando está la Pantalla Completa con CSS

CSS febrero 12, 2019

La pseudo-clase :fullscreen se utiliza para incluir un elemento que se muestra cuando el naqvegador está a pantalla completa.

En este ejemplo vemos como se utiliza:

HTML
<div class="container">
  <p><em>Haz clic para ver el elemento en pantalla completa</em></p>
  <div class="elemento" id="element"><p>Se cambiará el color en pantalla completa</p></div>
  <br />
  <button onclick="var el = document.getElementById('element'); el.requestFullscreen();">
    Ir a pantalla Completa
  </button>
</div>

 

CSS
.container {
  margin: 20px auto;
  max-width: 500px;
}

.elemento{
  padding: 20px;
  height: 500px;
  width: 100%;
  background-color: #008ec2;
}

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

.elemento:-ms-fullscreen p {
  visibility: visible;
}

.elemento:fullscreen {
  background-color: pink;
  width: 100vw;
  height: 100vh;
}

 

Explicación

Utilizamos :fullscreen para seleccionar y diseñar el elemento que se mostrará a pantalla completa.

En este ejemplo creamos un elemento con fondo rosa que ocupa toda la pantalla.

Puedes copiar y probar este código en nuestro editor online para que lo entiendas mejor:

Editor Online



Relacionados


Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

La Coruña, España Correo mail