Estilos CSS para Web Responsive

por | Mar 4, 2016 | CSS | 0 Comentarios

estilos-css-responsive

En el articulo anterior Hacer Pagina Web Responsive desarrollamos la estructura de un sitio web responsive, ahora desarrollaremos los estilos para esa pagina web. Una vez hayas agregado la información del archivo CSS, el contenido se organizara en sitio web, de manera que cuando escalas el navegador, podran los elementos que agregamos como el icono de menu para moviles.

Ver Ejemplo: Ejemplo Tutorial Responsive.

Modificar la hoja de Estilos CSS para Web Responsive

Abriremos nuestro archivo estilos.css y empezaremos a agregar los estilos principales que afectaran a todo nuestro sitio web. Agregamos al archivo las siguientes lineas de código.

@charset "utf-8";
/* CSS Document */
/* Estilos Principales */
{
margin: 0;
border: 0;
padding: 0;
}
body {
background: #f5f5f5;
font: 14px/20px Arial, San-Serif;
color: #555;
margin: 0;
max-width: 1920px;
}
h1 {
text-align: center;
font-size: 180%;
line-height: 120%;
padding: 2% 0;
font-family: "Bebas Neue";
}
h2 {
text-decoration: underline;
line-height: 280%;
padding-left: 2%;
font-family: "Bebas Neue";
}
h3 {
line-height: 110%;
padding: 1% 0;
font-family: "Bebas Neue";
}
p {
padding: 0%;
color: #333;
}
img {
text-align: center;
max-width: 100%;
height: auto;
width: auto;
}
a {
color: #FFF;
text-decoration: none;
font-size: 20px;
}
a:hover {
color: #ccc;
}
header {
background: #333;
width: 100%;
height: 86px;
position: fixed;
top: 0;
left: 0;
z-index: 100;
opacity: 0.90;
padding-bottom: 2px;
}
#logo {
margin: 20px;
float: left;
width: 200px;
height: 60px;
background: url(../img/logo.png) no-repeat center;
}
nav {
float: right;
padding: 35px 20px 20px 0;
 
}
#menu-icon {
display: hidden;
width: 40px;
height: 40px;
background: url(../img/menu-icon.png) center;
}
a:hover#menu-icon {
border-radius: 4px 4px 0 0;
}
nav ul li {
display: inline-block;
float: left;
padding: 10px;
font-family: "Bebas Neue";
font-size: 24px;
}
.current {
color: #ccc;
}

Como podemos ver hemos agregado muchos estilos, sin embargo estos son estilos principales, debemos también agregar los de las etiquetas adicionales que hemos creado. En el código mostrado anteriormente vemos que tenemos los estilos de varias etiquetas que habíamos agregado en el articulo anterior. De esta manera podemos ir entendiendo la estructura que debe tener un sitio para contener propiedades responsive.

 

Agregando Estilos CSS de Banner

Nos centraremos en los estilos del banner que hemos agregado a la pagina web responsive, esto determinara la organización y visualización de este elemento dentro de nuestro sitio web. Agregamos las siguientes lineas a nuestro archivo CSS.

/* Estilos Principales banner*/
banner {
margin-top: 50px;
}
banner img{
width: 100%;
height: 100%;
margin-bottom: 30px;
margin-top: 86px;
border-bottom: #333 2px solid;
}
banner2 {
text-align: center;
}
banner2 img{
color: #999;
margin: 0 auto;
width: 100%;
max-width: 1080px;
height: 150px;
margin-top: 100px;
margin-bottom: 30px;
display: block;
}

 

Agregar Estilos CSS de Secciones

Uno de los elementos mas importantes de la estructura de nuestro sitio son las etiquetas de <section>, <aside> y <article> en ellas descargaremos los estilos que contendrán todos los elementos mostrados dentro de estas etiquetas. Agregamos las siguientes lineas a nuestro archivo.

/* Estilos Principales Secciones */
section {
width: 29%;
float: left;
margin-bottom: 2%;
margin-left: 2%;
margin-right: 2%;
text-align: center;
}
.clear {
clear: both;
}
hr {
width: 80%;
}
article {
float: left;
margin: 0 auto;
width: 50%;
height: auto;
padding: 4%;
}
aside {
float: right;
margin: 0 auto;
width: 35%;
height: auto;
padding: 3%
}

 

