domingo, 22 de junio de 2014

La estructura HTML5 y el diseño CSS3: FlipThru



La estructura HTML5

Esta plantilla es interesante porque, además de proponer una estructura HTML5 eficaz, emplea los estilos CSS3 para crear la interfaz de tipo acordeón de la página de inicio.

Esta es la URL en la que podrá conseguir los archivos fuente: http://freehtml5templates.com/flipthru-html5-and-css3-template/



1. La caja principal

Esta plantilla utiliza de manera muy directa y acertada los nuevos elementos HTML5. El diseño del sitio web utiliza un contenedor general, una caja <div id="wrapper">. Esta caja contiene: 
  • un menú de navegación en un elemento <nav>, 
  • un encabezado en un elemento <header>, 
  • el contenido central, en un elemento <section id="main">, 
  • y un pie de página, en un elemento <footer>.



2. El menú de navegación

El menú de navegación del elemento <nav> ha sido creado con la clásica lista <ul>.



3. El encabezado

El encabezado <header> contiene un título <h1> con un vínculo <a>, para el título del sitio web, y un título <h2>, para el eslogan.



4. La zona central

En la zona central podemos ver el subtítulo, el menú de tipo acordeón y el artículo en portada.


La zona central es un elemento <section id="main"> que contiene, a su vez, otro <section id="content">. Esta caja contiene otro elemento <section class="accordbk"> para la gestión del acordeón y un elemento <article> para presentar el texto (con un <h2> y un <p>).


Veremos con más detalle el acordeón en la sección Elemento de interfaz de tipo acordeón.


5. El pie de página

Así se visualiza el pie de página:


El pie de página <footer> contiene dos elementos <section> imbricados para obtener el diseño deseado. Los cuatro bloques son elementos <aside> que contienen un título <h4> y una lista <ul>.



El diseño CSS3

1. El contenedor principal

El contenedor principal es una caja <div id="wrapper"> a la que se le ha aplicado una sombra box-shadow: 3px 3px 7px #777). Este es el estilo CSS:

#wrapper {
width: 940px;
margin: 0 auto;
margin-top: 5px;
margin-bottom: 5px;
-webkit-box-shadow: 3px 3px 7px #777;
-moz-box-shadow: 3px 3px 7px #777;
}

2. Las imágenes de los artículos

Las imágenes de los artículos del elemento de tipo acordeón presentan una sombra (box-shadow: 3px 3px 7px #777).


article img {
border: none;
-webkit-box-shadow: 3px 3px 7px #777;
-moz-box-shadow: 3px 3px 7px #777;
}

Espero haber ayudado en algo. Hasta la próxima oportunidad!








No hay comentarios:

Publicar un comentario en la entrada