-
buzzdungeon
Destacado
Ubicación: México
|
 13-04-2012, 19:18 (UTC)
Título del mensaje: [Cssdesign] Mi template |
|
|
Bueno, no quiero que este diseño se desperdicie, asi que lo posteo, tarde casi 3 días haciéndolo (hace muchooo tiempo xP).
Lo posteo por que no regresare a pwg...
No esta terminada, pero esta al 90% solo falta agregarle padding a los comentarios y ponerle tamaños a los títulos, pero creo que pueden hacer eso 
incluye varias cosas que yo mismo cree, que luego iba a postear
Vista previa:
http://buzzdungeon.es.tl/inicio.htm
http://i.imm.io/mfMU.png
Texto por encima de la pag
Código: <div id="topbar">
</div>
<div id="menu" class="shadow">
<div class="container">
<ul>
<li><a href="/inicio.htm">Inicio</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<form method="get" action="search.htm">
<input type="text" name="q" placeholder="Buscar">
<input type="submit" value="Ir">
</form>
</ul>
</div>
</div>
<div class="clear"></div>
<div id="contenedor" class="container shadow">
<div id="contenido">
<div id="pagetitle">Tu web - [subpage]
<span class="social">
<img src="http://img.webme.com/pic/b/buzzdungeon/facebook.png" alt="Compartir en Facebook" onclick="popUp('http://www.facebook.com/sharer.php?u='+actual+'&t=[subpage]')">
<img src="http://img.webme.com/pic/b/buzzdungeon/twitter.png" alt="Compartir en Twitter" onclick="popUp('http://twitter.com/home?status=[subpage] - '+actual)">
<img src="http://img.webme.com/pic/b/buzzdungeon/plus.png" alt="Compartir en G+" onclick="popUp('https://m.google.com/app/plus/x/?v=compose&content=[subpage] - '+actual)">
<img src="http://img.webme.com/pic/b/buzzdungeon/email.png" alt="Enviar por email" onclick="popUp('http://www.algoutil.es/email/?url='+actual+'&title=[subpage]')">
</span>
</div>
Texto por debajo de la pag
Código: </div>
<div id="sidebar">
<div id="sidebarmenu">
<h3>TU WEB<span></span></h3>
<div style="padding:5px 0px!important;">
<ul id="menuprincipal">
<li><a href="/inicio.htm">Inicio</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">link</a></li>
</ul>
</div>
<h3>Contacto rapido<span></span></h3>
<div>
Contenido aca ;)
</div>
<h3>Titulo<span></span></h3>
<div> el contenido del segundo elemento </div>
</div>
<h3> Últimos comentarios!</h3>
<p id="comentarios"></p>
</div>
</div>
<div class="clear"></div>
<p id="footer"><a href="http://buzzdungeon.es.tl">Creado por juan_fer (buzzdungeon)</a> | <a href="http://leaverou.github.com/prefixfree">Css3 compatible</a> | <a href="http://meyerweb.com/eric/tools/css/reset/">Reset css</a></p>
Moderadores, no eliminen la plantilla por estos 3 links, son esenciales, los 3 son muy muy reconocidos, así que obviamente no van a eliminarlos
Css sin style tags
Código: </style>
<link rel="stylesheet" type="text/css" href="http://meyerweb.com/eric/tools/css/reset/reset.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="https://raw.github.com/LeaVerou/prefixfree/master/prefixfree.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#comentarios:lt(1)").load('/comentarios.htm table[align="center"] td br+a');
$("#sidebarmenu h3:first").addClass("active");
$("#sidebarmenu div:not(:first)").hide();
$("#sidebarmenu h3").click(function(){
$(this).next("div").slideToggle("slow")
.siblings("div:visible").slideUp("slow");
$(this).toggleClass("active");
$(this).siblings("h3").removeClass("active");
});
$(".box span").click(function(){
$(this).parent().fadeOut("slow");
});
if($(window).height() > $("#contenedor").height()){
$("html,body").css({
'background-attachment':'fixed'
});
}
var left = (($(window).width()-(728))/2);
$('table[height="102"]').css('left',left);
$(".img-grid li a").mouseenter(function(){
$(this).children("span").fadeIn("medium");
}).mouseleave(function(){
$(this).children("span").fadeOut("slow");
});
var offset = $("#sidebar").offset(), topPadding = 15;
$(window).scroll(function(){
if($(window).scrollTop() > offset.top){
$("#sidebar").stop().animate({
marginTop: $(window).scrollTop() - offset.top + topPadding
},'slow');
}else{
$("#sidebar").stop().animate({
marginTop: 0
},'slow');
}
});
});
var actual = window.location;
function popUp(variable){
window.open(variable,'Compartir','toolbar=0,resizable=1,scrollbars=0,status=0,width=650,height=300');
}
</script>
<style type="text/css">
body,html{
background:linear-gradient(rgba(0,0,0,0) 15%,rgba(0,0,0,0.15) 100%), url(http://img.webme.com/pic/b/buzzdungeon/fondo.png) repeat;
font-family: Arial, Helvetica, sans-serif;
font-size:15px;
}
p{
padding:10px 5px;
}
input, textarea{
background:#f9f9f9;
border:1px solid #bbb;
box-shadow:inset 0 1px 2px #ddd,0 1px 1px rgba(0,0,0,0.1);
margin:2px 0;
color:#666;
padding:3px;
outline:none;
}
input:focus, textarea:focus{
box-shadow:inset 0 1px 2px #ddd;
}
input[type="submit"],input[type="button"],button{
background: #999;
box-shadow:0 1px 1px rgba(0,0,0,0.1), inset 0 1px 1px rgba(255,255,255,0.4);
color:#ddd;
font-weight:bold;
}
input[type="submit"]:active,input[type="button"]:active,button:active{
box-shadow:inset 0 1px 1px rgba(0,0,0,0.1);
}
table[height="102"]{
position: absolute;
top:5px;
}
#topbar{
background:linear-gradient(rgba(0,0,0,0.4) 10%,rgba(0,0,0,0.7) 100%), url(http://img.webme.com/pic/b/buzzdungeon/fondo.png) repeat;
height:100px;
width:100%;
}
#menu{
background:lightgray;
box-shadow:inset 0 1px 3px white, 0px 2px 5px #999, inset 0 -1px 8px rgba(0,0,0,0.2);
height:30px;
position: relative;
z-index:30;
}
#menu form{
float:right;
}
#menu ul{
height:30px;
}
#menu ul li{
float: left;
padding:6px 10px;
}
#menu ul li a{
color:#555;
font-weight:bold;
text-decoration:none;
text-shadow:0 1px 0 rgba(255,255,255,0.8);
}
#menu ul li a:hover{
color:#222;
text-shadow:0 1px 0 #eee;
}
#contenedor{
background:linear-gradient(left, rgba(237, 237, 237, 1) 0%,rgba(246, 246, 246, 1) 50%,rgba(237, 237, 237, 1) 100%);
border-radius:5px;
min-height:200px;
overflow: hidden;
}
#comentarios a{
color:#666;
display:block;
padding:2px 0;
text-decoration:none;
}
#contenido{
border-radius:5px 0 0 0;
float: left;
width:750px;
}
#pagetitle{
background:#ddd;
border-bottom:1px solid rgba(0,0,0,0.1);
border-left:1px solid rgba(255,255,255,0.5);
border-radius:5px 0 0 0;
border-top:1px solid rgba(255,255,255,0.5);
font-weight:bold;
font-size:1.2em;
padding:7px;
text-shadow:1px 1px 0 rgba(255,255,255,0.7);
}
#sidebar{
background:#ddd;
border-bottom:1px solid rgba(0,0,0,0.1);
border-left:1px solid rgba(255,255,255,0.5);
border-radius:0 0 0 5px;
border-top:1px solid rgba(255,255,255,0.6);
box-shadow:0 0 6px rgba(0,0,0,0.5);
float: left;
margin-bottom:15px;
padding:4px;
width:201px;
}
#footer{
text-align:center;
}
#footer a{
color:#333;
text-decoration:none;
text-shadow:0 1px 0 rgba(255,255,255,0.7);
}
#footer a:hover{
color:#000;
}
/*INICIO ACORDEON*/
#sidebarmenu{
float: right;
width:200px;
}
#sidebarmenu input{
width:100%;
}
#sidebarmenu textarea{
height:80px;
width:100%;
}
#sidebarmenu h3, #sidebar h3{
background: #BBB;
border-radius: 3px;
box-shadow:inset 0 -1px 5px rgba(0,0,0,0.2);
color: #555;
cursor: pointer;
font-size: 17px;
font-weight: normal;
height: 1.7em;
line-height: 1.7em;
margin: 0 0 2px;
padding: 0 15px;
position: relative;
}
#sidebar > h3{
clear: both;
cursor: auto;
}
#sidebarmenu h3:hover {
background: #b1b1b1;
box-shadow: 0 -1px 5px rgba(0,0,0,0.2) inset;
color: #333;
}
#sidebarmenu h3 span {
background: url(http://img.webme.com/pic/b/buzzdungeon/up.png) no-repeat;
display: block;
height: 16px;
position: absolute;
right: 15px;
top: 7px;
width: 16px;
}
#sidebarmenu h3.active span {
background: url(http://img.webme.com/pic/b/buzzdungeon/down.png) no-repeat;
}
#sidebarmenu div {
color: #AAA;
font-family: Georgia;
font-size: 13px;
line-height: 1.5;
padding: 10px;
}
#sidebarmenu ul li a{
color:#666;
}
/*FIN ACORDEON*/
#menuprincipal li{
background:#e9e9e9;
border:1px solid #bbb;
font-weight:bold;
margin:2px 0px;
text-align:center;
padding:2px 0px;
}
#menuprincipal li:hover{
background:#eee;
}
#menuprincipal li a{
display: block;
text-decoration:none;
text-shadow:0 1px 0 white;
}
#menuprincipal li a:hover{
color:#444;
}
#container{
padding:3px 8px;
color:#222;
text-shadow:0 1px 0 white;
}
.box{
color:rgba(0,0,0,0.8);
margin:3px auto;
text-shadow:0 1px 0 rgba(255,255,255,0.5);
width:730px;
}
.box p{
padding:10px 10px;
}
.box span{
color:rgba(0,0,0,0.6);
cursor: pointer;
float:right;
padding:2px;
}
.box.rojo{
background:#FFCFCF;
border:1px solid #FF7A7A;
}
.box.azul{
background:lightblue;
border:1px solid #3689FF;
}
.box.verde{
background:lightgreen;
border:1px solid green;
}
.box.gris{
background:#dfdfdf;
border:1px solid #999;
}
.center{
text-align:center;
}
.clear{
clear:both;
margin:20px;
}
.container{
margin: 0 auto;
width:960px;
}
.img-grid{
margin:5px auto;
overflow: hidden;
width:715px;
}
.img-grid li{
float: left;
padding:3px;
}
.img-grid li a{
color:rgba(0,0,0,0.7);
font-weight:bold;
text-decoration:none;
text-shadow:0 1px 0 rgba(255,255,255,0.5);
}
.img-grid li span{
background:rgba(0,0,0,0.3);
display: none;
margin:130px 0 0 6px;
padding:5px 3px;
position: absolute;
width:154px;
}
.img-grid li img{
background:white;
border:1px solid #dedede;
border-radius:5px;
box-shadow:0 1px 1px rgba(0,0,0,0.1);
height:150px!important;
padding:5px;
width:160px!important;
}
.img-grid li:hover img{
background:#efefef;
border:1px solid #ddd;
box-shadow:none;
}
.shadow{
box-shadow:0px 2px 5px #999;
}
.social{
float: right;
margin-top:-3px;
}
.social img{
cursor: pointer;
height:24px;
width:24px;
}
.fixed{
position: fixed;
top:10px;
}
table[width="100%"][align="center"] table[width="100%"]{
border:1px dashed #ccc;
background: #eee !important;
margin:10px 0 !important;
}
form[method="post"]{
border:1px dashed #ccc;
background: #eee !important;
margin:10px 0 !important;
padding:0 0 8px 0;
}
table hr{
margin:0 !important;
display:none;
}
#pre_header {display: none;}
#post_header {display: none;}
#header_container {display: none;}
lli.nav_element{display: none;}
li.nav_element a{display: none;}
h1#title{display: none;}
h2#title span {display: none;}
#title {display: none;}
#nav_container {display:none;}
#container + p{display:none;} ______________ /* Programador web freelance. */
/* twitter: @jfdelarosa */
Ultima edición por buzzdungeon el Dom Abr 15, 2012 9:47 pm; editado 3 veces
|
|
