Publicado el Deja un comentario

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.
Please follow and like us:
Publicado el Deja un comentario

Crea tu Web Responsive 2

CSS, dando formato a la web

Diseño para móvil

Vamos a crear donde tenemos grabada
nuestra web index.html una carpeta que llamaremos “css” y dentro de esta
carpeta crearemos un archivo llamado “estilos.css”.
En el “head” de index, os recuerdo que
ya incluimos la siguiente línea: <link
rel=”stylesheet” href=”css/estilos.css”
type=”text/css”/>
, esta línea enlaza al archivo de estilos
que vamos a preparar a continuación.
Para comenzar con el formato de la
web, personalmente prefiero primero prepararla para móvil y después para
escritorio, por lo que debemos añadir la siguiente línea al “head”: <meta name=”viewport”
content=”width=device-width, initial-scale=1″>.
En el archivo estilos.css añadimos lo
siguiente:
@media screen and
(min-width:480px){}
@media screen and
(min-width:767px){}
@media screen and
(min-width:950px){}
Con lo que podemos poner dentro de las
llaves de cada uno los estilos y atributos para móvil, tablet y PC’s, debido al
minimo de ancho que especificamos en pixeles (480, 767 y 950).
Ahora vamos a diferenciar las partes
de nuestra web añadiendo colores llamativos al CSS para ver claramente las
partes, una vez que situemos todo bien pasaremos a poner una gama de colores menos
llamativa.
header{
         background:cyan;
}
nav{
         background:yellow;
}
section{
         background:brown;
}
article{
         background:red;
}
aside{
         background:blue;
}
footer{
         background:pink;
}
@media screen and
(min-width:480px){
}
@media screen and (min-width:767px){
header{
         background:green;
         }
nav{
         background:cyan;
}
section{
         background:pink;
}
article{
         background:yellow;
}
aside{
         background:red;
}
footer{
         background:brown;
}
}
@media screen and
(min-width:950px){      
}
Con el código anterior puesto en el
archivo css, una vez grabado, podréis observar, al ejecutar la web index.html
en el navegador, que al disminuir el tamaño los colores de fondo cambiaran. Con
esto hemos conseguido que al cambiar el tamaño de la visualización cambien los
colores de fondo, ahora vamos a cambiar también la disposición de los bloques
según se vean en un dispositivo u otro, para ello cambiamos el código css a:
*{
         margin:0px;
         padding:0px;
}
header,nav,section,article,aside,footer{
         display:block;
}
header{
         background:cyan;
}
nav{
         background:yellow;
}
section{
         background:brown;
}
article{
         background:red;
}
aside{
         background:blue;
}
footer{
         background:pink;
}
@media screen and
(min-width:480px){
}
@media screen and
(min-width:767px){
header{
         background:green;
         }
nav{
         background:cyan;
}
section{
         background:pink;
         display:inline-block;
         width:74%;
}
article{
         background:yellow;      
}
aside{
         background:red;
         display:inline-block;
         vertical-align:top;
         width:23%;        
}
footer{
         background:brown;
}
}
@media screen and
(min-width:950px){      
}
Quedando nuestra web en modo
escritorio:

Y en modo móvil:

Os explico las modificaciones en este
código, lo primero que cambiamos es:
*{
         margin:0px;
         padding:0px;
}
header,nav,section,article,aside,footer{
         display:block;
}
Con esto indicamos con el “*”
(selector universal) que eliminamos todos los márgenes y paddings, el padding
es como un margen interior.
Despues separamos todos los
identificadores usados con “,” para darles a todos formato para que actúen como
bloques y se visualicen uno debajo del otro según el orden que tienen en el
html.
Seguidamente, dentro del apartado css
para las tablets minimo de ancho 767px, introducimos el siguiente código:
section{
         background:pink;
         display:inline-block;
         width:74%;
}
article{
         background:yellow;      
}
aside{
         background:red;
         display:inline-block;
         vertical-align:top;
         width:23%;
}
Como podeis ver, el primer cambio es
que en vez de visualizarse en bloque como indicamos anteriormente, ahora
indicamos que se visualicen en línea e indicamos un ancho en porcentaje para
que quepan las dos partes, alineando el “aside” verticalmente arriba (top). El
ancho se puede indicar mediante pixeles, os recomiendo hacer cambios y probar.
Con esto ya tenemos la web preparada
para varios dispositivos, ahora pasaremos a darle un formato mejor.
En la siguiente entrada profundizare en el formato CSS para cada componente de nuestra web.
Gracias.
Please follow and like us: