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.
