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

xPor 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

Comentarios: 6

  1. Estoy muy contento con tu web, porque ha abierto mi cabeza con respecto a css y css3 y las increíbles cosas que se pueden lograr, gracias por los posts!!!!

    ResponderEliminar
  2. El efecto es muy chulo. ¿Te parece que podría quedar bien si al delegar el contenido de una sección la navegación quedara de alguna manera visible, en una esquina, o algo semejante? Me parece molesto tener que cerrar o "rerun" para volver a ver la navegación.

    ResponderEliminar
    Respuestas
    1. Hola Mikel
      Sí, posíblemente se ganase en funcionalidad y comodidad de uso... pero como sólo era un "mira lo que se puede hacer" :-)
      Y tampoco es un detalle que en un principio vea complicado de implementar. Creo que bastaría un segundo* grupo de 'label for' oculto por defecto y mostrarlo al desplegar una sección con algo como input:not(#cierre):checked ~ .segundo_grupo_label

      Gracias por la sugerencia.

      * un segundo grupo para ahorrarse el pisar todas las declaraciones del existente.

      Eliminar
    2. Efectivamente, si hubiera que usarlo de verdad sería una buena solución. Bueno, luego vi que lo pusiste en la pagina de Paso, así que igual podrías buscarle algo chulo para eso, a ver qué tal queda.

      Eliminar
    3. ¡ah pájaro!
      Tu estás por Pao y su página a costa de mi y mi trabajo xDD =P

      Pensaré algo al respecto, pese al peligro de que la dueña me eche a escobazos si vuelvo con más cambios ;-)

      Eliminar

EsCss RSS del Blog RSSS Comentarios Humans.txt ᛯ Diseno por Kseso SiteMap