Si eres como yo!! a quien le gusta tener cosas diferentes a lo demas!! este post es para vos!!
PRIMERO UNA EXPLICACIÓN QUE ES CSS:
CSS funciona a base de reglas, es decir, declaraciones sobre el estilo de uno o más elementos. Las hojas de estilo están compuestas por una o más de esas reglas aplicadas a un documento HTML o XML. La regla tiene dos partes: un selector y la declaración. A su vez la declaración está compuesta por una propiedad y el valor que se le asigne.
>NO, ya se que me vas a preguntar y no le quita velocidad a tu internet!!!
>Puedes tener mas de 2 estilos activados en una misma página
>crome tiene una pequeña falla
instala esta extensión
CHROME
una ves instalado ir a icono opciones>herramientas>extensiones
configuración
agregar nuevo estilo
acá es lo mas importante... copien el codigo y pegarlo
click en "guardar"
códigos y vista previa:
BARRA NEGRO:
#nav {
background: #1e1e1e url(navbg.gif) repeat-x top left;
}
.navbar {
border-bottom: 1px solid #3a3a3a;
border-top: 1px solid #3a3a3a;
border-left: 1px solid #3a3a3a;
border-right: 1px solid #3a3a3a;
background: url(http://k18.kn3.net/63E806BCB.gif) repeat-x top left;
height: 33px;
position: absolute;
right: 245px;
top: 23px;
}
.navbar .navitem {
float: left;
padding: 8px 11px 9px 11px;
background: url(http://k05.kn3.net/20A0B97E4.gif) no-repeat top right;
position: relative;
}
.navitem.useritem.hover div {
border-bottom: 1px solid #07273b;
background: url(bgnavbaractive.gif) repeat-x top right!important;
}
.navbar .navitem:hover {
cursor: pointer;
background: url([http://k02.kn3.net/EFC1D7393.gif) repeat-x top right!important;
}
.navbar .navitem.active,.navbar .navitem.active:hover {
cursor: pointer;
background: url(bgnavbaractive.gif) repeat-x top right!important;
}
.navitem.useritem div {
padding: 0px 11px 6px 11px;
}
#nav ul li a {
color: #FFF;
padding: 6px 12px 6px 12px;
display: block;
float: left;
margin-top: 5px;
background: #3b3b3b;
-webkit-border-radius: 3px 3px 0 0;
-moz-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
}
#show-paises-lista {
color: white;
padding: 6px 12px 6px 12px;
display: block;
float: left;
margin-top: 5px;
font-weight: bold;
background: #3b3b3b;
-webkit-border-radius: 3px 3px 0 0;
-moz-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
position: absolute;
bottom: 0;
right: 0;
cursor: pointer;
}
#nav ul li:hover a {
background: #2e2e2e;
}
}
BARRA VERDE:
#nav {
background: #1e1e1e url(navbg.gif) repeat-x top left;
}
.navbar {
border-bottom: 1px solid #26A14D;
border-top: 1px solid #26A14D;
border-left: 1px solid #26A14D;
border-right: 1px solid #26A14D;
background: url(http://k38.kn3.net/taringa/1/2/3/2/9/6/48/_serialkiller_/725.gif?9736) repeat-x top left;
height: 33px;
position: absolute;
right: 245px;
top: 23px;
}
.navbar .navitem {
float: left;
padding: 8px 11px 9px 11px;
background: url(http://k38.kn3.net/taringa/1/2/3/2/9/6/48/_serialkiller_/AD8.gif?2214) no-repeat top right;
position: relative;
}
.navitem.useritem.hover div {
border-bottom: 1px solid #26A14D;
background: url(bgnavbaractive.gif) repeat-x top right!important;
}
.navbar .navitem:hover {
cursor: pointer;
background: url([http://k37.kn3.net/taringa/1/2/3/2/9/6/48/_serialkiller_/C45.gif?2288) repeat-x top right!important;
}
.navbar .navitem.active,.navbar .navitem.active:hover {
cursor: pointer;
background: url(bgnavbaractive.gif) repeat-x top right!important;
}
.navitem.useritem div {
padding: 0px 11px 6px 11px;
}
#nav ul li a {
color: #FFF;
padding: 6px 12px 6px 12px;
display: block;
float: left;
margin-top: 5px;
background: #26A14D;
-webkit-border-radius: 3px 3px 0 0;
-moz-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
}
#show-paises-lista {
color: white;
padding: 6px 12px 6px 12px;
display: block;
float: left;
margin-top: 5px;
font-weight: bold;
background: #3b3b3b;
-webkit-border-radius: 3px 3px 0 0;
-moz-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
position: absolute;
bottom: 0;
right: 0;
cursor: pointer;
}
#nav ul li:hover a {
background: #2e2e2e;
}
}
BARRA NARANJA:
#nav {
background: #1e1e1e url(navbg.gif) repeat-x top left;
}
.navbar {
border-bottom: 1px solid #FEA623;
border-top: 1px solid #FEA623;
border-left: 1px solid #FEA623;
border-right: 1px solid #FEA623;
background: url(http://k43.kn3.net/taringa/1/2/3/2/9/6/48/_serialkiller_/93E.gif?7716) repeat-x top left;
height: 33px;
position: absolute;
right: 245px;
top: 23px;
}
.navbar .navitem {
float: left;
padding: 8px 11px 9px 11px;
background: url(http://k37.kn3.net/taringa/1/2/3/2/9/6/48/_serialkiller_/C9D.gif?1497) no-repeat top right;
position: relative;
}
.navitem.useritem.hover div {
border-bottom: 1px solid #FEA623;
background: url(bgnavbaractive.gif) repeat-x top right!important;
}
.navbar .navitem:hover {
cursor: pointer;
background: url([http://k39.kn3.net/taringa/1/2/3/2/9/6/48/_serialkiller_/3C9.gif?2954) repeat-x top right!important;
}
.navbar .navitem.active,.navbar .navitem.active:hover {
cursor: pointer;
background: url(bgnavbaractive.gif) repeat-x top right!important;
}
.navitem.useritem div {
padding: 0px 11px 6px 11px;
}
#nav ul li a {
color: #FFF;
padding: 6px 12px 6px 12px;
display: block;
float: left;
margin-top: 5px;
background: #FEA623;
-webkit-border-radius: 3px 3px 0 0;
-moz-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
}
#show-paises-lista {
color: white;
padding: 6px 12px 6px 12px;
display: block;
float: left;
margin-top: 5px;
font-weight: bold;
background: #FEA623;
-webkit-border-radius: 3px 3px 0 0;
-moz-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
position: absolute;
bottom: 0;
right: 0;
cursor: pointer;
}
#nav ul li:hover a {
background: #2e2e2e;
}
}
BARRA ROSA:
#nav {
background: #1e1e1e url(navbg.gif) repeat-x top left;
}
.navbar {
border-bottom: 1px solid #DF69C5;
border-top: 1px solid #DF69C5;
border-left: 1px solid #DF69C5;
border-right: 1px solid #DF69C5;
background: url(http://k41.kn3.net/taringa/1/2/3/2/9/6/48/_serialkiller_/D82.gif?2831) repeat-x top left;
height: 33px;
position: absolute;
right: 245px;
top: 23px;
}
.navbar .navitem {
float: left;
padding: 8px 11px 9px 11px;
background: url(http://k37.kn3.net/taringa/1/2/3/2/9/6/48/_serialkiller_/C64.gif?454) no-repeat top right;
position: relative;
}
.navitem.useritem.hover div {
border-bottom: 1px solid #DF69C5;
background: url(bgnavbaractive.gif) repeat-x top right!important;
}
.navbar .navitem:hover {
cursor: pointer;
background: url([http://k41.kn3.net/taringa/1/2/3/2/9/6/48/_serialkiller_/02E.gif?1259) repeat-x top right!important;
}
.navbar .navitem.active,.navbar .navitem.active:hover {
cursor: pointer;
background: url(bgnavbaractive.gif) repeat-x top right!important;
}
.navitem.useritem div {
padding: 0px 11px 6px 11px;
}
#nav ul li a {
color: #FFF;
padding: 6px 12px 6px 12px;
display: block;
float: left;
margin-top: 5px;
background: #DF69C5;
-webkit-border-radius: 3px 3px 0 0;
-moz-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
}
#show-paises-lista {
color: white;
padding: 6px 12px 6px 12px;
display: block;
float: left;
margin-top: 5px;
font-weight: bold;
background: #3b3b3b;
-webkit-border-radius: 3px 3px 0 0;
-moz-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
position: absolute;
bottom: 0;
right: 0;
cursor: pointer;
}
#nav ul li:hover a {
background: #2e2e2e;
}
}
BARRA ROJO:
#nav {
background: #1e1e1e url(navbg.gif) repeat-x top left;
}
.navbar {
border-bottom: 1px solid #E01C1C;
border-top: 1px solid #E01C1C;
border-left: 1px solid #E01C1C;
border-right: 1px solid #E01C1C;
background: url(http://k42.kn3.net/taringa/1/2/3/2/9/6/48/_serialkiller_/85D.gif?945) repeat-x top left;
height: 33px;
position: absolute;
right: 245px;
top: 23px;
}
.navbar .navitem {
float: left;
padding: 8px 11px 9px 11px;
background: url(http://k37.kn3.net/taringa/1/2/3/2/9/6/48/_serialkiller_/588.gif?4964) no-repeat top right;
position: relative;
}
.navitem.useritem.hover div {
border-bottom: 1px solid #E01C1C;
background: url(bgnavbaractive.gif) repeat-x top right!important;
}
.navbar .navitem:hover {
cursor: pointer;
background: url([http://k39.kn3.net/taringa/1/2/3/2/9/6/48/_serialkiller_/615.gif?2713) repeat-x top right!important;
}
.navbar .navitem.active,.navbar .navitem.active:hover {
cursor: pointer;
background: url(bgnavbaractive.gif) repeat-x top right!important;
}
.navitem.useritem div {
padding: 0px 11px 6px 11px;
}
#nav ul li a {
color: #FFF;
padding: 6px 12px 6px 12px;
display: block;
float: left;
margin-top: 5px;
background: #E01C1C;
-webkit-border-radius: 3px 3px 0 0;
-moz-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
}
#show-paises-lista {
color: white;
padding: 6px 12px 6px 12px;
display: block;
float: left;
margin-top: 5px;
font-weight: bold;
background: #3b3b3b;
-webkit-border-radius: 3px 3px 0 0;
-moz-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
position: absolute;
bottom: 0;
right: 0;
cursor: pointer;
}
#nav ul li:hover a {
background: #2e2e2e;
}
}
BARRA DE MOVIMIENTO:
[/i](es mi favorita la barra sigue activa donde vallas con el scroll + un nuevo icono hacia arriba... yo lo tengo activada junto con "modificar el header"
#header {
background: url("http://o1.t26.net/img/header/musica.jpg"; ) repeat-x scroll center top!important; color: #4081AF!important;
position: fixed!important;
width: 100%!important;
height: 80px;
z-index:99999!important;
position: absolute;!important;
opacity: 82!important;
}
#nav ul li a {
background: none repeat scroll 0 0 #;
border-radius: 3px 3px 0 0;
color:;
display: block;
float: left;
margin-top: 100px!important;
padding: 6px 12px;
}
#scroll-up {
background: url("http://i.imgur.com/HI6uB.png"; ) no-repeat scroll left top transparent!important;
display: none;
height: 50px!important;
opacity: 1.5!important;
position: fixed;
right: 5px!important;
top: 90px !important;
width: 50px!important;
}
