Búsqueda en el Foro:
Buscar


Autor Mensaje
Mensaje31-08-2011, 18:41 (UTC)    
Título del mensaje: [jQuery-CSS] Crear menu de Windows 7 [INICIO]

Estoy fascinado con la cantidad que se puede hacer con CSS3 con tan poco. Muchos elementos de la interfaz de usuario que requieren las imágenes con el fin de tener una apariencia visual apropiado ahora puede ser de estilo único con CSS3. Con el fin de demostrar que me asignan una tarea para crear el menú de inicio de Windows 7 sólo con CSS3 (y algunos de los iconos).

Si descomponemos el menú vamos a conseguir un div, dos listas no ordenadas con un par de enlaces de cada uno y algunos iconos. Vamos a ver cómo cada uno de ellos es de estilo.

Fuente : http://www.jankoatwarpspeed.com/

Comenzemos:
El recipiente llamado menú de inicio tiene dos listas no ordenadas, que actúan como menús. Se ha degradado lineal con tres paradas de color: azul claro en la parte superior azul oscuro en el centro, y otro tono de azul claro en la parte inferior. La transparencia se logra con RGBA (), que tiene cuatro parámetros. Los tres primeros representan los valores de color rojo, verde y azul, y la última es la opacidad. Dos de las fronteras se crean con las propiedades de borde y la caja de sombra.
Código:
#startmenu { border:solid 1px #102a3e; overflow:visible; display:inline-block; margin:60px 0 0 20px;
-moz-border-radius:5px;-webkit-border-radius:5px; position:relative;
box-shadow: inset 0 0 1px #fff; -moz-box-shadow: inset 0 0 1px #fff; -webkit-box-shadow: inset 0 0 1px #fff;
background-color:#619bb9;
background: -moz-linear-gradient(top, rgba(50, 123, 165, 0.75), rgba(46, 75, 90, 0.75) 50%, rgba(92, 176, 220, 0.75));
background: -webkit-gradient(linear, center top, center bottom, from(#327aa4),color-stop(45%, #2e4b5a), to(#5cb0dc)); }


menú de programas
Esta lista desordenada tiene fondo blanco y dos bordes creados con propiedades de borde y la caja de sombra. Sus vínculos, que contienen iconos y nombres de programas, utiliza degradados y sombras caja en vuelo estacionario estado.
Código:
#programs, #links {float:left; display:block; padding:0; list-style:none;}
#programs { background:#fff; border:solid 1px #365167; margin:7px 0 7px 7px;
box-shadow: 0 0 1px #fff; -moz-box-shadow: 0 0 1px #fff; -webkit-box-shadow: 0 0 1px #fff;
-moz-border-radius:3px;-webkit-border-radius:3px;}
#programs a { border:solid 1px transparent; display:block; padding:3px; margin:3px;
color:#4b4b4b; text-decoration:none; min-width:220px;}
#programs a:hover {border:solid 1px #7da2ce;
-moz-border-radius:3px; -webkit-border-radius:3px;
box-shadow: inset 0 0 1px #fff; -moz-box-shadow: inset 0 0 1px #fff; -webkit-box-shadow: inset 0 0 1px #fff;
background-color:#cfe3fd;
background: -moz-linear-gradient(top, #dcebfd, #c2dcfd);
background: -webkit-gradient(linear, center top, center bottom, from(#dcebfd), to(#c2dcfd));}
#programs a img {border:0; vertical-align:middle; margin:0 5px 0 0;}

Links menu
Al igual que en el caso anterior, los enlaces del menú es bastante simple. Pero la parte interesante viene en estado estacionario. Cada enlace tiene gradiente horizontal con tres paradas: de color azul oscuro en el lado izquierdo y derecho, y un poco más ligero azul en el medio. Ahora, a diferencia de los programas de los enlaces del menú, aquí, todos los enlaces tiene un elemento <span> interior que contiene el texto. Este elemento span tiene un gradiente más - degradado lineal vertical. Es transparente en la mitad superior y la parte inferior va desde un azul muy oscuro a azul claro casi transparente. La combinación de dos degradados transparentes da exactamente el mismo aspecto que los botones en el menú de Windows 7 enlace.
Cita:
#links {margin:7px; margin-top:-30px;}
#links li.icon {text-align:center;}
#links a {border:solid 1px transparent; display:block; margin:5px 0; position:relative;
color:#fff; text-decoration:none; min-width:120px;}
#links a:hover {border:solid 1px #000;
-moz-border-radius:3px; -webkit-border-radius:3px;
box-shadow: 0 0 1px #fff; -moz-box-shadow: inset 0 0 1px #fff; -webkit-box-shadow: inset 0 0 1px #fff;
background-color:#658da0;
background: -moz-linear-gradient(center left, rgba(81,115,132,0.55), rgba(121,163,184,0.55) 50%, rgba(81,115,132,0.55));
background: -webkit-gradient(linear, 0% 100%, 100% 100%, from(#517384), color-stop(50%, #79a3b8), to(#517384));
}
#links a span { padding:5px; display:block; }
#links a:hover span { background: -moz-linear-gradient(center top, transparent, transparent 49%, rgba(2,37,58,0.5) 50%, rgba(63,111,135,0.5));
background: -webkit-gradient(linear, center top, center bottom, from(transparent), color-stop(49%, transparent),
color-stop(50%, rgba(2,37,58,0.5)), to(rgba(63,111,135,0.5))); }


Aquí está la vista previa, pero le sugiero que para ver la DEMO. Puedes jugar con los fondos y ver cómo funciona la transparencia -

Codigos Ordenados :
Ahora lo que haremos, es pegar la Libreria en " Por ensima de la Pagina " o " Editor Html"
Cita:
<script src="http://www.jankoatwarpspeed.com/examples/windows7menu/jquery-1.4.2.min.js" type="text/javascript"></script> <script type="text/javascript">
$(document).ready(function(){
$("#bkg1").click(function(){
$("body").css("background","#fff url(http://www.jankoatwarpspeed.com/examples/windows7menu/bkg.jpg) no-repeat scroll center center");
});
$("#bkg2").click(function(){
$("body").css("background","#fff url(http://www.jankoatwarpspeed.com/examples/windows7menu/bkg2.jpg) no-repeat scroll center center");
});
$("#bkg3").click(function(){
$("body").css("background","#fff url(http://www.jankoatwarpspeed.com/examples/windows7menu/bkg3.jpg) no-repeat scroll center center");
});
});
</script>

Como notaran, casi todos los codigos que Publicare vendran con las Url del Autor , ya que yo como tenia todos los archivos alojados en un Servidor Free se cayeron y casi todos los script que publioque no funcionan
Ahora pasaremos al Codigo css
Código:
#meta { position:absolute; top:70px; right:20px; }
#meta div { padding:20px; color:#000; margin: 0 0 20px;
-moz-border-radius:5px;-webkit-border-radius:5px;
background:rgba(255,255,255,0.50)}
#meta a {color:#005aff;}
#meta a img {margin:0 10px 0 0; border:solid 1px #000;}

#startmenu { border:solid 1px #102a3e; overflow:visible; display:inline-block; margin:60px 0 0 20px;
-moz-border-radius:5px;-webkit-border-radius:5px; position:relative;
box-shadow: inset 0 0 1px #fff; -moz-box-shadow: inset 0 0 1px #fff; -webkit-box-shadow: inset 0 0 1px #fff;
background-color:#619bb9;
background: -moz-linear-gradient(top, rgba(50, 123, 165, 0.75), rgba(46, 75, 90, 0.75) 50%, rgba(92, 176, 220, 0.75));
background: -webkit-gradient(linear, center top, center bottom, from(#327aa4),color-stop(45%, #2e4b5a), to(#5cb0dc)); }
#programs, #links {float:left; display:block; padding:0; list-style:none;}
#programs { background:#fff; border:solid 1px #365167; margin:7px 0 7px 7px;
box-shadow: 0 0 1px #fff; -moz-box-shadow: 0 0 1px #fff; -webkit-box-shadow: 0 0 1px #fff;
-moz-border-radius:3px;-webkit-border-radius:3px;}
#programs a { border:solid 1px transparent; display:block; padding:3px; margin:3px;
color:#4b4b4b; text-decoration:none; min-width:220px;}
#programs a:hover {border:solid 1px #7da2ce;
-moz-border-radius:3px; -webkit-border-radius:3px;
box-shadow: inset 0 0 1px #fff; -moz-box-shadow: inset 0 0 1px #fff; -webkit-box-shadow: inset 0 0 1px #fff;
background-color:#cfe3fd;
background: -moz-linear-gradient(top, #dcebfd, #c2dcfd);
background: -webkit-gradient(linear, center top, center bottom, from(#dcebfd), to(#c2dcfd));}
#programs a img {border:0; vertical-align:middle; margin:0 5px 0 0;}
#links {margin:7px; margin-top:-30px;}
#links li.icon {text-align:center;}
#links a {border:solid 1px transparent; display:block; margin:5px 0; position:relative;
color:#fff; text-decoration:none; min-width:120px;}
#links a:hover {border:solid 1px #000;
-moz-border-radius:3px; -webkit-border-radius:3px;
box-shadow: 0 0 1px #fff; -moz-box-shadow: inset 0 0 1px #fff; -webkit-box-shadow: inset 0 0 1px #fff;
background-color:#658da0;
background: -moz-linear-gradient(center left, rgba(81,115,132,0.55), rgba(121,163,184,0.55) 50%, rgba(81,115,132,0.55));
background: -webkit-gradient(linear, 0% 100%, 100% 100%, from(#517384), color-stop(50%, #79a3b8), to(#517384));
}
#links a span { padding:5px; display:block; }
#links a:hover span { background: -moz-linear-gradient(center top, transparent, transparent 49%, rgba(2,37,58,0.5) 50%, rgba(63,111,135,0.5));
background: -webkit-gradient(linear, center top, center bottom, from(transparent), color-stop(49%, transparent),
color-stop(50%, rgba(2,37,58,0.5)), to(rgba(63,111,135,0.5))); }


Y Ahora ni mas ni menos el Html:
Cita:
<div id="startmenu">
<ul id="programs">
<li><a href="www.brianpwg.es.tl"><img width="100" height="30" src="http://img.webme.com/pic/b/brianpwg/foooter.png" alt="" />BrianPwg</a></li>
<li><a href="#"><img src="http://cdn1.iconfinder.com/data/icons/humano2/32x32/apps/firefox-icon.png" alt="" />Firefox</a></li>
<li><a href="#"><img src="http://cdn1.iconfinder.com/data/icons/miniiconset/32/Safari_Agua.png" alt="" />Safari</a></li>
<li><a href="#"><img src="http://cdn5.iconfinder.com/data/icons/fatcow/32x32/opera.png" alt="" />Opera</a></li>
<li><a href="#"><img src="http://cdn1.iconfinder.com/data/icons/fatcow/32x32/internet_explorer.png" alt="" />Internet Explorer</a></li>
<li><a href="#"><img src="http://cdn1.iconfinder.com/data/icons/social_media%20icons_mydesign_myidea/32/rss_feeds.png" alt="" />RSS Feeds</a></li>
<li><a href="#"><img src="http://cdn1.iconfinder.com/data/icons/social_media%20icons_mydesign_myidea/32/twitter.png" alt="" />Twitter</a></li>
<li><a href="#"><img src="http://cdn1.iconfinder.com/data/icons/socialnetworking/32/delicious.png" alt="" />Delicious</a></li>
</ul>
<ul id="links">
<li class="icon"><img width="90" height="90" src="http://cdn2.iconfinder.com/data/icons/isuite/PNG/Windows.png" alt="" /></li>
<li><a href="#"><span>Documents</span></a></li>
<li><a href="#"><span>Pictures</span></a></li>
<li><a href="#"><span>Music</span></a></li>
<li><a href="#"><span>Computer</span></a></li>
<li><a href="#"><span>Network</span></a></li>
<li><a href="#"><span>Connect to</span></a></li>
<p>&nbsp;</p>
<p>&nbsp;</p>
</ul>
</div>

Por favor si usas el Codigo no Borres
Cita:
<li><a href="www.brianpwg.es.tl"><img width="100" height="30" src="http://img.webme.com/pic/b/brianpwg/foooter.png" alt="" />BrianPwg</a></li>

Muchisimas gracias o Todos por su Atencion ! Es recomendable leer todo ya que yo lo lei y habeces cuando lees Aprender cosas Fabulosas.

Saludos
atte


Vistas Previas :
1-Solo menu
2-Menu Completo


Ultima edición por brianpwg el Lun Sep 26, 2011 10:08 pm; editado 1 vez
Mensaje31-08-2011, 19:59 (UTC)    
Título del mensaje:

Hola,
excelente aporte, muy bueno, se agradece!
Mensaje31-08-2011, 20:11 (UTC)    
Título del mensaje:

Jejeje esta muy bueno, claro qué estaría mejor si se pudiera desplazar y al hacer click en un botón se despliegue, aunque claro que se puede hacer xD
______________
Off
Mensaje31-08-2011, 20:24 (UTC)    
Título del mensaje:

Nesbet : Gracias Nesbet :D
Fafo-ayuda : Gracias fafito. Que se despliege estaria genial, pero me tendria que Romper la Cabeza para Hacerlo, y lo terminaria dentro de 100 Años por que no se nada de jQuery -
Mensaje31-08-2011, 20:55 (UTC)    
Título del mensaje:

brianpwg escribió:
Nesbet : Gracias Nesbet :D
Fafo-ayuda : Gracias fafito. Que se despliege estaria genial, pero me tendria que Romper la Cabeza para Hacerlo, y lo terminaria dentro de 100 Años por que no se nada de jQuery -


Es cuestion de un spoiler y una imagen que cambie, si termino la tarea me pongo a hacerlo
______________
Off
Mensaje31-08-2011, 21:11 (UTC)    
Título del mensaje:

Que buen aporte me encanto mucho el menu Brian pero como dijo Fafo seria bueno que se pudiera desplazar seria mucho mejor.

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 !
Mensaje31-08-2011, 22:19 (UTC)    
Título del mensaje:

noti-gamer escribió:
Que buen aporte me encanto mucho el menu Brian pero como dijo Fafo seria bueno que se pudiera desplazar seria mucho mejor.

Saludos

Obviamente. Habia o hay un usuario que posee de una Barra de Windows muy Similar , siempre la quize obtener pero tenia bloqueado el Click derecho ajjaja . :D
Mensaje31-08-2011, 23:44 (UTC)    
Título del mensaje: Re: [jQuery-Css3] Crear menu de Windows 7 [INICIO]

Buenisimo el tutorial ademas el resultado final es grandioso brian saludos!
______________
Visitar sitio web


Mensaje01-09-2011, 15:57 (UTC)    
Título del mensaje:

fafo-ayuda escribió:
brianpwg escribió:
Nesbet : Gracias Nesbet :D
Fafo-ayuda : Gracias fafito. Que se despliege estaria genial, pero me tendria que Romper la Cabeza para Hacerlo, y lo terminaria dentro de 100 Años por que no se nada de jQuery -


Es cuestion de un spoiler y una imagen que cambie, si termino la tarea me pongo a hacerlo


Está muy bonito!!! io tmb ayudaré a modificarlooo!

Saludoz..
______________


https://radiovijaer.es.tl/
Mensaje01-09-2011, 18:12 (UTC)    
Título del mensaje:

Gracias a todos , :D
Mensaje01-09-2011, 19:16 (UTC)    
Título del mensaje:

brianpwg escribió:
Nesbet : Gracias Nesbet :D
Fafo-ayuda : Gracias fafito. Que se despliege estaria genial, pero me tendria que Romper la Cabeza para Hacerlo, y lo terminaria dentro de 100 Años por que no se nada de jQuery -


Es facil que se despliegue. Contactame y te digo
Mensaje01-09-2011, 19:47 (UTC)    
Título del mensaje:

pwgsnippets escribió:
brianpwg escribió:
Nesbet : Gracias Nesbet :D
Fafo-ayuda : Gracias fafito. Que se despliege estaria genial, pero me tendria que Romper la Cabeza para Hacerlo, y lo terminaria dentro de 100 Años por que no se nada de jQuery -


Es facil que se despliegue. Contactame y te digo

No tengo interes en que se despliege . hazlo si quieres, mucho no me interesa.
Mensaje01-02-2012, 15:34 (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