Bloguero-ec

Codigo Fuente, programación, Diseño Web

Creando una cabecera responsive para web…

abril 1, 2015
codigo-fuente,css,css3,responsive



Hola amigos aquí les traigo un pequeño tutorial de cómo crear una cabecera responsive (adaptable a cualquier dispositivo) utilizando css y sus propiedades para realizar el efecto responsive.

Esta cabecera incluye un css que podrás adaptar a tu web o cualquier proyecto sin necesidad de dañar el diseño de tu web , además que es elegante y sencilla pero a simple vista elegante para el usuario..

Pués bién comencemos :

Esta consta de 2 barras superiores que conforman una cabecera aqui su código fuente y explicación :

Antes que nada necesitaremos de los siguientes archivos

cabecera-responsive.css

index.html

Pues bién dentro del index.html es donde deseamos colocar nuestra cabecera necesitaremos colocar los estilos dentro de <head> de la siguiente manera:

    <link rel="stylesheet" href="cabecera-responsive.css">

Procederems a crear la cabecera con las clases llamadas desde los estilos dandole la siguiente forma..

//cabe recalcar que se está usando etiquetas html 5 
//header con la clase cabecera-barra principal contiene toda la cabecera
<header class="cabecera-barra">

    //cabecera 1 con sus elementos 
    <div class="cabecera-barra-1">

        //separador con un ancho maximo de 1200px véase css
        <div class="cabecera-separador">

            <h1><a href="#">Página<span>web</span></a></h1>

            //etiqueta nav de html5 
            <nav>
                <a href="#">Inicio</a>
                //enlace con clase activo para diferenciar en donde se encuentra el usuario
                <a href="#" class="activo">Programas</a>
                <a href="#">Reportes</a>
                <a href="#">Elementos</a>
            </nav>

        </div>

    </div>

    //cabecera 2 con su respectiva clase similar a cebecera 1
    <div class="cabecera-barra-2">

        <div class="cabecera-separador">
            <h2><a href="#">Bloguero-ec</a></h2>

            <nav>
                <a href="#"><i class="fa fa-file-word-o"></i> Ofimatica</a>
                <a href="#"><i class="fa fa-music"></i> Música</a>
                <a href="#"><i class="fa fa-futbol-o"></i> Deportes</a>
                <a href="#"><i class="fa fa-download"></i> Descargas</a>
            </nav>

        </div>

    </div>

//fin de header
</header>

Ahora el cabecera-responsive cabe recalcar que pueden cambiar el nombre del estilo o copiarlo y pegarlo dentro de su css para la realización de algún proyecto.

.cabecera-barra{
    font:13px Arial, Helvetica, sans-serif;
}

.cabecera-barra .cabecera-separador{
    max-width: 1200px;
    text-align: center;
    margin: 0 auto;
}

/* Logotipo */

.cabecera-barra h1{
    float: left;
    font: normal 28px Cookie, Arial, Helvetica, sans-serif;
    line-height: 40px;
    margin: 0;
}

.cabecera-barra h1 span {
    color: #bc40df;
}

/* barra 1*/

.cabecera-barra .cabecera-barra-1{
    background-color:#292c2f;
    box-shadow:0 1px 1px #ccc;
    padding: 20px 40px;
    height: 80px;
    color: #ffffff;
    box-sizing: border-box;
}

.cabecera-barra .cabecera-barra-1 a {
    color: #ffffff;
    text-decoration: none;
}

.cabecera-barra .cabecera-barra-1 nav {
    font:14px Arial, Helvetica, sans-serif;
    line-height: 40px;
    float: left;
    margin: 0 0 0 60px;
    padding: 0;
}

.cabecera-barra .cabecera-barra-1 nav a{
    display: inline-block;
    padding: 0 5px;
    opacity: 0.9;
    text-decoration:none;
    line-height: 1;
}

.cabecera-barra .cabecera-barra-1 nav a:hover {
    opacity: 1;
}

.cabecera-barra .cabecera-barra-1 nav a.activo {
    border-radius: 2px;
    background-color: #2B5773;
    padding: 8px 12px;
}


/* Barra 2*/

.cabecera-barra .cabecera-barra-2 {
    background-color: #ffffff;
    box-shadow: 1px 3px 3px 0 rgba(0, 0, 0, 0.05);
    padding: 20px 40px;
}

.cabecera-barra .cabecera-barra-2 h2 {
    line-height: 20px;
    margin: 0;
    float: left;
}

.cabecera-barra .cabecera-barra-2 h2 a {
    font-size: 16px;
    color: #4e5359;
    text-decoration: none;
}

.cabecera-barra .cabecera-barra-2 nav {
    text-align: right;
    line-height: 20px;
    font-size: 16px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.cabecera-barra .cabecera-barra-2 nav a {
    display: inline-block;
    color: #4e5359;
    text-decoration: none;
}

.cabecera-barra .cabecera-barra-2 nav i.fa {
    color: #A9B7BF;
    margin: 0 4px 0 15px;
}


/*  Hacemos responsive la cabecera usted podrá adicionar mas propiedades para diferentes dispositivos solo se ha usado dos para este demo . */

@media all and (max-width: 800px) {

    .cabecera-barra .cabecera-barra-2 nav{
        font-size:14px;
    }

}

@media all and (max-width: 600px) {

    .cabecera-barra .cabecera-barra-1{
        padding:20px 0;
    }

    .cabecera-barra .cabecera-barra-1 h1 {
        float: none;
        margin: -8px 0 2px;
        text-align: center;
        font-size: 24px;
        line-height: 1;
    }

    .cabecera-barra .cabecera-barra-1 nav {
        margin: 0;
        float: none;
        font-size:13px;
    }

    .cabecera-barra .cabecera-barra-1 nav a.activo {
        padding: 5px 8px;
    }

    .cabecera-barra .cabecera-barra-2{
        padding: 20px 0;
    }

    .cabecera-barra .cabecera-barra-2 h2{
        float:none;
        margin: 0 0 12px;
    }

    .cabecera-barra .cabecera-barra-2 nav{
        text-align: center;
    }

    .cabecera-barra .cabecera-barra-2 nav a{
        display: block;
        padding: 8px;
    }

    .cabecera-barra .cabecera-barra-2 nav i.fa{
        margin-left:0;
    }
}

Para añadir mas propiedades mediascreen para diferentes dispositivos visite adaptar web a cualquier pantalla con css y mediascreen

Modifique el código a su gusto espero les sirva en algún proyecto hasta la próxima…

Demostración

Mas Publicaciones

Siguenos




Conviertase en Editor

Te gustaría ser editor en Bloguero-ec.? Escribe tutoriales referente a programación, diseño web, CSS, entre otros y deja tu marca personal en nuestro sitio, contáctanos y empieza a editar Ya..

Compartir..!

© Copyright 2017 Bloguero-ec - Derechos Reservados

A %d blogueros les gusta esto: