RSS
Facebook
G+

Buscador de IntercambioSOS:


Retroceder   Foro de Ayuda IntercambiosvirtualeS > Soporte sobre: Multimedia > Recursos Webmasters & Diseño Web
Actualizar esta página El poder de la combinacion de HTML5 y CSS3 no tiene limites!
Comunidad

 
 
Herramientas Desplegado
Anterior Mensaje Previo   Próximo Mensaje Siguiente
Antiguo 31-oct-2011     #1
Hectorsito20
 
Avatar de Hectorsito20

Desarrollador HTML5 & CSS3
Hectorsito20 está desconectado
Ingreso: octubre-2011
Ubicación: Republica Dominicana, Punta Cana Bávaro
Mensajes: 157
Sexo:
País:
Signo:
Agradecido: +445
Predeterminado El poder de la combinacion de HTML5 y CSS3 no tiene limites!
Presentacion del Tema Saludos amigos n esta ocacion les traigo algo especial, algo que es uy laborioso, pero si nos esforzamos podemos llegar a conseguir cosas increible, solo dejate usar por tu imaginanacion y veras lo que estas dos tecnologias te permiten hacer del lado de este lenguaje de programacion..

Estimado Lect@r por favor de estudiar este codigo muy bien si es de tu interes, puesto que si aprendes algo de el con un poquito de conocimiento del lenaguaje de HTML podras llegar cosa imcreibles.. puesto que solo tu imaginacion es la que tiene el limite pasa hacer infinidades de cosas impresionante, espero que les guste y que sea de su mayor interes para los interesados...



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

BORKED


suerte y espero que le halla gusatdo...
Última edición por Hectorsito20; 31-oct-2011 a las 04:53
Responder Citando
Los siguientes 3 usuarios agradecen a Hectorsito20 por este mensaje:
cramercaba (31-oct-2011), Eloy58 (31-oct-2011), jchierro (31-oct-2011)
 

« Tema Anterior | Próximo Tema »

(0 miembros y 1 visitantes)
 

Normas de Publicación
No puedes crear nuevos temas
No puedes responder mensajes
No puedes subir archivos adjuntos
No puedes editar tus mensajes
Los Códigos BB están Activado
Las Caritas están Activado
[IMG] está Activado
El Código HTML está Desactivado
Ir al Foro

Temas Similares
Tema Autor Foro Respuestas Último mensaje
El Mus [Historia y Manual] IoXe AudioLibros, Manuales, Libros & Revistas 12 03-mar-2014 00:19
Algunos Mmorpg's AgUiLa32 Juegos PC 12 04-feb-2013 06:20
Mitos y curiosidades de la alimentación. baduser Medicina y Salud 6 13-jun-2012 19:33
La Fuente de Poder Eloy58 PC's Desktops 14 05-dic-2011 22:03
Acordeon Intercambioso con el PODER de CSS3 sin ningún script asociado Hectorsito20 Recursos Webmasters & Diseño Web 7 22-nov-2011 18:13

Contáctenos - https://www.intercambiosos.org - Archivo - Arriba

Desarrollado por: vBulletin® Versión 3.8.1
Derechos de Autor ©2000 - 2025, Jelsoft Enterprises Ltd.
Ad Management by RedTyger