Autor
Mensaje
buzzdungeon
Destacado
Ubicación: México
30-09-2011, 02:06 (UTC) Título del mensaje : [Css] Simple Blue by Buzzdungeon
Esta plantilla la empece a hacer ayer
, esta hecha desde 0
Vista previa
Vista previa Online
http://dl.dropbox.com/u/39668621/templates/simple-blue.html
Descarga (sin adaptar)
http://dl.dropbox.com/u/39668621/templates/simple-blue-by-juanfer.zip
Texto por encima de la pagina
Código: <div id="contenedor">
<div id="header">
<a href="#">
<h1>Titulo</h1>
<h2>Descripcion</h2>
</a>
<ul id="top-menu">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
<div class="header-izq"></div>
<div class="header-der"></div>
<div id="left">
<div id="separador" class="separador-sidebar">
<h2>Box 1</h2>
</div>
<div class="sombra-izq"></div>
<p>
<ul style="padding-top:10px;">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</p>
<div id="separador" class="separador-sidebar">
<h2>Box 2</h2>
</div>
<div class="sombra-izq"></div>
<p>Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar</p>
</div>
<div id="right">
<div class="sombra-der"></div>
<div id="separador" class="separador-main">
<h2>Titulo</h2>
</div>
<p>
Texto por debajo de la pagina
Código: </p>
</div>
<div id="footer">
Plantilla creada por <a href="http://buzzdungeon.es.tl">Buzzdungeon</a>.
</div>
</div>
Css code sin style tags
Código: </style>
<link rel="stylesheet" href="http://dl.dropbox.com/u/39668621/templates/reset.css" />
<style>
table[height="102"] {margin:0 auto;}
li.nav_element{display: none;}
li.nav_element a{display: none;}
h1#title{display: none;}
h2#title span {display: none;}
div.header{display: none;}
li.nav_element{list-style-type: none;}
li.nav_element{display: none;}
body{
background:#cecece;
font-family:'Hoefler Text', Garamond, Georgia, 'Times New Roman', Times, serif;
}
a{
color:#5285A8;
text-decoration:none;
text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
}
a:hover{
color:#54B0BF;
}
#contenedor{
-webkit-box-shadow:0px 2px 8px rgba(0,0,0,0.3);
-moz-box-shadow:0px 2px 8px rgba(0,0,0,0.3);
background:#e6e6e6;
box-shadow:0px 2px 8px rgba(0,0,0,0.3);
margin:10px auto 15px auto;
min-height:200px;
width:900px;
}
#header{
-webkit-box-shadow:0 2px 4px rgba(0,0,0,0.2);
-moz-box-shadow:0 2px 4px rgba(0,0,0,0.2);
background: #90CBF5;
box-shadow:0 2px 4px rgba(0,0,0,0.2);
height: 130px;
left:-15px;
position: relative;
top: 5px;
width: 930px;
z-index: 100;
}
#top-menu{
float:right;
list-style:none;
margin:0;
}
#top-menu li{
border-left:1px solid #67AEE0;
border-right:1px solid rgba(255,255,255,0.3);
float:left;
min-width:30px;
padding:0 8px;
}
#top-menu li:first-child{
border-left:none;
}
#top-menu li:last-child{
border-right:none;
}
#top-menu li a{
color: #fff;
text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
}
#top-menu li a:hover{
color:#DEF1FF;
}
#top-menu li a:active{
color:#F0F9FF;
}
.header-izq{
border-color: transparent #67AEE0 transparent transparent;
border-style:solid;
border-width:15px;
height:0px;
left: -30px;
position: relative;
top: -10px;
width:0px;
z-index: -1;
}
.header-der{
border-color: transparent transparent transparent #7CBAE6;
border-style:solid;
border-width:15px;
float:right;
height:0px;
position: relative;
right: -30px;
top: -40px;
width:0px;
z-index: -1;
}
#left{
float:left;
width:200px;
}
#right{
float:right;
margin:-30px 0 0 0;
width:690px;
}
#separador{
background: #90CBF5;
position: relative;
z-index: 100;
}
.separador-sidebar{
-webkit-box-shadow:2px 2px 0 rgba(0,0,0,0.1);
-moz-box-shadow:2px 2px 0 rgba(0,0,0,0.1);
box-shadow:2px 2px 0 rgba(0,0,0,0.1);
float: left;
height: 50px;
left:-15px;
top: 0px;
width: 215px;
}
.separador-main{
-webkit-box-shadow:2px 2px 0 rgba(0,0,0,0.1);
-moz-box-shadow:2px 2px 0 rgba(0,0,0,0.1);
box-shadow:2px 2px 0 rgba(0,0,0,0.1);
float: right;
height: 50px;
right:-15px;
top: -30px;
width: 680px;
}
#header h1{
font-size:2.6em;
letter-spacing:5px;
margin:0;
padding:15px 0 0 10px;
}
#header h2{
font-size:2em;
letter-spacing:2px;
margin:0;
padding:5px 0 0 20px;
}
h1,h2{
color: #fff;
text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}
#separador h2{
font-size: 30px;
margin:0;
padding-top: 6px;
text-align: center;
}
.sombra-izq{
border-color: transparent #67AEE0 transparent transparent;
border-style:solid;
border-width:15px;
height:0px;
left: -30px;
position: relative;
top: 35px;
width:0px;
z-index: -1;
}
.sombra-der{
border-color: transparent transparent transparent #7CBAE6;
border-style:solid;
border-width:15px;
float:right;
height:0px;
position: relative;
right: -30px;
top: 35px;
width:0px;
z-index: -1;
}
#left p{
font-size: 14px;
line-height: 22px;
padding: 30px 25px 0px 25px;
}
#right p{
clear:right;
font-size: 14px;
line-height: 22px;
padding: 0px 25px 0px 25px;
}
#left ul{
text-align:center;
min-width:100px;
}
#left ul li{
border-bottom:1px solid rgba(0,0,0,.1);
padding:5px 0;
}
#footer{
border-top:1px solid rgba(0,0,0,0.1);
clear:both;
margin:0 auto;
padding:6px 0;
text-align:center;
width:600px;
}
Dudas o sugerencias mandenme un mp!
Saludos
______________
/* Programador web freelance. */
/* twitter:
@jfdelarosa */
Ultima edición por buzzdungeon el Dom Oct 02, 2011 2:06 pm; editado 1 vez
↑
insaniquarium-deluxe
since-2007
Ubicación: Santiago, Chile
30-09-2011, 02:19 (UTC) Título del mensaje :
Me gustó, buen diseño
______________
Ultima edición por insaniquarium-deluxe el Jue Sep 29, 2011 10:20 pm; editado 1 vez
↑
noti-gamer
Destacado
Ubicación: Adonde vivo
30-09-2011, 02:26 (UTC) Título del mensaje :
↑
buzzdungeon
Destacado
Ubicación: México
30-09-2011, 02:28 (UTC) Título del mensaje :
Muchas gracias a los dos
______________
/* Programador web freelance. */
/* twitter:
@jfdelarosa */
↑
brianpwg
Semi-Experto
30-09-2011, 03:18 (UTC) Título del mensaje : Re: [Diseño Css] Simple Blue by Buzzdungeon
Yo Tengo un duda y la quiero hacer en general.
Creo que la etiqueta </style> cuando la colocamos en el CCSE no hace un error? Por que va al ultimo de todo el codigo esa etiqueta creo. Noce si sera haci, yo lo probe y los codigos me los visualiza como texto.
↑
buzzdungeon
Destacado
Ubicación: México
30-09-2011, 03:34 (UTC) Título del mensaje : Re: [Diseño Css] Simple Blue by Buzzdungeon
@brianpwg
eso es especial para que se pueda agregar el código en este caso el css externo (reset css) entre las etiquetas head, es un truco simple e ingenioso.
si visualizas el codigo fuente veras que la estructura sera algo asi
Cita:
<head>
<style>
</style>
Aqui podemos poner contenido en el head
<style>
css style
</style>
</head>
<body>
texto por encima y debajo de la pag
</body>
si dices que lo visualiza como texto, cambia el <style> por <style type="text/css">
saludos
______________
/* Programador web freelance. */
/* twitter:
@jfdelarosa */
↑
nuestrasxarlas
Semi-Experto
Ubicación: España
↑
buzzdungeon
Destacado
Ubicación: México
01-10-2011, 18:02 (UTC) Título del mensaje :
Muchas gracias
______________
/* Programador web freelance. */
/* twitter:
@jfdelarosa */
↑
desingics
Nuevo
01-10-2011, 22:49 (UTC) Título del mensaje :
buen diseño
↑
revolutionteam-css
Destacado
01-10-2011, 23:12 (UTC) Título del mensaje :
La verdad que no me gusto tanto pero igual buen aporte suerte
______________
Votame
Click aqui
↑
buzzdungeon
Destacado
Ubicación: México
02-10-2011, 15:46 (UTC) Título del mensaje :
Gracias
______________
/* Programador web freelance. */
/* twitter:
@jfdelarosa */
↑
ipwg
Semi-Experto
02-10-2011, 18:01 (UTC) Título del mensaje :
Muevo el tema a "
Acerca de códigos ".
↑
team-soporte
Semi-Experto
↑