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> </p>
<p> </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
|
Hemos activado nuestro foro... 
