5 bonitas estructuras de encabezados

encabezado-tradicional

En esta entrada os mostraré 5 ejemplos sobre encabezados, esa parte tan importante que aparece al comienzo de un texto. También la entrada sobre tipografías adecuadas para encabezados puede resultaros útil.

Generalmente los encabezados contienen 5 elementos:

1- Título del artículo
2- Fecha de publicación
3- Nombre del autor
4- Categoría o etiquetas
5- Número de comentarios

Lo que haremos será tomar estos elementos y organizarlos de forma distinta, quedando 5 estructuras de encabezados bastante creativas. Todas ellas necesitan únicamente un par de líneas de código CSS para ser estilizadas.

1. Encabezado artístico

encabezado-artistico

Código HTML


<div id="block4">
<div>
<h1><a href="#" >7 Steps for Systematizing The Design & Build Process%u2026</a></h1>
<h5><span>Sep 21, 2009</span> | Comments <a href="3" >67</a> | by Cameron</h5>
</div>
</div>
<div id="block4">
    <div class="title-wrap">
    <h1><a href="#" >7 Steps for Systematizing The Design & Build Process%u2026</a></h1>
    <h5><span>Sep 21, 2009</span> | Comments <a href="3" >67</a> | by Cameron</h5>
    </div>
</div>

Código CSS

#block4 {
    background:url(images/bg.jpg);
    border:3px solid #542437;
    font-family:Georgia,"Times New Roman",Times,serif;
        margin:20px 0px;
    padding:20px;
    z-index:5;
}
#block4 h1 {
    font-size:190%;
    letter-spacing:0px;
    line-height:42px;
    margin:0 0 10px;
    text-align:center;
    text-transform:uppercase;
}  

#block4 h1 a{
    color:#542437
}  

#block4 h5 a{
    color:#542437
}  

#block4 h5 {
    border-bottom:1px solid #4C4C4C;
    border-top:1px solid #4C4C4C;
    color:#6A6969;
    font-size:13px;
    font-weight:100;
    letter-spacing:3px;
    line-height:21px;
    padding:5px 0;
    text-transform:uppercase;
}
#block4 .title-wrap{
    background:url(images/trans_bg.png);
    padding:10px;
    border:1px dashed #542437;
}

2. Encabezado tradicional

encabezado-tradicional

Código HTML

<div id="block1">

<h2>Simplicity in Good Web Design</h2>

<p>

by <em> <a title="" href="http://www.noupe.com" >Noura Yehia</a> |

<a href="" class="comments">Comments</a> |

<a href="" class="cat">Category Name</a>|

<a href="">Sep 10</a></em>

</p>

</div>

Código CSS

#block1 {
    background:#D5E4E8 none repeat scroll 0 0;
    border:3px solid #B5CAD0;
    margin:20px 0px;
    padding:20px;
}
#block1 h2{
    font-family:Georgia,"Times New Roman",Times,serif;
    font-weight:normal;
    text-shadow:0 0 1px #000;
    color:#444444;
    font-size:2em;
    padding:2px 0 0;
    text-transform:capitalize;
    line-height:1.2em;
    margin:0 0 10px;
}
#block1 p em {
    color:#999999;
    font-family:Georgia,"Times New Roman",Times,serif;
    font-style:italic;
    letter-spacing:0.2em;
    margin:10px 0 20px;
    text-transform:none;
    padding-bottom:10px;
}
#block1 a{
color: #F50077;
text-decoration:none;
}
#block1 a:hover{
text-decoration:underline
}  

#block1 .comments{
    background:url(images/comments.png) no-repeat;
    padding:0 0 0 25px
}
#block1 .cat{
    background:url(images/folder.png) no-repeat;
    padding:0 0 5px 30px;
}

3. Encabezado de líneas

encabezado-lineas

Código HTML

<div id="block2">

<div class="date-stamp">

<div class="day">4th</div>

<div class="month">Mar/09</div>

</div>

Código CSS

