| Hectorsito20 |
31-oct-2011 04:36 |
El poder de la combinacion de HTML5 y CSS3 no tiene limites!
Código HTML:
</head>
<body>
<h1 style="margin:0px; font-family: Verdana; font-size:40px; background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #C9A4FF), color-stop(100%, #9F73DD));color:darkred; box-shadow:3px 3px 10px #000;">Intercambios Virtuales</h1>
<header>
<div id="intercambioso">
<nav id="navmain">
<ul>
<li class="turnleft"><a class="teal" href="#">Inicio</a></li>
<li class="turnright"><a class="orange" href="#">Foro</a></li>
<li class="turnleft"><a class="teal" href="#">Portal</a></li>
<li class="turnleft"><a class="red" href="#">Reglas</a></li>
<li class="turnright"><a class="orange" href="#">Busqueda</a></li>
<li class="turnright"><a class="purple" href="#">Contacto</a></li>
</ul>
</nav>
</div>
</header>
</body>
</html>
Las CSS del Tema
Código:
<style type="text/css">
#navmain {
width:900px;
float:right;
margin-top:-40px;
}
#navmain ul{
list-style:none;
}
#navmain ul li {
float:left;
height:36px;
}
#navmain ul li a {
font: 15px/19px 'BergamoStdBold', Arial, sans-serif;
color:#ecebeb;
text-decoration:none;
padding: 9px 8px 15px 30px;
display:block;
text-shadow: 1px 1px 4px #0F4466;
filter: dropshadow(color=#0F4466, offx=1, offy=1);
-webkit-box-shadow: 1px 1px 8px #1E5B77;
-moz-box-shadow: 1px 1px 8px #1E5B77;
box-shadow: 1px 1px 8px #1E5B77;
-moz-border-radius-topleft: 3px;
-moz-border-radius-topright: 3px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
#navmain ul li a:hover {
border:1px solid #1E6D8B;
}
#navmain ul li.turnleft a {
padding-right:20px;
}
#navmain ul li.turnright a {
padding-right:20px;
}
/*Div para el sosten de la barra de navegacion*/
#intercambioso{
width:100%;
height:20px;
background-color:darkred;
margin-top:100px;
}
.turnleft {
-moz-transform: rotate(9deg);
-webkit-transform: rotate(9deg);
-o-transform: rotate(9deg);
-moz-transform: skew(-5deg);
-webkit-transform: skew(-5deg);
-o-transform: skew(-5deg);
}
.turnright {
-moz-transform: rotate(-15deg);
-webkit-transform: rotate(-15deg);
-o-transform: rotate(-15deg);
-moz-transform: skew(5deg);
-webkit-transform: skew(5deg);
-o-transform: skew(5deg);
transform: skew(5deg);
}
.turnleft a:hover {
/*Transition*/
-webkit-transition:All .5s ease;
-moz-transition:All .5s ease;
-o-transition:All .5s ease;
transition: all 0.5s ease;
/*Transform*/
-webkit-transform: rotate(-8deg) scale(1.2);
-moz-transform: rotate(-8deg) scale(1.2);
-o-transform: rotate(-8deg) scale(1.2);
transform: rotate(-8deg) scale(1.2);
}
.turnright a:hover {
/*Transition*/
-webkit-transition:All .5s ease;
-moz-transition:All .5s ease;
-o-transition:All .5s ease;
/*Transform*/
-webkit-transform: rotate(8deg) scale(1.2);
-moz-transform: rotate(8deg) scale(1.2);
-o-transform: rotate(8deg) scale(1.2);
}
.teal {
/*background:url(../img/tealbg.png) no-repeat 0 0;*/
background: #05B9CC;
background: -moz-linear-gradient(top, #05B9CC 0%, #0C707C 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #05B9CC), color-stop(100%, #0C707C)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#05B9CC', endColorstr='#0C707C', GradientType=0 ); /* ie */
}
.tealcurrent {
background: #00ddf4;
background: -moz-linear-gradient(top, #00ddf4 0%, #05afc3 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #00ddf4), color-stop(100%, #05afc3)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ddf4', endColorstr='#05afc3', GradientType=0 ); /* ie */
/*Transition*/
-webkit-transition:All .5s ease;
-moz-transition:All .5s ease;
-o-transition:All .5s ease;
/*Transform*/
-webkit-transform: scale(1.3);
-moz-transform: scale(1.3);
-o-transform: scale(1.3);
}
.teal:hover {
background: #00ddf4;
background: -moz-linear-gradient(top, #00ddf4 0%, #05afc3 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #00ddf4), color-stop(100%, #05afc3)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ddf4', endColorstr='#05afc3', GradientType=0 ); /* ie */
}
.orange {
background: #f0a757;
background: -moz-linear-gradient(top, #f0a757 0%, #b68349 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f0a757), color-stop(100%, #b68349)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0a757', endColorstr='#b68349', GradientType=0 ); /* ie */
}
.orange:hover {
background: #FDC17F;
background: -moz-linear-gradient(top, #FDC17F 0%, #E89945 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #FDC17F), color-stop(100%, #E89945)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FDC17F', endColorstr='#E89945', GradientType=0 ); /* ie */
}
.orangecurrent {
background: #FDC17F;
background: -moz-linear-gradient(top, #FDC17F 0%, #E89945 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #FDC17F), color-stop(100%, #E89945)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FDC17F', endColorstr='#E89945', GradientType=0 ); /* ie */
/*Transition*/
-webkit-transition:All .5s ease;
-moz-transition:All .5s ease;
-o-transition:All .5s ease;
/*Transform*/
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-o-transform: scale(1.2);
}
.red {
background: #ec4e67;
background: -moz-linear-gradient(top, #ec4e67 0%, #a63b4f 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ec4e67), color-stop(100%, #a63b4f)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ec4e67', endColorstr='#a63b4f', GradientType=0 ); /* ie */
}
.red:hover {
background: #FF728A;
background: -moz-linear-gradient(top, #FF728A 0%, #DD3551 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #FF728A), color-stop(100%, #DD3551)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF728A', endColorstr='#DD3551', GradientType=0 ); /* ie */
}
.redcurrent {
background: #FF728A;
background: -moz-linear-gradient(top, #FF728A 0%, #DD3551 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #FF728A), color-stop(100%, #DD3551)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF728A', endColorstr='#DD3551', GradientType=0 ); /* ie */
/*Transition*/
-webkit-transition:All .5s ease;
-moz-transition:All .5s ease;
-o-transition:All .5s ease;
/*Transform*/
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-o-transform: scale(1.2);
}
.blue {
background: #559eee;
background: -moz-linear-gradient(top, #559eee 0%, #3b6898 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #559eee), color-stop(100%, #3b6898));
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#559eee', endColorstr='#3b6898', GradientType=0 );
}
.bluecurrent {
background: #7DBBFF;
background: -moz-linear-gradient(top, #7DBBFF 0%, #4E8EDB 99%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #7DBBFF), color-stop(99%, #4E8EDB));
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7DBBFF', endColorstr='#4E8EDB', GradientType=0 );
/*Transition*/
-webkit-transition:All .5s ease;
-moz-transition:All .5s ease;
-o-transition:All .5s ease;
/*Transform*/
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-o-transform: scale(1.2);
}
.blue:hover {
background: #7DBBFF;
background: -moz-linear-gradient(top, #7DBBFF 0%, #4E8EDB 99%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #7DBBFF), color-stop(99%, #4E8EDB));
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7DBBFF', endColorstr='#4E8EDB', GradientType=0 );
}
.purple {
background: #A983E2;
background: -moz-linear-gradient(top, #A983E2 0%, #6A5890 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #A983E2), color-stop(100%, #6A5890));
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#A983E2', endColorstr='#6A5890', GradientType=0 );
}
.purple:hover {
background: #C9A4FF;
background: -moz-linear-gradient(top, #C9A4FF 0%, #9F73DD 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #C9A4FF), color-stop(100%, #9F73DD));
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#C9A4FF', endColorstr='#9F73DD', GradientType=0 );
}
.purplecurrent {
background: #C9A4FF;
background: -moz-linear-gradient(top, #C9A4FF 0%, #9F73DD 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #C9A4FF), color-stop(100%, #9F73DD));
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#C9A4FF', endColorstr='#9F73DD', GradientType=0 );
/*Transition*/
-webkit-transition:All .5s ease;
-moz-transition:All .5s ease;
-o-transition:All .5s ease;
/*Transform*/
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-o-transform: scale(1.2);
}
</style>
VIDEODEMOSTRACION DEL PROYECTO
suerte y espero que le halla gusatdo...
|
