sábado, 29 de abril de 2017

Crea tu Web Responsive 3



Paleta de colores

Preparemos la gama de colores que utilizaremos en nuestra web, para ello visitamos la web https://www.materialpalette.com/ y seleccionamos dos colores, en este caso he seleccionado light blue y deep orange.
Una vez seleccionados los dos colores damos al botón de descarga y lo descargamos como CSS.
Abrimos dicho archivo seleccionamos su texto y lo copiamos a nuestro CSS, desde aquí iremos cambiando los colores de los apartados de nuestra web.
Se podría hacer incluyendo clases en el HTML, pero en nuestro caso lo haremos en los apartados del fichero CSS.

Cabecera

Vamos a cambiar el tamaño del texto y titulo de la cabecera, asi como el color (quitamos también el color para otras visualizaciones), daremos un margen interno (padding) y un margen superior e inferior, dando como automatico los márgenes laterales, damos también un borde redondeado, después de esto el CSS para la cabecera queda de la siguiente forma:
header{
         background: #0288D1; 
         color: #B3E5FC;
         padding:10px;
         margin:10 auto;
         border-radius:10px;
}
header h1 { 
         font-size:3em;
}
header p{
         font-size:1.5em;
}

Barra de menus

Para la barra de navegación o menú vamos a realizar algunos cambios además de poner los colores de nuestra paleta, cuando se este visualizando en un Ordenador o Tablet serán botones horizontales, en móvil pasaran a ser verticales, el código CSS seria asi:
nav{
         background: #03A9F4;  
         color: #212121;                
         width:100%;
         text-align:center;
         border-radius:10px;
}
nav ul{
         padding:5px;
         margin:5px;
         }
nav ul li{
         list-style:none;
         display:inline-block;
         width:100%;
         cursor:pointer;
         font-weight:bold;
         border-bottom:2px solid #BDBDBD;
         border-radius:10px;
}
nav ul li a{
         text-decoration:none;
}
nav ul a:hover{
         color:#B3E5FC;
         background:#FF5722;
         border-bottom:2px solid #03A9F4;
}
Este código lo incluimos en la parte global del CSS, lo que queramos cambiar para según que medidas de visualización lo iremos incluyendo en los apartados con los minimos de ancho, especificando solo lo que queramos cambiar.
En el código anterior hemos añadido margen interior y exterior para las listas que estén dentro del nav “nav ul”.
Despues para los ítems incluidos en lista y nav, les quitamos el estilo de lista (list-style), le ponemos un ancho del 100% para que ocupe cada uno el total (disminuir para ver como queda), ponemos el cursor para que cambie al pasar por el enlace, añadimos letra negrita y un borde inferior.
A los enlaces le quitamos el subrayado, añadimos color de letra y fondo.
Con “a:hover” indicamos el formato que tendrá cuando pongamos el cursor del raton encima, en este caso intercambiamos colores y eliminamos parte del subrayado del borde.

Contenido

Con el contenido vamos a incluir margen de 10 px,  padding de 10 px, borde redondeado, cambiamos los colores y eliminamos los colores según visualización, el apartado “section” lo dejamos en blanco por si nos hace falta mas adelante.
Cambiamos también el color para los “h2” que están dentro de “article”.
section{
}
article{
         background: #03A9F4;  
         color: #212121;
         padding:10px;
         margin:10px;
         border-radius:10px;
}
article img{
         width:200px;
         height:200px;
         float:left;
}
article h2{
         color:#B3E5FC;
}
Insertaremos en el html una imagen dentro del “article”, para ello la imagen la grabaremos en una carpeta llamada img dentro del espacio de trabajo donde tenemos los archivos de nuestra web, el código a insertar en el html es:
<figure>
<img src="img/logocabecera.jpg" alt="imagen">
</figure>
Con este código marcamos donde ira la imagen y con “alt” el texto que aparecerá si no carga o da error.
En el CSS hemos añadido un ancho y alto para la imagen, asi como que flote a la izquierda para que el texto pueda rellenar la parte derecha.

Aside (parte secundaria)

Aquí haremos también los cambios en márgenes y paddings, también color y forma de presentar los enlaces y títulos.
aside{
         background: #03A9F4;  
         color:#B3E5FC;
         padding:5px;
         margin:10px;
         border-radius:10px;
}
aside ul li{
         list-style:none;
         cursor:pointer;
}
aside ul li a{
         text-decoration:none;
         background: #03A9F4;  
         color: #212121;
}
aside ul li a:hover{
    color:#B3E5FC;
         background:#FF5722;
}
Cuando ponemos algo como “aside ul li a {…}” quiere decir que cambiaremos propiedades a los enlaces que están dentro de una lista desordenada dentro del aside.
Aquí también aparece “…a:hover” con este cambiamos las propiedades que queramos modificar cuando el cursor del raton se situe encima.

Footer(pie de pagina)

Hemos llegado a la parte final de nuestra web, en este caso damos los mismos colores de fondo y de texto que la cabecera, le ponemos margen y padding de 10 px y un borde redondeado, ocupara el 98% del ancho.
footer{
         background: #0288D1; 
         color: #B3E5FC;
         padding:10px;
         margin:10 auto;
         border-radius:10px;
         width:98%;
}

Fin del css

Con esto hemos terminado de diseñar el formato y estructura de nuestra web, os servirá de base para poder practicar, os aconsejo que cambiéis propiedades y que experimentéis con las paletas de colores y formas que podeis dar a la web.
Podeis ver como va quedando la web en el siguiente enlace.

No hay comentarios:

Publicar un comentario