#block2{
    border:3px solid #A8635A;
    color:#fff;
    font-family:Georgia,"Times New Roman",Times,serif;
    margin:20px 0px;
    padding:20px;
}  

#block2 h2{
    background:#ECD078;
    color:#542437;
    font-size:160%;
    font-style:normal;
    font-weight:bold;
    letter-spacing:-1px;
    line-height:115%;
    margin-top:5px;
    padding:0;
}
#block2 p.details{
    background:#542437
}
#block2 .date-stamp {
    background:#FFF;
    border:1px solid #ECD078;
    color:#542437;
    float:left;
    font-style:italic;
    height:62px;
    margin:0 10px;
    overflow:hidden;
    padding:0;
    width:72px;
}
#block2 .day {
    font-size:22px;
    font-weight:normal;
    padding:7px 0 0;
    text-align:center;
}
#block2 .month {
    font-size:11px;
    padding:2px 0 0;
    text-align:center;
    text-transform:uppercase;
}

4. Encabezado impactante

encabezado-impactante

Código HTML

<div id="block3">

<p class="date">Sep <span>10</span></p>

<h1>CSS: Design Out Of The Box</h1>

<p class="tags"><span>Tagged in:</span>

<a href="#" >CSS</a>,

<a href="#">Design Trends</a>,

<a href="#" >inspiration</a></p>

</div>

Código CSS

#block3 {
    background:#92FF2C;
    border:3px solid #F50077;
    font-family:Georgia,"Times New Roman",Times,serif;
    margin:20px 0px;
    padding:20px;
    position:relative;
    z-index:5;
}  

#block3 .date {
    background:#F50077 none repeat scroll 0 0;
    color:#92FF2C;
    font-size:130%;
    height:40px;
    left:-55px;
    line-height:30%;
    padding:20px 0 5px;
    position:absolute;
    text-align:center;
    text-transform:uppercase;
    top:0;
    width:54px;
}
#block3 .date span {
    display:block;
    font-size:170%;
    font-style:italic;
    font-variant:normal;
    letter-spacing:-1px;
    line-height:90%;
}
#block3 .tags {
    text-transform:capitalize;
}
#block3 .tags a{
    color:#F50077;
    font-weight:bold;
}
#block3 h1, h2 {
    color:#2B2B2B;
    font-size:190%;
    font-weight:bold;
    letter-spacing:-1px;
    line-height:100%;
    margin-left:-2px;
    padding:0 0 8px;
}

5. Encabezado colorido

encabezado-colorido

Código HTML

<div id="block5">

<div class="date_block">

<div class="day">4th/Mar</div>

<div class="comments">10 Comments</div>

</div>

<div style="padding: 10px;">

<h2><a href="#">Creating a Great Portfolio Site</a></h2>

<span class="author">by <a href="#"><span>Noura Yehia</span></a>, Posted in <a href="#">Tips and Tricks</a></span>

</div>

</div>

Código CSS

#block5 {
    background:#27453A;
    border:3px solid #D95B43;
    color:#ECD078;
    font-family:Georgia,"Times New Roman",Times,serif;
    margin:20px 0px;
    padding:20px;
}  

#block5 .date_block {
    border-left:1px solid #D95B43;
    display:block;
    float:rightright;
    font-style:italic;
    height:50px;
    margin:0 10px;
    padding:10px 20px;
    width:90px;
}  

#block5 .day {
    font-size:22px;
    font-weight:normal;
    padding:0 0 20px;
    text-align:center;
}
#block5 .comments {
    background:transparent url(images/comments.png) no-repeat scroll 0 5px;
    font-size:11px;
    padding:2px 0 0 20px;
    text-align:center;
}  

#block5 h2{
    border-bottom:1px solid #D95B43;
    font-size:24px;
    font-weight:normal;
    letter-spacing:-1px;
    line-height:26px;
}
#block5 h2 a {
    border:medium none;
    color:#468E76;
    text-decoration:none;
}
#block5 .author a {
    color:#D95B43;
    font-weight:bold;
    text-decoration:none;
}