Búsqueda en el Foro:
Buscar


Autor Mensaje
Mensaje30-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
Mensaje30-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
Mensaje30-09-2011, 02:26 (UTC)    
Título del mensaje:

Buen diseño se ve que es elegante 9.5/10.

Saludos
______________

Noticias Relevantes
Diablo III llegara el 15 de mayo
Se desvela Angry Birds Space
Call of Duty: Black Ops 2 podria anunciarse el 28
La portatil Neo Geo es oficial
Hemos activado nuestro foro... ¡ Entrar al foro !
Mensaje30-09-2011, 02:28 (UTC)    
Título del mensaje:

Muchas gracias a los dos
______________
/* Programador web freelance. */
/* twitter: @jfdelarosa */
Mensaje30-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.
Mensaje30-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 */
Mensaje30-09-2011, 21:56 (UTC)    
Título del mensaje:

muy buen diseño amigo,saludos
______________
Reglas del Foro

¿Dónde hacer mi tema/post?
Mensaje01-10-2011, 18:02 (UTC)    
Título del mensaje:

Muchas gracias
______________
/* Programador web freelance. */
/* twitter: @jfdelarosa */
Mensaje01-10-2011, 22:49 (UTC)    
Título del mensaje:

buen diseño
Mensaje01-10-2011, 23:12 (UTC)    
Título del mensaje:

La verdad que no me gusto tanto pero igual buen aporte suerte
______________
Votame
Click aqui
Mensaje02-10-2011, 15:46 (UTC)    
Título del mensaje:

Gracias
______________
/* Programador web freelance. */
/* twitter: @jfdelarosa */
Mensaje02-10-2011, 18:01 (UTC)    
Título del mensaje:

Muevo el tema a "Acerca de códigos".
Mensaje01-02-2012, 16:13 (UTC)    
Título del mensaje:

Este tema sera removido, ya que no cumple las reglas para realizar aportes.

Reglas para realizar aportes:
http://www.paginawebgratis.es/forum/viewtopic.php?t=66177


saludes,
Team-Soporte.
______________
Team-Soporte.
Moderador de PaginaWebGratis.es

www.team-soporte.es.tl | @jeremymolina
Mostrar mensajes anteriores:   


Powered by phpBB © 2001, 2005 phpBB Group