soy Kseso y esto EsCSS

De icono a pantalla completa. Estudio para una landing page

Demo puro Css para una landing page. De iconos tipográficos a lightbox a fullpage.

De icono a pantalla completa. Estudio para una landing page

·Por Kseso ✎ 6

fron icon to fullscreenYa son varios los artículos y demos que he dedicado a la navegación por pestañas o tabs en sus diversas formas y manera.

Los últimos basados en inputs y la pseudoclase ':checked' por la versatilidad y ventajas que ofrecen frente a otras técnicas como los "anclas" y ':target'.

En esta ocasión al cargar la página sólo se muestran una serie de iconos tipográficos o pictogramas. Tras hacer click en ellos se muestra el contenido asociado a cada uno cubriendo toda la ventana del navegador simulando el típico lightbox.

Si eres asiduo del blog ya te sonará tanto el marcado html como la técnica Css empleada. Por un lado están los inputs al inicio del html separados de sus labels. Estas etiquetas están contenidas en un elementos (nav) utilizado para mostrarlas centradas, tanto en la vertical como la horizontal.

Y a continuación de ellas se encuentran los distintos bloques de información su 'article' correspondiente y ocultos a la vista mediante los estilos oportunos

Esta disposición es la que facilita el utilizar selectores Css del tipo #id_input:checked ~ article_por_clase para mostrar el 'article' seleccionado.

Para regresar a la pantalla de inicio tras mostrar a full un 'article' cualquiera uso un input "de cierre' cuya 'label' está por defecto oculta. Etiqueta que se muestra al marcar (':checked') cualquier input menos el suyo. Para ello sólo son necesario dos selectores:

[for='cierre'] { /* estilos por generales y para ocultar el cierre */ } input:not(#cierre):checked ~ [for='cierre'] { /* Estilos para mostrar el elemento de cierre */ }

En esta demo el desfase al mostrar u ocultar cada bloque de información y su contenido se consigue con valores dispares en la propiedad transition-delay.

See the Pen Another Css play by Kseso (@Kseso) on CodePen.

Ver demo a full Descargar Demo

avatar del Editor del blog

Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Don Kseso Kseso