Estructura básica de html5
Estructura básica
Aunque gran parte de la atención que se tiene sobre HTML5 gira en torno a las nuevas API, y sus 30 nuevos
elementos con la nueva semántica que se puede utilizar en tradicionales páginas estáticas, también en las
franja de controles de formularios. Vamos a tocar un poco el tema de lo básico como veníamos tratando hasta
ahora, Vamos a ver un poco la estructura básica y algunas mejoras establecidas en la misma.
Así que vamos a ver una estructura html5, que es lo minimo que se requiere para tener una correcta base
para iniciar nuestro proyecto, luego vamos a tratar de analizarla un poco:
1 <!DOCTYPE html>
2 <html lang="es">
3 <head>
4
<meta charset="utf-8"/>
5
<meta name="description" content="curso html5 desde 0" />
6
<title>Mi primera web en html5</title>
7 </head>
8 <body>
9 <!--aqui se despliega todo el contenido-->
10 </body>
11 </html>
Lo primero del DOCTYPE es la etiqueta que no pasa de moda la clásica , si te fijas veras que tiene un atributo
que es lang, ósea lenguaje aquí definimos en que lenguaje va a ir nuestro documento web, lo puedes en “en”
si tu web va a hacer en el idioma Ingles o “es” si esta en Español, ya dependerá de tu proyecto, en este caso
hace referencia a una web construida en español, y esto ayudara también a muchas personas con algunas
discapacidades, que utilizan un lector de pantalla o algo parecido, que más que decirles en qué idioma esta
nuestra web. Más información: http://www.w3schools.com/tags/ref_language_codes.asp.
Echa un vistazo a la etiquetacon mucho cuidado. Los que están acostumbrado a escribir XHTML se darán
cuenta que es el primer cambio. Ya que estábamos acostumbrados a esto:
1 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
Esto es todavía lo puedes usar, ya que en html4 y 5 podemos intercambiar etiquetas en la manera posible que
lo necesitemos, pero en html5 el camino más corto es mejor ya que es más fácil de escribir y que ya funciona
en todas partes, solo tenemos que escribir esto:
1 <meta charset="utf-8"/>
Ahora sé que en él la etiquetase encuentra muchas metas, pero la verdad es que realmente no vale la pena
meterlas en nuestros documentos ya que no tienen ya validez para los buscadores que fueron para las que se
crearon principalmente. Ejemplo, la meta keywords, otras como la meta description, si es muy importante ya
que ayudara a los buscadores a expresar el contenido de tu pagina.
Si quieres mas información acerca esta etiqueta meta ve a esta
dirección: http://www.w3schools.com/html5/tag_meta.asp
Y la etiqueta <title> que es la que provee el titulo a la pagina, esta es muy importante incluirla a los
documentos creados, ya que la asociamos a una identidad por medio de su titulo.
1 <title>Aqui va el titulo del docuemento actual</title>
Si quieres mas información acerca esta etiqueta title ve a esta
dirección: http://www.w3schools.com/html5/tag_title.asp
y el <body> que ya lo conocemos y es el mismo. pero si quieres saber mas acerca del body ve a esta
dirección: http://www.w3schools.com/html5/tag_body.asp
- See more at: http://www.tutosytips.com/dia-3-estructura-basica-de-html5/#sthash.EX29Px8l.dpuf
Nuevas etiquetas estructurales en HTML5
Bueno vamos a definir una estructura más completa de un documento web utilizando las nuevas etiquetas
estructurales. <header>, <hgroup>, <footer>, <nav>, <aside>, <section> y <article>.
Vamos a definir el documento y luego vamos a examinar las etiquetas más a fondo y conocer como las
podemos utilizar en nuestros propios proyectos.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8"/>
<meta name="description" content="curso html5 desde 0" />
<title>Mi primera web en html5</title>
</head>
<body>
<header>
<hgroup>
<h1>Mi curso de html5</h1>
<h2>Aprende desde 0</h2>
</hgroup>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">quienes somos</a></li>
<li><a href="#">portafolio</a></li>
<li><a href="#">contacto</a></li>
</ul>
</nav>
</header>
<article>
<h2>Aquí va un post, con su titulo en h2</h2>
<p>Aqui puede ir los contenidos del post</p>
</article>
<article>
<h2>Aquí va un post, con su titulo en h2</h2>
<p>Aqui puede ir los contenidos del post</p>
</article>
<aside>
<h2>Titulo del sidebar</h2>
<p>alguna informacion que se muestra en la barra lateral </p>
<ul>
<li><a href="#">enlaces</a></li>
<li><a href="#">enlaces</a></li>
</ul>
</aside>
<footer>
<p>Aqui va el Pie de pagina, copyright, el menu otravez, etc.</p> </footer>
</body>
</html>
Hemos utilizado estos elementos <header>, <hgroup>, <footer>, <nav>, <aside>, <section> y <article>.
Para marcar y así formar la estructura casi que completa de nuestra página, ahora es evidente notar los
nuevos nombres, es el momento para estudiar en detalle un poco más de esas nuevas etiquetas que
llamamos estructurales.
1º – <header>: Esta etiqueta hace el mismo trabajo que esta <div id=”header”>, esta etiqueta <header> la
utilizamos para contener información adicional como logos y ayudas a la navegación, iconos de redes sociales
etc. Esta etiqueta tiene su cierre de esta manera </header>.
2º – <hgroup>: Muchos headers de las páginas web podrán contener múltiples títulos representados con la
etiqueta h1, y de pronto un subtitulo formando con la etiqueta h2. Bueno esta nueva etiqueta <hgroup>
permite colocar un h1, h2 y h3 dentro del header sin afectar el SEO, permitiendo usar otro h1 en el sitio. Esta
etiqueta tiene su cierre de la siguiente forma, </hgroup>.
<hgroup>
<h1>Mi curso de html5</h1>
<h2>Aprende desde 0</h2>
</hgroup>
3º – <nav>: La etiqueta <nav> está diseñada para colocar la botonera o navegación principal los normales
(Home, quienes somos, portafolio, contáctenos, blog). Puedes colocar cualquier etiqueta dentro, aunque lo
recomendado es usar listas <ul> con sus respectivos <li>, su cierre es </nav>.
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">quienes somos</a></li>
<li><a href="#">portafolio</a></li>
<li><a href="#">contacto</a></li>
</ul>
</nav>
4º – <aside>: Esta etiqueta es creada para contener información no relevante para el sitio web como da a
sospechar su nombre que se traduciría algo así como “a un lado”. En un blog, obviamente el <aside> es la
barra lateral de información donde se muestra las categorías, blogroll etc. Esta etiqueta puede contener
cualquier cosa desde un reproductor multimedia hasta una galería de imágenes, el cierre de esta etiqueta es
</aside>.
5º – <section>: Esta etiqueta Define un área de contenido única dentro del sitio. Esta es una de las etiquetas
más genéricas de los elementos estructurales ya que podemos agrupar contenidos relacionados por el tema.
Ejemplo: En un blog, esta etiqueta sería la zona donde están todos los posts, el cierre de esta etiqueta es
</section>.
6º – <article>: Esta etiqueta especifica un contenido independiente y autónomo. Define zonas únicas de
contenido independiente. Ejemplo: En el home de un blog, cada post sería un <article> y el post y cada uno de
sus comentarios serían varios <article>, el cierre respectivo de esta etiqueta es </article>.
7º – <footer>: Esta etiqueta lo que define es un pie de página con la información del copyright, autor un menú
o lo queramos colocar en el pie de la web, el cierre de esta etiqueta es </footer>.
NOTA: Algo muy importante: el caso de ver nuevas etiquetas estructurales no significa que desaparecieron
los divs, los podemos seguir utilizando en cuestiones de contenido interno, porque para el tema de la
estructura y semántica las nuevas etiquetas nos pueden venir my bien, y es bueno que comencemos a
basarnos en ellas.
Bueno en conclusión, utilizando estas nuevas etiquetas podemos estructurar una web basada en HTML5, se
vería la estructura algo así como lo vamos a ver en el siguiente cuadro, y claro para una mejor apariencia que
más que css3, pero vamos por partes.
Hablemos más de los nuevos elementos de HTML5
Además de los elementos estructurales vimos en el tutorial anterior, HTML 5 introduce una serie de nuevos
elementos semánticos que son elementos que sin ninguna duda mejoran la estructura de cualquier sitio, las
etiquetas semánticas, son claves para posicionamiento en buscadores y el buen desarro¬llo web Vamos a
Examinarlas y a ver algunos detalles de ellas y también HTML5 incluye nuevos elementos para el manejo de
las forma, el dibujo y para el contenido de los medios de comunicación. Y también vamos a ver algunas
etiquetas que fueron eliminadas en esta nueva versión de HTML.
En la siguiente tabla te mostrare todo lo nuevo de HTML5:
Nuevos elementos semánticos / Estructural
Etiqueta
Descripción
<article>
Define un artículo
<aside>
Define el contenido aparte del contenido de la página
Aísla una parte del texto que pueda ser formateada en una dirección distinta de otro texto fuera
<bdi>
de ella
<command> Define un botón de comando que un usuario puede invocar
<details>
Define los detalles adicionales que el usuario pueda ver u ocultar
<summary> Define un título visible para un elemento <details>
<figure>
Especifica autónomo de contenido, como ilustraciones, diagramas, fotos, listas de códigos, etc
<figcaption>Define un título para un elemento <figure>
<footer>
Define un pie de página de un documento o sección
<header>
Define un encabezado de un documento o sección
Agrupa un conjunto de etiquetas desde los <h1> hasta los <h6> cuando un título tiene varios
<hgroup>
niveles
<mark>
Define el texto marcado / resaltado
<meter>
Define una medida escalar dentro de una gama.
<nav>
Define vínculos de exploración
<progress> Representa el progreso de una tarea
<ruby>
Define una anotación de rubí (para el Este de la tipografía de Asia)
<rt>
Define una explicación / pronunciación de los caracteres (para el Este de la tipografía de Asia)
<rp>
Define lo que se muestra en los navegadores que no son compatibles con anotaciones de rubí
<section>
Define una sección de un documento
<time>
Define una fecha / hora
<wbr>
Define una posible ruptura del verso
Nuevos para medios de comunicación / Media
Etiqueta Descripción
<audio> Define el contenido de sonido
<video> Define un vídeo o una película
<source>Define los recursos de medios múltiples para <video> y <audio>
<embed> Define un contenedor para una aplicación externa o de contenido interactivo (un plug-in)
<track> Define las pistas de texto para <video> y <audio>
El nuevo elemento <canvas>
Etiqueta Descripción
Se utiliza para dibujar gráficos sobre la marcha a través de secuencias de comandos (normalmente
<canvas>JavaScript)
Nuevos elementos de formulario
Etiqueta Descripción
<datalist>Especifica una lista de opciones predefinidas para los controles de entrada
<keygen> Define un campo generador de par de claves (para las formas)
<output> Define el resultado de un cálculo
Elementos eliminados de la version anterior de HTML
Los siguientes elementos o etiquetas DE LA VERSION HTML4 fueron eliminados y su uso no será correcto
para la nueva versión de HTML5
<acronym>
<applet>
<basefont>
<big>
<center>
<dir>
<font>
<frame>
<frameset>
<NOFRAMES>
<strike>
<tt>
Que más te puedo decir acerca de estos nuevos elementos, bueno en realidad muchísimo, pero mejor te
remito a unas fuentes de mayor información:
Ver los elementos de html5 en forma de una tabla periódica
Fuentes: www.w3schools.com/html5/html5_new_elements.asp
Y ¿porque no? Wikkipedia: es.wikipedia.org/wiki/HTML5
Hagamos un sitio en HTML5 Y CSS3 – parte 1
En este tutorial de creación de una plantilla web basada en HTML Y CSS3, en esta primera parte vamos a ver
la estructuración básica del sitio y vamos a utilizar las nuevas etiquetas y vamos a elementos de la semántica
basados en HTML5, así que empezar.
Lo que vamos a lograr es una plantilla web como la siguiente:
Y al final veremos el resultado.
Comencemos con la estructuración del documento base en HTML5
1 – Doctype Y la etiqueta Head
Bueno, Primero definimos el doctype en su nueva forma, (ver info aqui) luego abrimos la etiqueta head y
colocamos lo que no debe de faltar en un documento web HTML5 es decir las etiquetas basicas del head (Ver
info aqui), a esto agregamos un enlace a la hoja de estilos y un enlace a la librería Modernizr(Ver info aqui) Y
añadimos otro enlace a html5shiv para afirmar más la compatibilidad de html5 con los antiguos navegadores.
Y sería algo más o menos así el código:
<!DOCTYPE HTML>
<html lang="es">
<head>
<meta charset="utf-8" />
<title>tutos y tips / pagina web en html5</title>
<link href="style.css" rel="stylesheet" type="text/css">
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<script src="modernizr-2.0.6.min.js"></script>
</head>
2 – La etiqueta Body
Antes de ocuparnos del contenido primero tenemos que colocar la etiquetapero le asignamos una clase seria
así:
<body class="contenedor-general">
3 – el Header
Para el header agregamos la nueva etiqueta <header> dentro de ella colocamos el logo por medio de la
etiqueta <figure> y el lema en h1 por medio de la etiqueta <figcaption>, después colocamos un div con la
clase redes para meter los logos de las redes sociales y cerramos la etiqueta header. Y quedaria algo asi:
<!-- comienzo header-->
<header>
<figure class="logo">
<img src="imagenes/logo.jpg" alt="logo" />
<figcaption>
<h1>Mi Thema en HMTL5</h1>
</figcaption>
</figure>
<div class="redes">
<img src="imagenes/red1.png" alt="redes" />
<img src="imagenes/red2.png" alt="redes" />
<img src="imagenes/red3.png" alt="redes" />
</div>
</header>
<!-- fin header-->
4 – La etiqueta Nav
Para la navegación vamos a utilizar la etiqueta nav conteniendo una lista desordenada con sus respectivo
ítem de lista en enlaces. Sería algo así:
<!-- comienzo navegacion-->
<nav>
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Tutoriales</a></li>
<li><a href="#">videos</a></li>
<li><a href="#">Javascript</a></li>
<li><a href="#">Html5 y Css3</a></li>
<li><a href="#">Recursos</a></li>
<li><a href="#">Administrador</a></li>
</ul>
</nav>
<!-- fin navegacion-->
5 – Contenedor o fondo del contenido
Para hacer la simulación del fondo del contenido vamos a utilizar un div y lo cerramos antes del footer.
<div id="sombra-contenido">
6 – Seccion principal etiqueta Section.
En el siguiente código abrimos una etiqueta section para meter la sección de los artículos y dentro metemos
un slider por medio de un div y también un articulo por medio de la etiqueta article y dentro de la etiqueta
article hacemos la estructura de un articulo o entrada, es decir un texto de entrada una imagen y los tag de
autor, fecha y categoría a la que pertenece ese artículo, podemos duplicar esa etiqueta article para simular
varios artículos. Luego cerramos la etiqueta article y la etiqueta section.
<!-- comienzo de la seccion principal -->
<section class="articulos">
<div id="slider">
<img src="imagenes/slider.jpg" alt="slider" />
</div>
<!-- comienzo del articulo-->
<article class="post">
<h2><a href="#">Titulo del Post</a></h2>
<figure>
<a href="#"><img src="imagenes/img-post.jpg" alt="img-post" /></a>
</figure>
<p class="meta">Por <a href="#">Admin</a> El <a href="#">30/05/2012.</a> En <a
href="#">Pruebas</a></p>
<p>Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Donec odio. Quisque volutpat
mattis eros. Nullam malesuada erat ut turpis.
Suspendisse urna nibh, viverra non, semper
suscipit, posuere a, pede.
Donec nec justo eget felis facilisis fermentum.
Aliquam porttitor mauris sit amet orci.
Aenean dignissim pellentesque felis.</p>
<div class="leermas"><a href="#">Leer Mas..</a></div>
</article>
<!-- fin del articulo-->
</section>
<!-- fin de la seccion-->
7 – Sidebar por medio de la etiqueta Aside
Para el sidebar vamos a utilizar la etiqueta aside y vamos a definir los diferentes bloques para cada modulo,
para el de publicidad, el buscador, las categorías, y la información importante por medio de un div con una
clase bloque aside, dentro de los bloque siempre va un titulo en un H3 y definimos cada contenido
individualmente, unas imágenes para la publicidad, un form con las nuevas propiedades html5 para la
búsqueda, una lista para las categorías y un párrafo con una clase para las informaciones importante. Y
cerramos la etiqueta aside. Sería algo más o menos así:
<!-- comienzo del aside o barra lateral-->
<aside>
<div class="bloques-aside">
<h3>Publicidad</h3>
<ul>
<li class="publicidad">
<img src="imagenes/publicidad.jpg" alt="publicidad" />
</li>
<li class="publicidad">
<img src="imagenes/publicidad.jpg" alt="publicidad" />
</li>
<li class="publicidad">
<img src="imagenes/publicidad.jpg" alt="publicidad" />
</li>
<li class="publicidad">
<img src="imagenes/publicidad.jpg" alt="publicidad" />
</li>
</ul>
</div>
<div class="bloques-aside">
<h3>Buscador</h3>
<form class="searchform">
<input type="text" onblur="if (this.value == '') {this.value = 'Buscar...';}" onfocus="if (this.value == 'Search...')
{this.value = '';}" value="Search..." class="searchfield">
<input type="button" value="Go" class="searchbutton">
</form>
</div>
<div class="bloques-aside">
<h3>Categorias</h3>
<ul class="categoria">
<li><a href="#">categoria 1</a></li>
<li><a href="#">categoria 2</a></li>
<li><a href="#">categoria 3</a></li>
<li><a href="#">categoria 4</a></li>
<li><a href="#">categoria 5</a></li>
<li><a href="#">categoria 6</a></li>
<li><a href="#">categoria 7</a></li>
</ul>
</div>
<div class="bloques-aside">
<h3>Informacion Importante</h3>
<p class="info">
<img src="imagenes/img-post.jpg" alt="img-post" />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis.
Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci.
Aenean dignissim pellentesque felis.
</p>
</div>
</aside>
<!-- fin de la aside-->
8 – El pie de página por medio de la etiqueta footer y cierre del html
Bueno para el pie de página vamos a utilizar la etiqueta <footer> dentro vamos hacer una navegación por
medio de una lista desordenada y el copyright, cerramos el footer, cerramos el body y cerramos el html.
<footer>
<nav class="footer">
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Tutoriales</a></li>
<li><a href="#">videos</a></li>
<li><a href="#">Javascript</a></li>
<li><a href="#">Html5 y Css3</a></li>
<li><a href="#">Recursos</a></li>
<li><a href="#">Administrador</a></li>
</ul>
</nav>
© 2012 tutosytips.com - un plantilla creada en html5 y css3
</footer>
</body>
</html>
¡¡Listo, tenemos la estructura del documento en totalmente en HTML5!!
Si juntamos todo estos fragmentos de codigos obtenemos un documento asi:
Hagamos un sitio en HTML5 Y CSS – parte 2
1 – Añadimos los estilos para resetear los estilos de los navegadores
/* --- reset de los sstilos de los navegadores ---*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font: inherit;
vertical-align: baseline;
}
/* --- Fin de reset de los sstilos de los navegadores ---*/
2 – Estilos de la estructura basica
Seguimos con la estructura base del documento HTML5, es decir las columnas y cajas que contendrán toda la
web. (el body, header, contenido, la sección base, la barra lateral o Aside y el footer)
/* --- comienzo de los estilos de la estructura ---*/
body.contenedor-general {
font-family: Arial,Helvetica,sans-serif;
font-size: 14px;
margin: 0 auto;
position: relative;
width: 1023px;
}
header, nav, section, article, footer {
display: block;
}
header{
height: 141px;
position: relative;
}
#sombra-contenido {
background: url("imagenes/conten-bg.png") no-repeat scroll 0 0 transparent;
overflow: hidden;
padding: 10px 30px;
width: 970px;
}
section.articulos {
width: 630px;
float: left;
}
aside {
float: right;
margin: 0 10px 0 0;
width: 320px;
}
footer {
background: none repeat scroll 0 0 #FAFAFA;
border-top: 6px solid #CCCCCC;
clear: both;
padding: 10px;
text-align: center;
}
/* -- fin de los estilos de la estructura -- */
3 – Estilos del header
Seguimos aplicando los estilos del contenido del header el logo y el lema en el elemento figure, y los estilos al
div con la clase de redes para mostrar los iconos de las redes sociales, les damos a ambos posiciones
relativas y uno lo flotamos a la izquierda y el otro a la derecha, dentro de figure que es el logo tenemos
figcaption y le aplicamos los estilos al h1 que esta hay y le aplicamos un estilo de sombra con text-shadow.
/* -- comienzo de los estilos del contenido del header-- */
figure.logo {
position: relative;
top: 20px;
left:20px;
float: left;
}
figure.logo figcaption h1 {
font-size: 21px;
color: #fff;
text-shadow: 1px 1px 2px #666;
text-transform: uppercase;
font-size: 25px ;
}
.redes {
position: relative;
top: 40px;
right: 20px;
float: right;
}
.redes img {
margin: 5px;
float:left;
}
/* -- fin de los estilos del header -- */
4 – estilos de la navegación
Seguimos con los estilos de la barra de navegación. 1º a la etiqueta nav aplicamos un border radius y un
degradado que si no lo sabemos hacer podemos utilizar alguna de las herramientas online para conseguir
este efecto (Herramientas de css3 online), y le coloque una imagen de fondo por si falla el degradado la
imagen hará este trabajo, luego a los enlaces de las listas es decir a los link le aplique unos estilos para
diferenciar y mejorar la apariencia y en el estado hover le aplique un color de fondo y un borde para simular un
efecto de rollover.
/* -- comienzo de los estilos de la navegacion -- */
nav {
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
background-image: url(imagenes/menu-barr.png);
background: #fe7021; /* Old browsers */
background: -moz-linear-gradient(top, #fe7021 2%, #fcb088 21%, #fe7021 41%, #e95617 65%, #d0380c 95%); /* FF3.6+
*/
background: -webkit-gradient(linear, left top, left bottom, color-stop(2%,#fe7021), color-stop(21%,#fcb088), colorstop(41%,#fe7021), color-stop(65%,#e95617), color-stop(95%,#d0380c)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #fe7021 2%,#fcb088 21%,#fe7021 41%,#e95617 65%,#d0380c 95%); /*
Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #fe7021 2%,#fcb088 21%,#fe7021 41%,#e95617 65%,#d0380c 95%); /* Opera
11.10+ */
background: -ms-linear-gradient(top, #fe7021 2%,#fcb088 21%,#fe7021 41%,#e95617 65%,#d0380c 95%); /* IE10+ */
background: linear-gradient(top, #fe7021 2%,#fcb088 21%,#fe7021 41%,#e95617 65%,#d0380c 95%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fe7021', endColorstr='#d0380c',GradientType=0 ); /*
IE6-9 */
height: 46px;
margin: 0;
display: block;
}
nav li {
float: left;
display: block;
margin: 5px;
}
nav li a {
color: #FFFFFF;
font-family: arial;
font-weight: bold;
line-height: 37px;
padding: 12px;
text-decoration: none;
text-transform: uppercase;
}
nav li a:hover {
background-color: #CD3A0C;
border: 1px solid #ba1706;
}
/* -- fin de los estilos de la navegacion -- */
5 – estilos del contenido del post
Bueno lo siguiente es crear los bloques de los post o artículos, utilizamos la etiqueta article, le damos margin y
padding, luego nos ocupamos los estilos de la imagen en estado de reposo y en estado hover le damos 8px
de borde de ancho en ambos estados, luego los estilos del título en un h2 que es un enlace que lleva al
contenido completo del post, luego aplicamos los estilos de los meta, es decir la caja que nos muestra la fecha
en que fue escrito, por quien y la categoría a que pertenece, luego al párrafo y el leer más..
/* -- comienzo del articulo o el post -- */
article.post {
margin: 0;
border-bottom: 1px solid #ccc;
padding-bottom: 20px;
border-top: 1px solid #aaa;
padding-top: 20px;
overflow: hidden;
}
article.post figure {
float: left;
margin: 10px 10px 0 0;
width: 180px;
}
article.post a img {
border: 8px solid #ccc;
}
article.post a:hover img {
border: 8px solid #de4912;
}
article.post h2 {
font-family: Arial, Helvetica, sans-serif;
}
article.post h2 a {
color: #888888;
font-family: Arial,Helvetica,sans-serif;
font-size: 28px;
font-weight: bold;
margin: 5px;
text-decoration: none;
}
article.post .meta {
float: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
article.post p.meta {
display: block;
background: #fafafa;
margin: 10px 0;
padding: 10px;
border-radius: 10px;
box-shadow: 1px 2px 2px #ccc;
}
article.post p.meta a {
color: #888;
text-decoration: none;
font-style: italic;
}
article.post p.meta a:hover {
color: #DE4912;
}
article.post p {
float: left;
width: 410px;
}
article.post div.leermas {
float: left;
margin: 23px 1px 0;
}
article.post div.leermas a{
color: white;
text-decoration:none;
font-style:italic;
background: none repeat scroll 0 0 #ccc;
border-radius: 10px 10px 10px 10px;
margin: 5px 0;
padding: 10px;
}
article.post div.leermas a:hover {
background: none repeat scroll 0 0 #DE4912;
}
/* -- fin del articulo de introduccion -- */
6 – estilos del contenido del sidebar o Aside
Seguimos con el contenido de la barra lateral o aside, tenemos los h3 que son los títulos de los modulos con
un background de degradado igual al que le aplicamos al nav, un border radius, le damos un color blanco y
otras propiedades más para dar un buen estilo. Luego para el bloque de publicidad colocamos las imágenes
de publicidad por medio de una lista y que cada ítem es una imagen le damos un display block y que se floten
cada uno a la izquierda del otro, luego para las categorías le damos un color de texto en estado de reposo y
otro en hover, seguimos con los estilos de la caja de búsqueda, el bloque de información importante que le
damos un estilo al párrafo para darle un padding y un color diferente y el estilo a la respectiva imagen que se
va a alinear a la izquierda
/* -- comienzo de la barra latera o aside -- */
aside h3 {
background-image: url(imagenes/menu-barr.png);
background: -moz-linear-gradient(top, #fe7021 2%, #fcb088 21%, #fe7021 41%, #e95617 65%, #d0380c 95%); /*
FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(2%,#fe7021), color-stop(21%,#fcb088), colorstop(41%,#fe7021), color-stop(65%,#e95617), color-stop(95%,#d0380c)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #fe7021 2%,#fcb088 21%,#fe7021 41%,#e95617 65%,#d0380c 95%); /*
Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #fe7021 2%,#fcb088 21%,#fe7021 41%,#e95617 65%,#d0380c 95%); /* Opera
11.10+ */
background: -ms-linear-gradient(top, #fe7021 2%,#fcb088 21%,#fe7021 41%,#e95617 65%,#d0380c 95%); /* IE10+
*/
background: linear-gradient(top, #fe7021 2%,#fcb088 21%,#fe7021 41%,#e95617 65%,#d0380c 95%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fe7021', endColorstr='#d0380c',GradientType=0
); /* IE6-9 */
border-radius: 15px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
color: #fff;
font-size: 17px;
font-weight: bold;
margin: -15px 0 15px 0;
padding: 10px;
text-align: center;
}
aside div.bloques-aside {
padding: 10px 0;
border: 1px solid #ccc;
background: #fafafa;
border-radius: 10px;
margin: 25px 0;
}
aside li.publicidad {
width: 152px;
display: block;
float: left;
background: none !important;
margin: 3px;
}
aside ul {
overflow: hidden;
}
aside ul.categoria li a {
text-decoration: none;
font-size: 16px;
color: #666;
}
aside ul.categoria li a:hover {
color: #DE4912;
}
aside ul.categoria li {
margin: 10px 30px;
padding: 0 10px 5px 0;
border-bottom: 1px dotted #555;
}
.searchform {
background: -moz-linear-gradient(center top , #FFFFFF, #EDEDED) repeat scroll 0 0 transparent;
border: 1px solid #D2D2D2;
border-radius: 2em 2em 2em 2em;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
display: inline-block;
padding: 3px 5px;
margin: 0 25px;
}
.searchform input {
font: 12px/100% Arial,Helvetica,sans-serif;
}
.searchform .searchfield {
background: none repeat scroll 0 0 #FFFFFF;
border: 1px solid #BCBBBB;
border-radius: 2em 2em 2em 2em;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) inset;
outline: medium none;
padding: 6px 6px 6px 8px;
width: 202px;
}
.searchform .searchbutton {
background: -moz-linear-gradient(center top , #9E9E9E, #454545) repeat scroll 0 0 transparent;
border: 1px solid #494949;
border-radius: 2em 2em 2em 2em;
color: #FFFFFF;
font-size: 11px;
height: 27px;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.6);
width: 27px;
}
aside div.bloques-aside p.info {
margin: 10px;
}
div.bloques-aside p.info img {
width: 100px;
height: 100px;
float: left;
margin: 5px 10px;
}
/* -- fin de la barra latera o aside -- */
7 – estilos del contenido del footer
Y por último aplicamos los estilos del footer, es decir la navegación con clase footer, sus enlaces y el estado
hover da cada ítem.
/* -- contenido del footer -- */
nav.footer li a {
color: #333;
font-weight: normal;
line-height: 20px;
padding: 10px;
font-size: 14px;
text-transform: none;
}
nav.footer {
background: none repeat scroll 0 0 #CCCCCC;
height: 30px;
margin: 0 0 10px;
padding: 0 18%;
}
nav.footer li a:hover{
background:none;
border: none;
color: #CD3A0C;
}
/* -- fin del contenido del footer -- */
http://www.3dcsstext.com/ para hacer textos 3d css3
