05 junio 2014

[5] Como crear tu pagina web HTML5/CSS3 desde cero - La barra lateral

 

Publicaciones relacionadas: 
Continuamos con la serie de tutoriales y ya casi estamos en la recta final, este tutorial será bastante corto puesto a que ya hemos pasado la mayor parte, sin desacreditar a la barra lateral, también fundamental pues allí estarán ciertos elementos que son necesarios y que destacan en tu blog o pagina web.

Copia y pega el siguiente código entre las etiquetas <aside>...</aside> de tu pagina

             <div id="widget">
                 <h2>Iniciar sesión</h2>
                    <div class="wcontenido">
                     <form name="login" id="login">
                         <input type="text" name="user" value="Usuario" size="21"><br>
                         <input type="password" name="pass" value="Contraseña" size="21"><br>
                         <input type="button" name="button" value="Login">
                        </form>
                    </div> 

                 <h2>Disclaimer</h2>
                    <div class="wcontenido">
                     El contenido presente en este portal está protegido por una licencia de Creative Commons, el cual aprueba su uso, modificación y distribución avisando previamente al dueño del mismo y acreditando al final de la publicación.<a href="#">link</a> <span>hola</span>
                    </div> 
                    
                </div>

Hasta ahora se verá algo así



Añade los siguientes estilos CSS

   body aside #widget {
    padding-bottom:18px;
    font-family:'Raleway',sans-serif;
   }
   body aside h2 {
    width:78%;
    float:right;
    text-align:right;
    font-size:21px;

   }
   body aside .wcontenido {
    clear:both;
    text-align:left;
    text-align:justify;
    padding-left:4%;
    padding-right:4%;
    font-size:16px;
   }
   body aside .wcontenido form {
    text-align:center;
   }
   body aside .wcontenido form 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;
    /*MEJORAS 
    box-shadow:3px 3px 8px #333;
    -webkit-box-shadow:3px 3px 8px #333;
    -moz-box-shadow:3px 3px 8px #333;
    -o-box-shadow:3px 3px 8px #333;
    -ms-box-shadow:3px 3px 8px #333; */

   }

   body aside .wcontenido form input[type=text]:hover {
    border:1px solid #FFF;
    transition:all ease-in .3s;
   }
   body aside .wcontenido form input[type=password] {
    border:1px solid #2a2e31;
    background-color:#2d3035;
    color:#bcbcbc;
    border-radius:15px; 
    -moz-border-radius:15px; 
    -webkit-border-radius:15px; 
    padding:7px 12px;
    /*MEJORAS 
    box-shadow:3px 3px 8px #333;
    -webkit-box-shadow:3px 3px 8px #333;
    -moz-box-shadow:3px 3px 8px #333;
    -o-box-shadow:3px 3px 8px #333;
    -ms-box-shadow:3px 3px 8px #333; */

   }
   body aside .wcontenido form input[type=text]:password {
    border:1px solid #FFF;
    transition:all ease-in .3s;
   }
   body aside .wcontenido form 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;
    /*MEJORAS
    margin-left:-49px;
    border-radius:0px 15px 15px 0px;  
    padding:5px 14px 5px 14px;
    */

   }
   body aside .wcontenido form input[type=button]:hover{
    background:#000; 
    transition:all ease-in .3s;
   }
   
   body aside .wcontenido form label {
    font-weight:bold;
    font-size:10px;
   }

y ya tendremos algo mas o menos vistoso.


Mas adaptado a la anchura del sidebar, cabe destacar que he añadido algunas mejoras a la página como un fondo de madera, y unas cositas mas, eso va por tu parte, cuando finalice el ultimo tutorial, el numero 7 el cual se trata de extras y mejoras, estaré dejando el archivo que hemos creado a lo largo disponible para descargar, para que tu mismo revises y modifiques el portal a tu gusto. Hasta el siguiente tutorial

Siguiente parte: El pie de página

Enlaces para compartir en tu blog o pagina web.




Widget por Friki Bloggeo