Después de una larga espera aquí esta la continuación del tercer capitulo de "Asi las armamos en español". Serie de videotutoriales en los que mostrare como maquetar un diseño en XHTML con CSS desde un archivo fuente PSD de Photoshop.
Este capitulo esta dividido en dos partes. La primera parte les hablare del Concepto de Modelo de Bloque (The Box Model Concept), concepto muy importante de entender antes de que podamos empezar a darle formar a nuestro Layout. En la segunda parte esta ya de lleno a la armada de nuestra web con el CSS.
Te recuerdo ver las primeras partes de esta serie: Convertir PSD en XHTML/CSS parte 1, Convertir PSD en XHTML/CSS, parte 2 y Convertir PSD en XHTML/CSS parte 3.
css
html
photoshop
xhtml
videotutorial
gracias micha y los esperaremos con ansias..
).! buen trabajo quedo excelente , bien explicado ! . Carmen-blog :
Código :
/* RESET */
*{ margin: 0; padding: 0; border: 0; }
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}
h1{ font-size: 26px; }
h2 { font-size: 20px; }
h3 { font-size: 16px; }
h4 { font-size: 14px; }
h5 { font-size: 12px; }
h6 { font-size: 10px; }
li{ list-style: none; }
a{ text-decoration: none; }
a:hover{ text-decoration: underline; }
/* ESTILOS GENERALES */
div#encabezado{
background-image:url("../imagenes/encabezado_rayas.jpg");
background-repeat:repeat-x;
height:100px;
}
div#galerias{
background-image:url("../imagenes/slogan_bg.jpg");
background-repeat:repeat-x;
height:290px;
}
div#navegacion{
background-image:url("../imagenes/navegacion_rayas.jpg");
background-repeat:repeat-x;
height:50px;
}
div#contenido{
background-image:url("../imagenes/contenido_degrade.jpg");
background-repeat:repeat-x;
background-color: #fff;
}
div#footer{
background-image:url("../imagenes/sombra_footer.jpg");
background-repeat:repeat-x;
background-color: #637050;
}
/* CLASES GENERALES */
div.interior{
width:960px;
margin:0 auto;
}
div.clearfix{
width:1px;
height:1px;
display:block;
clear:both;
content:'.';
}
div.separador{
background-image: url("../imagenes/separador.jpg");
width: 260px;
height: 2px;
}
div.seccion{
padding: 30px 0 0 18px;
}
/*ENCABEZADO*/
div#nombres{
position:relative;
height:100px;
}
div#nombres h1{
line-height:100px;
color:#fff;
letter-spacing: -2px;
}
div#nombres h1 span{font-weight:lighter}
div#nombres small{
position:absolute;
right:0px;
top:44px;
letter-spacing:1px;
color:#fff;
}
/* GALERIA */
div#descripcion{
width:477px;
float:left;
margin-top:45px;
}
div#descripcion div#links{
margin:30px 0;
}
div#descripcion div#links a#icono_uno{
width:42px;
height:43px;
background-image:url("../imagenes/slogan_icons_sprite.png");
background-position:0 0;
padding:15px 0 15px 45px;
margin-right:34px;
}
div#descripcion div#links a#icono_dos{
width:42px;
height:43px;
background-image:url("../imagenes/slogan_icons_sprite.png");
background-position:-266px -8px;
background-repeat:no-repeat;
padding:10px 0 15px 45px;
}
div#descripcion div#links a#icono_uno, a#icono_dos{
text-decoration:underline;
color:#8d8071;
}
div#descripcion h1{
color:#433d33;
font-size:36px;
padding-bottom:15px;
}
div#descripcion span{
font-weight: normal;
color: #433d36;
}
div#descripcion span{
font-weight:lighter;
}
div#descripcion{
color:#887e70;
font-size:14px;
line-height:31px;
}
div#slides{
float:right;
background-color:#fff;
margin-top:20px;
border:1px solid #e6dfd6;
}
/*div#slides ul li.thumb{
display:none;
}
div#slides ul li.slide_default{
display:block;
}*/
div#slides img{
padding:10px;
}
/*MENU */
ul#menu_principal{
height:50px;
}
ul#menu_principal li{
line-height:50px;
float:left;
padding-right:50px;
}
ul#menu_principal li a{
padding:18px 0;
color:gray;
font-family:Myriad Pro, sans serif;
}
ul#menu_principal li a:hover{
color:#f4f4f4;
text-decoration:none;
}
ul#menu_principal li a.active{
color:#f4f4f4;
background-image:url("../imagenes/menu_active.png");
background-repeat:no-repeat;
background-position:bottom;
}
/*CONTENIDO PRIMARIO */
div#primario{
width:619px;
float:left;
}
div#primario div#medio{
background-color:#f1f1f1;
border:1px solid #e7e6e6;
}
div#primario div#medio ul{
padding-bottom:19px;
padding-left:13px;
}
div#primario div#medio ul li{
background-image:url(../imagenes/mas_bullet.png);
background-repeat:no-repeat;
margin-top:15px;
padding-left:24px;
list-style-position:inside;
font-family:Arial, san-serif;
font-size:12px;
color:#6f655a;
}
div#primario h3{
font-size:20px;
padding-top:24px;
padding-bottom:30px;
color:#3c3c3c;
}
div#primario p, div#primario p a{
font-family: Arial, sans-serif;
font-size:12px;
line-height:25px;
color:#6f655a;
}
div#primario a{ text-decoration: underline; }
/* BLOG */
div.post{ padding: 0 0 35px 0; }
div.post-arriba, div.post-abajo{ overflow: hidden; }
div.post-arriba{ padding: 0 0 5px 0; }
div.titulo{ float: left;}
div.post-arriba span.comentarios{
float: right;
background-image:url("../imagenes/comentario_bg.png");
background-repeat: no-repeat;
width: 90px;
height: 26px;
font-size: 13px;
letter-spacing: .5px;
text-align: center;
color: #fff;
padding: 3px 0 0 0;
margin:0 230px 0 0;
}
div.post-abajo div.post-contenido{ width: 379px; float: left; }
div#primario div.post-abajo div.post-contenido a{ color:#342e28; }
div.post-abajo div.post-contenido p.metadata{ padding: 0 0 5px 0 }
div#primario div.post-abajo div.post-contenido p.metadata a{text-decoration: none;}
div.post-abajo div.thumb-post{ float: right; padding: 5px 5px 2px 5px; background-color: #fff; border: 1px solid #aaacac;}
div.post-abajo div.thumb-post img{ border: 1px solid #aaacac; }
/* CONTENIDO SECUNDARIO */
div#secundario{
width: 300px;
float: right;
background-color:#e8e8e8;
margin: 2px 0 0 0;
}
div#secundario div#proyectos{
padding:0 7px;
}
div#secundario div#proyectos img{
padding:9px 0;
}
div#secundario div#contacto{
width:260px;
background-image:url("../imagenes/twitter_bg.png");
background-repeat:no-repeat;
padding-top:20px;
padding-bottom:24px;
margin-left:17px;
}
div#secundario h3{
padding-top:25px;
padding-left:20px;
padding-bottom:14px;
color:#777777;
}
div#secundario div#contacto h5{
font-size:18px;
padding-bottom:20px;
color:#676767;
}
div#secundario div#contacto p{
font-size:10px;
font-family:Arial;
line-height:15px;
color:#837e79;
}
div#secundario div#contacto a{
color:#3fabe2;
text-decoration:underline;
}
/* SECUNDARIO BLOG */
div#secundario li{ padding: 10px 0 0 0; }
div#secundario a{ color:#342e28; }
div#secundario div#recent-posts{ padding: 40px 0 20px 18px; }
/* FOOTER */
div#footer ul{
float:left;
margin-top:21px;
}
div#footer ul li{
float:left;
padding-right:23px;
}
div#footer ul li a{
color:#aa9c8b;
text-decoration:underline;
font-family:Arial, sans serif;
font-size:11px;
}
div#footer ul li#home a{
text-decoration:none;
}
div#footer div#footer_info{
background-image:url("../imagenes/copyright_bg.png");
background-repeat:no-repeat;
width:300px;
height:75px;
float:right;
}
div#footer div#footer_info h5, div#footer div#footer_info p{
margin-top:21px;
margin-left:23px;
color:#fff;
font-size:14px;
}
div#footer div#footer_info p{
margin-top:!3px; color:#aa9c8b; font-size:10px;
}
div#footer div#footer_info p a{
color:#aa9c8b;
text-decoration:underline;
}
Carmen-blog :
Código :
/* RESET */
*{ margin: 0; padding: 0; border: 0; }
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}
h1{ font-size: 26px; }
h2 { font-size: 20px; }
h3 { font-size: 16px; }
h4 { font-size: 14px; }
h5 { font-size: 12px; }
h6 { font-size: 10px; }
li{ list-style: none; }
a{ text-decoration: none; }
a:hover{ text-decoration: underline; }
/* ESTILOS GENERALES */
div#encabezado{
background-image:url("../imagenes/encabezado_rayas.jpg");
background-repeat:repeat-x;
height:100px;
}
div#galerias{
background-image:url("../imagenes/slogan_bg.jpg");
background-repeat:repeat-x;
height:290px;
}
div#navegacion{
background-image:url("../imagenes/navegacion_rayas.jpg");
background-repeat:repeat-x;
height:50px;
}
div#contenido{
background-image:url("../imagenes/contenido_degrade.jpg");
background-repeat:repeat-x;
background-color: #fff;
}
div#footer{
background-image:url("../imagenes/sombra_footer.jpg");
background-repeat:repeat-x;
background-color: #637050;
}
/* CLASES GENERALES */
div.interior{
width:960px;
margin:0 auto;
}
div.clearfix{
width:1px;
height:1px;
display:block;
clear:both;
content:'.';
}
div.separador{
background-image: url("../imagenes/separador.jpg");
width: 260px;
height: 2px;
}
div.seccion{
padding: 30px 0 0 18px;
}
/*ENCABEZADO*/
div#nombres{
position:relative;
height:100px;
}
div#nombres h1{
line-height:100px;
color:#fff;
letter-spacing: -2px;
}
div#nombres h1 span{font-weight:lighter}
div#nombres small{
position:absolute;
right:0px;
top:44px;
letter-spacing:1px;
color:#fff;
}
/* GALERIA */
div#descripcion{
width:477px;
float:left;
margin-top:45px;
}
div#descripcion div#links{
margin:30px 0;
}
div#descripcion div#links a#icono_uno{
width:42px;
height:43px;
background-image:url("../imagenes/slogan_icons_sprite.png");
background-position:0 0;
padding:15px 0 15px 45px;
margin-right:34px;
}
div#descripcion div#links a#icono_dos{
width:42px;
height:43px;
background-image:url("../imagenes/slogan_icons_sprite.png");
background-position:-266px -8px;
background-repeat:no-repeat;
padding:10px 0 15px 45px;
}
div#descripcion div#links a#icono_uno, a#icono_dos{
text-decoration:underline;
color:#8d8071;
}
div#descripcion h1{
color:#433d33;
font-size:36px;
padding-bottom:15px;
}
div#descripcion span{
font-weight: normal;
color: #433d36;
}
div#descripcion span{
font-weight:lighter;
}
div#descripcion{
color:#887e70;
font-size:14px;
line-height:31px;
}
div#slides{
float:right;
background-color:#fff;
margin-top:20px;
border:1px solid #e6dfd6;
}
/*div#slides ul li.thumb{
display:none;
}
div#slides ul li.slide_default{
display:block;
}*/
div#slides img{
padding:10px;
}
/*MENU */
ul#menu_principal{
height:50px;
}
ul#menu_principal li{
line-height:50px;
float:left;
padding-right:50px;
}
ul#menu_principal li a{
padding:18px 0;
color:gray;
font-family:Myriad Pro, sans serif;
}
ul#menu_principal li a:hover{
color:#f4f4f4;
text-decoration:none;
}
ul#menu_principal li a.active{
color:#f4f4f4;
background-image:url("../imagenes/menu_active.png");
background-repeat:no-repeat;
background-position:bottom;
}
/*CONTENIDO PRIMARIO */
div#primario{
width:619px;
float:left;
}
div#primario div#medio{
background-color:#f1f1f1;
border:1px solid #e7e6e6;
}
div#primario div#medio ul{
padding-bottom:19px;
padding-left:13px;
}
div#primario div#medio ul li{
background-image:url(../imagenes/mas_bullet.png);
background-repeat:no-repeat;
margin-top:15px;
padding-left:24px;
list-style-position:inside;
font-family:Arial, san-serif;
font-size:12px;
color:#6f655a;
}
div#primario h3{
font-size:20px;
padding-top:24px;
padding-bottom:30px;
color:#3c3c3c;
}
div#primario p, div#primario p a{
font-family: Arial, sans-serif;
font-size:12px;
line-height:25px;
color:#6f655a;
}
div#primario a{ text-decoration: underline; }
/* BLOG */
div.post{ padding: 0 0 35px 0; }
div.post-arriba, div.post-abajo{ overflow: hidden; }
div.post-arriba{ padding: 0 0 5px 0; }
div.titulo{ float: left;}
div.post-arriba span.comentarios{
float: right;
background-image:url("../imagenes/comentario_bg.png");
background-repeat: no-repeat;
width: 90px;
height: 26px;
font-size: 13px;
letter-spacing: .5px;
text-align: center;
color: #fff;
padding: 3px 0 0 0;
margin:0 230px 0 0;
}
div.post-abajo div.post-contenido{ width: 379px; float: left; }
div#primario div.post-abajo div.post-contenido a{ color:#342e28; }
div.post-abajo div.post-contenido p.metadata{ padding: 0 0 5px 0 }
div#primario div.post-abajo div.post-contenido p.metadata a{text-decoration: none;}
div.post-abajo div.thumb-post{ float: right; padding: 5px 5px 2px 5px; background-color: #fff; border: 1px solid #aaacac;}
div.post-abajo div.thumb-post img{ border: 1px solid #aaacac; }
/* CONTENIDO SECUNDARIO */
div#secundario{
width: 300px;
float: right;
background-color:#e8e8e8;
margin: 2px 0 0 0;
}
div#secundario div#proyectos{
padding:0 7px;
}
div#secundario div#proyectos img{
padding:9px 0;
}
div#secundario div#contacto{
width:260px;
background-image:url("../imagenes/twitter_bg.png");
background-repeat:no-repeat;
padding-top:20px;
padding-bottom:24px;
margin-left:17px;
}
div#secundario h3{
padding-top:25px;
padding-left:20px;
padding-bottom:14px;
color:#777777;
}
div#secundario div#contacto h5{
font-size:18px;
padding-bottom:20px;
color:#676767;
}
div#secundario div#contacto p{
font-size:10px;
font-family:Arial;
line-height:15px;
color:#837e79;
}
div#secundario div#contacto a{
color:#3fabe2;
text-decoration:underline;
}
/* SECUNDARIO BLOG */
div#secundario li{ padding: 10px 0 0 0; }
div#secundario a{ color:#342e28; }
div#secundario div#recent-posts{ padding: 40px 0 20px 18px; }
/* FOOTER */
div#footer ul{
float:left;
margin-top:21px;
}
div#footer ul li{
float:left;
padding-right:23px;
}
div#footer ul li a{
color:#aa9c8b;
text-decoration:underline;
font-family:Arial, sans serif;
font-size:11px;
}
div#footer ul li#home a{
text-decoration:none;
}
div#footer div#footer_info{
background-image:url("../imagenes/copyright_bg.png");
background-repeat:no-repeat;
width:300px;
height:75px;
float:right;
}
div#footer div#footer_info h5, div#footer div#footer_info p{
margin-top:21px;
margin-left:23px;
color:#fff;
font-size:14px;
}
div#footer div#footer_info p{
margin-top:!3px; color:#aa9c8b; font-size:10px;
}
div#footer div#footer_info p a{
color:#aa9c8b;
text-decoration:underline;
}
Carmen-blog :
Alan-blog :
