[2] Como crear tu pagina web HTML5/CSS3 desde cero - La cabecera

02 junio 2014

[2] Como crear tu pagina web HTML5/CSS3 desde cero - La cabecera

    5 comentarios

Publicación relacionada: [1] Como crear tu pagina web HTML5/CSS3 desde cero - La estructuración

Continuando con la serie de tutoriales sobre como crear tu propia pagina HTML5/CSS3, hoy traigo el siguiente, la segunda parte en el que estaremos hablando de la cabecera de la pagina, después de ver el tutorial sobre la estructuración del sitio. Antes de comenzar, quiero mostrar quiero mostrar el código HTML y CSS de la sección de la pagina que nos compete en este tutorial, en este caso; la cabecera 

/* Código CSS para la cabecera */

body header {
    display:block;
    background:rgba(0, 0, 0, 0.6) url('') no-repeat fixed;
    width:88%;
    height:auto;
    margin:0 auto;
    padding-top:29px;
    padding-bottom:29px;
    font-size:48px;
    color:#FFF;
    text-align:center;
    border-radius:10px 10px 10px 10px;
    -webkit-border-radius:10px 10px 10px 10px; /* Chrome y Safari */
    -moz-border-radius:10px 10px 10px 10px; /* Firefox */
    -o-border-radius:10px 10px 10px 10px; /* Opera */
    -ms-border-radius:10px 10px 10px 10px; /* Internet Explorer */
 
<!-- Código HTML -->  }

...
        <header>
         Yo soy la cabecera
        </header>
...

Si te cuesta entender el código anterior, quizás; es necesario que le eches un vistazo al tutorial anterior. Pero, en fin, continuando con lo que deseamos hacer, indaguemos e imaginemos un poco ¿Que lleva la cabecera de una pagina web o un blog? No existen reglas que nos establezcan que poner o que no poner en una cabecera, sin embargo, siempre es recomendable no recargarla demasiado, en mi caso, yo no le pondría mas que el titulo, la descripción, un cuadro de búsqueda, y quizás, unos cuantos botones de suscripción a redes como facebook, twitter y las fuentes RSS. Agregamos los elementos antes mencionados con el siguiente código.


        <header>
         <div id="hcontenido">
             <div class="titulo">Friki Bloggeo</div>
                <div class="descripcion">Tutoriales de programación web y desktop</div>
            </div>
            <div id="busqueda">
             <form name="search" id="search">
                 <input type="text" value="Busqueda..." size="20"/>
                    <input type="button" value="Ir" name="buscar"/>
                </form>
            </div>
             <div id="suscripciones">
                 <a href="#facebook"><img src="imagenes/rss/1401747768_facebook.png"></a><a href="#facebook"><img src="imagenes/rss/1401747781_twitter.png"></a><a href="#facebook"><img src="imagenes/rss/1401747789_rss.png"></a>
            </div>
        </header>

Hasta el momento llevamos esto


Exagerado, grotesto, estrámbotico y ordinario, pero viene la magia, viene el que todo lo puede, los estilos CSS que son de manera literal, el alma de las paginas web. Aplicamos los siguientes estilos CSS 

   body header #hcontenido {
    width:70%;
    padding-bottom:14px;
    float:left;
   }
   body header #hcontenido .titulo {
    text-transform:capitalize;
    text-align:left;
    padding-left:19px;
    font-family:'Raleway',sans-serif;
   }
   body header #hcontenido .descripcion {
    text-transform:capitalize;
    text-align:left;
    padding-left:19px;
    font-family:'Raleway',sans-serif;
    font-size:16px;
   }
   body header #busqueda {
    float:left;
    width:30%;
   }
   body header #busqueda input[type=text] {
    border:1px solid #2a2e31;
    background-color:#2d3035;
    color:#bcbcbc;
    border-radius:15px; 
    -moz-border-radius:15px; 
    -webkit-border-radius:15px; 
    padding:7px 12px;
   }
   body header #busqueda input[type=text]:hover {
    border:1px solid #FFF;
    transition:all ease-in .3s;
   }
   body header #busqueda input[type=button] {
    position:relative; 
    left:-6px;
    border:1px solid #FFF;
    background:#666; 
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e4f1f9', endColorstr='#d5e7f3',GradientType=0 ); 
    color:#FFF;
    cursor: pointer;
   }
   body header #busqueda input[type=button]:hover{
    background:#000; 
    transition:all ease-in .3s;
   }
   body header #suscripciones {
    display:block;
    clear:both;
    width:auto;
    height:auto;
    margin-left:66%;
   }
   body header #suscripciones a {
    padding-left:7px;
    padding-right:7px;
   }
   body header #suscripciones a img:hover {
    opacity:0.6;
    transition:all ease-in-out .3s;
   }

y pasamos a esto


Para la fuente del titulo use la fuente "Raleway" de google fonts, si desean usarla solo agreguen este codigo justo antes de </head>

 
<link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
Recuerda que esto solo es una representación de una cabecera, tu puedes personalizarla a tu gusto, aquí no doy mas que herramientas de enseñanzas, esto es todo por este tutorial, si tienes alguna duda, pregúntame, con gusto responderé. Nos vemos en la próxima parte.

Parte 3: El Menú desplegable

Enlaces para compartir en tu blog o pagina web.




Widget por Friki Bloggeo


5 comentarios :

Suscribirse a: Enviar comentarios ( Atom )