Las grandes secciones de pantalla completa son un elemento bastante común en los sitios web de hoy en día, especialmente en las páginas de destino que actúan como un control deslizante héroe. Toman la altura y el ancho completos de la ventana gráfica con la intención de centrar la atención en una sola parte de la página. Aquí explicaremos cómo lograr precisamente eso.
Definición de nuestras secciones en HTML
Comencemos agregando un par de elementos de sección dentro del contenedor
<main>
<section>
<h1>Hello!</h1>
</section>
<section>
<h1>Toodles~</h1>
</section>
</main>
Hacer que las secciones se conviertan en pantalla completa
La creación de secciones de altura completa y anchura completa se puede hacer de dos maneras:
- Uso de unidades de ventana gráfica (vh y vw): puede parecer la más intuitiva de las dos. De hecho, las unidades de ventana gráfica se introdujeron para hacer precisamente este tipo de cosas.
- Uso de unidades implícitas como porcentajes. (%). Solían usarse más en el pasado cuando las unidades de ventana gráfica no existían o no eran ampliamente compatibles.
Uso de unidades de ventana gráfica
Primero, diseñaremos nuestras secciones para que se escalen a la altura del área visible. Usaremos la unidad vh, que significa “altura de la ventana gráfica”. La unidad vh es aproximadamente el 1% de la altura de la ventana gráfica. ¿Y qué es el “viewport”? Es el área visible de su sitio web en el navegador. Para que ocupe el 100 % del espacio vertical, estableceremos min-height en 100vh, lo que significa que la sección ocupará una altura mínima del 100 % de la altura de la ventana gráfica.
Establecemos min-height en lugar de height porque de esta manera cada sección puede, si es necesario, tener una altura mayor, mientras que si solo usas height, cualquier contenido que se escale más allá de la altura de la ventana gráfica estaría desbordando el contenedor.
body {
margin: 0;
}section {
font-family: sans-serif;
min-height: 100vh;
}
Es importante tener en cuenta que si tiene la intención de admitir navegadores heredados, es posible que desee utilizar unidades de porcentaje en su lugar. Eche un vistazo a la siguiente tabla para verificar si los navegadores que desea admitir se enumeran en verde:
Usar unidades de porcentaje
La principal diferencia entre la unidad de porcentaje y las unidades de ventana gráfica es que las unidades de porcentaje se basan en los valores de alto y ancho del padre. Esto significa que todos los elementos principales también deben escalar a la altura y el ancho completos si los elementos secundarios debajo lo desean. Esta es la razón por la cual las etiquetas html, body y main tienen alto y ancho establecidos al 100%. Esto obligará a cada padre en la jerarquía a ocupar la altura y el ancho completos disponibles de la ventana gráfica.
html,
body {
margin: 0;
height: 100%;
width: 100%;
}main {
height: 100%;
width: 100%;
}section {
font-family: sans-serif;
height: 100%;
width: 100%;
}
Centrar el contenido vertical y horizontalmente
Es muy probable que desee tener algo de contenido centrado en su sección. Si no es texto o imágenes, probablemente sea un elemento contenedor.
Usaremos la propiedad align-items para centrar verticalmente cualquier contenido que tengamos. Luego, para centrarlos horizontalmente usaremos justificar-contenido: centro.
Y para que esas dos propiedades funcionen, mostraremos: flex para convertir cada sección en un contenedor flexible.
section {
font-size: 120px;
display: flex;
justify-content: center;
align-items: center;
}Diseñar secciones individualmente
Para hacer que cada sección se distinga de las demás, usaremos el selector de nth-child para establecer un fondo y un color. Puede lograr lo mismo usando una clase para cada sección también si lo prefiere.
section:nth-child(1) {
background: orange;
color: white;
}section:nth-child(2) {
background: cyan;
color: white;
}
Con eso, ahora debería poder crear con confianza secciones de pantalla completa con HTML y CSS. Si desea ver cómo se ve, eche un vistazo al siguiente CodePen y, mientras lo hace, juegue con él:
Y aquí tenemos lo mismo pero usando un porcentaje en lugar de unidades vh.
Conclusión
Si está interesado en crear sitios web a pantalla completa, puede echar un vistazo a fullPage.js. Como sugiere el nombre, fullPage.js gira en torno a la idea de usar secciones de pantalla completa, pero además de eso, le permite agregar algunos efectos ingeniosos como desplazamiento instantáneo o desplazamiento horizontal con poco o ningún esfuerzo de su parte. Fácil de configurar y con una gran cantidad de opciones que harán que tu página luzca única.
Su navegador no soporta la etiqueta de vídeo.
Y si desea seguir mejorando su sitio web a pantalla completa, agregar una barra de navegación fija o fija es definitivamente el camino a seguir. Y si quieres considerar agregar videos, consulta cómo crear un video de pantalla completa con CSS y HTML o cómo agregar videos de Youtube como fondo con CSS.
Artículos relacionados