Agregar Estilos CSS de Titulos

Agregaremos los estilos a los títulos de la pagina web responsive, debemos agregar las siguientes lineas a nuestro archivo css.

/* Estilos Principales Titulos Pagina*/
titulo {
	width: 100%;
}
titulo h1 {
	margin-top: 90px;
	font-size: 50px;
	padding-top: 10px;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 0;
	margin-bottom: 0;
}
titulo h2 {
	text-align: center;
	text-decoration: none;
	padding: 0 10px;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 40px;
	margin-left: 0;
	line-height: 20px;
	font-weight: normal;
}

 

Agregar Estilos CSS de Botones y Listas

Agregaremos los estilos a los botones y la lista que aparece a la derecha de nuestro ejemplo de pagina web responsive, debemos agregar las siguientes lineas a nuestro archivo css para los botones y la lista.

/* Estilos Principales boton*/
#boton {
	background: #333;
	color: #FFF;
	padding: 10px;
	border: 0px;
}
#boton:hover {
	background: #fafafa;
	color: #333;
	cursor: pointer;
}
/* Estilos Principales Lista Nosotros*/
ul.nosotros li {
	padding-left: 1%;
}

 

Agregar Estilos CSS de Footer

Por ultimo agregaremos los estilos a los dos pie de pagina como vemos al final de nuestro ejemplo de pagina web responsive, debemos agregar las siguientes lineas a nuestro archivo css para el footer.

/* Estilos Principales Footer*/
footer {
	background: #333;
	width: 100%;
	overflow: hidden;
	opacity: 0.90;
	padding-top: 20px;
}
footer p, footer h3 {
	color: #FFF;
}
footer p a {
	color: #FFF;
	text-decoration: none;
}
ul.social li {
	display: inline;
}
ul.social li img {
	height: 60px;
}
footer.second {
	border-top: 1px solid #999;
	background-color: #333;
	text-align: center;
	max-height: 50px;
	opacity: 0.95;
}

 

Agregar Estilos CSS Adaptable a Dispositivos

Para poder escalar todos nuestros elementos, debemos crear estilos para cada pantalla. En CSS aregamos estos estilos utilizando la propiedad @media, con esta decidiremos un estilo diferente para cada uno de los tamaños de pantalla de donde accede nuestro usuario. podemos escalar nuestro navegador para ver como se acomodan los elemntos de nuestro sitio, revisa nuestro ejemplo de pagina web responsive. Agreguemos las ultimas lineas a nuestro archivo css para el footer.

/*Adapatacion a dispositivos moviles*/
/*----------------------media-----------------------*/
@media only screen and (max-width: 478px) {
 body {
 position: absolute;
}
}
@media only screen and (max-width: 540px) {
 body {
 position: absolute;
 }
}
@media only screen and (max-width: 920px) {
 header{
 position: absolute;
 }
 #menu-icon {
 display: inline-block;
 }
 nav ul, nav:active ul {
 display: none;
 position: absolute;
 padding: 20px;
 background: #333;
 border: 1px solid #FFF;
 right: 20px;
 top: 60px;
 width: 50%;
 border-radius: 2px 0 2px 2px;
 }
 nav li {
 text-align: center;
 width: 100%;
 padding: 10px 0;
 margin: 0;
 }
 nav:hover ul {
 display: block;
 }
 section {
 float: left;
 width: 100%;
 margin: 0;
 padding: 0;
 }
 article {
 float: left;
 width: 100%;
 margin: 0;
 padding: 0;
 }
 aside {
 float: left;
 width: 100%;
 margin: 0;
 padding: 0;
 }

Al agregar las ultimas lineas nuestro sitio web debe estar completamente adaptable a dispositivos móviles y ya esta listo para ser publicado o que sigas agregando mas pestañas con la misma plantilla. Con este ejemplo te he entregado muchos elementos con los que puedes agregar mas contenido y elaborar un sitio con tu imagen. Espero que todo haya quedado claro y No olvides comentar si tienes alguna duda y si te ha gustado el articulo compártelo ¡Muchas Gracias!

Ver Ejemplo: Ejemplo Tutorial Responsive.
Ver Primera Parte: Hacer Pagina Web Responsive.
Ver Estrucutra de HTML5 y CSS3: Web Responsive HTML5/CSS3

 

Enviar comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

 
Share This