La mayoría de las páginas web actualmente están generando tendencia con las páginas de inicio en pantalla completa o que por lo menos usan un 80, 90% del espacio total de la pantalla. Realmente es un concepto que se ve muy bonito y da más vista al producto, servicio o enfoque del sitio web.
Pero ¿cuales son aquellas páginas que ya lo implementan? Te vas a sorprender si es que no tienes mucha idea de cómo funcionan o se ven los sitios.
El primero ejemplo es Spotify, el servicio de música en línea que todos conocemos; ellos lo que hacen para su página de inicio es utilizar atributos para almacenar las proporciones de altura, manejar datos de tamaño automático y altura de cada sección con JavaScript.
Exposure. Ellos mantienen una altura fija de 90% para la sección de la cabeza y cambian la altura con JavaScript.
Y que tal Flickr; Yahoo lanzó a principios de este año una versión de pantalla completa de flickr que define la altura de cada sección al 100%.
Todos los ejemplos anteriores están usando JavaScript para lograr este diseño, pero ¿lo podemos hacer con CSS puro?
Esto es lo que podemos lograr con sólo 1 línea de código en CSS…
.section { height: 100vh; }Lo que sucede en esta línea de código es lo siguiente: la altura de la ventana gráfica se traduce así: 1VH = 1%, por lo que el porcentaje será el de la ventana, si usamos un 80, 90 e incluso 100 % será la altura del navegador, vh significa “viewport height”, entonces es más que suficiente para poder utilizar la altura en función de la ventana del navegador.
Como podrás imaginar, este método es tan poderoso por el sin fin de combinaciones en diseños que podemos lograr mediante las secciones, ya todo depende del diseño que queramos realizar y la compatbilidad con el navegador.
¿Y tu, ya lo implementas en tu sitio?
Fuente:@ckor
