Foros del Web » Creando para Internet » Diseño web »

¿Un botón que dispara un efecto de CSS?

Estas en el tema de ¿Un botón que dispara un efecto de CSS? en el foro de Diseño web en Foros del Web. Hola a todos! Como están? Estoy teniendo un probema con un diseño que tengo que sacar esta semana. Se me ocurrió una idea interesante a ...
  #1 (permalink)  
Antiguo 16/07/2013, 15:19
Avatar de polecat  
Fecha de Ingreso: diciembre-2003
Ubicación: Argentina
Mensajes: 391
Antigüedad: 15 años, 6 meses
Puntos: 0
Pregunta ¿Un botón que dispara un efecto de CSS?

Hola a todos! Como están?
Estoy teniendo un probema con un diseño que tengo que sacar esta semana.
Se me ocurrió una idea interesante a nivel diseño que, por supuesto, no tengo idea como llevar a la realidad.

La idea:

Tengo un fondo de un túnel y cuando presiono un boton que dice "Salir del túnel", quiero que el fondo de la web (que es el túnel) se agrande desde el centro hacia afuera hasta que la web queda toda blanca y aparece con un fade in la web que tengo ya hecha.

El problema:

Logré hacer un buen CSS temporario (para que ustedes vean el efecto que quiero), pero no tengo idea cómo hacer que ese efecto sea disparado por un boton.

Acá está el sitio tal como está ahora.
Para ver el efecto que quiero (que ya está hecho, solo que el trigger es el incorrecto) mantengan apretado el click sobre cualquier lado de la pantalla.
www.juanmanuelbosi.com.ar/empreza/tunel.html

Este es el CSS:

Código:
html, body {
	height:100%;
	width: 100%;
	margin:0;	
	overflow:hidden;
	
}
#tunel {	
	padding:0;
	width:100%;
	height: 100%;
	margin: 0 auto;
	background: url("images/tunel.jpg") top center no-repeat #000;
	-webkit-transition: all 1.2s ease;
	-moz-transition: all 1.2s ease;
	transition: all 1.2s ease;

	border:0;
}
#tunel:active {
  -webkit-transform: scale(17);
  -moz-transform: scale(17);
  transform: scale(17);
}
.exit {
	color: #FFF;
	padding:10px 25px;
	text-transform: uppercase;
	text-shadow: 2px 2px 3px #92250a;
	-webkit-text-shadow: 2px 2px 3px #92250a;
	moz-text-shadow: 2px 2px 3px #92250a;
	cursor:pointer;
	margin: 20px;
	font-size: 20px;
	border:0;
	border-radius: 6px;
	-webkit-border-radius: 6px;
	moz-border-radius: 6px;
	background: #dd4520;
	background: -moz-linear-gradient(top, #dd4520 0%, #b92100 99%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dd4520), color-stop(99%,#b92100));
	background: -webkit-linear-gradient(top, #dd4520 0%,#b92100 99%);
	background: -o-linear-gradient(top, #dd4520 0%,#b92100 99%);
	background: -ms-linear-gradient(top, #dd4520 0%,#b92100 99%);
	background: linear-gradient(to bottom, #dd4520 0%,#b92100 99%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dd4520', endColorstr='#b92100',GradientType=0 );
}
Y este es el HTML:

Código HTML:
<body>

<div id="tunel">
<input class="exit" type="submit" value="Salir del túnel">
</div>
</body> 
No tengo conocimientos de javascript y muy poco de CSS3.
Agradezco cualquier ayuda que me puedan brindar.

MUCHAS GRACIAS!!!
__________________
Juan Manuel
Diseño web/Gráfico & Ilustración
E-mail: [email protected] / Skype: jmbosi
Portfolio: www.facebook.com/hacelobiendesign
  #2 (permalink)  
Antiguo 16/07/2013, 15:46
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.482
Antigüedad: 16 años, 10 meses
Puntos: 2110
Respuesta: Un boton que dispara un efecto de CSS?

En realidad aplicando una clase mediante JavaScript sería suficiente.

A ver qué te parece algo así: http://jsfiddle.net/Qug3t/

Al menos para una idea te dará.
  #3 (permalink)  
Antiguo 16/07/2013, 17:02
Avatar de polecat  
Fecha de Ingreso: diciembre-2003
Ubicación: Argentina
Mensajes: 391
Antigüedad: 15 años, 6 meses
Puntos: 0
Respuesta: Un boton que dispara un efecto de CSS?

pzin...sos un genio. Esto es exactamente lo que necesito. Voy a probarlo en mi web y te voy mostrando lo que voy logrando.

MUCHISIMAS GRACIAS!!!!!!!!!
__________________
Juan Manuel
Diseño web/Gráfico & Ilustración
E-mail: [email protected] / Skype: jmbosi
Portfolio: www.facebook.com/hacelobiendesign
  #4 (permalink)  
Antiguo 16/07/2013, 17:25
Avatar de polecat  
Fecha de Ingreso: diciembre-2003
Ubicación: Argentina
Mensajes: 391
Antigüedad: 15 años, 6 meses
Puntos: 0
Respuesta: Un boton que dispara un efecto de CSS?

Hola pzin...estuve queriendo colocar el codigo que me pasaste en la web, pero no logro hacerlo andar. Mira: http://juanmanuelbosi.com.ar/empreza/tunel.html

Ves algun error que yo no vea? Toco el boton y no pasa nada.
__________________
Juan Manuel
Diseño web/Gráfico & Ilustración
E-mail: [email protected] / Skype: jmbosi
Portfolio: www.facebook.com/hacelobiendesign
  #5 (permalink)  
Antiguo 17/07/2013, 11:51
Avatar de Carlangueitor
Moderador ლ(ಠ益ಠლ)
 
Fecha de Ingreso: marzo-2008
Ubicación: México
Mensajes: 10.031
Antigüedad: 11 años, 3 meses
Puntos: 1326
Respuesta: Un boton que dispara un efecto de CSS?

Pon tu script antes de </body> o usa window.onload

Saludos
__________________
Grupo Telegram Docker en Español
  #6 (permalink)  
Antiguo 25/07/2013, 15:59
Avatar de polecat  
Fecha de Ingreso: diciembre-2003
Ubicación: Argentina
Mensajes: 391
Antigüedad: 15 años, 6 meses
Puntos: 0
Respuesta: ¿Un botón que dispara un efecto de CSS?

Está excelente pero me acabo de dar cuenta que no funciona en IE9....alguna idea para hacerlo funcionar en IE???
__________________
Juan Manuel
Diseño web/Gráfico & Ilustración
E-mail: [email protected] / Skype: jmbosi
Portfolio: www.facebook.com/hacelobiendesign
  #7 (permalink)  
Antiguo 25/07/2013, 16:12
Avatar de Carlangueitor
Moderador ლ(ಠ益ಠლ)
 
Fecha de Ingreso: marzo-2008
Ubicación: México
Mensajes: 10.031
Antigüedad: 11 años, 3 meses
Puntos: 1326
Respuesta: ¿Un botón que dispara un efecto de CSS?

Quizá tengas que agregar los prefijos propietarios, algo como -ms-transition.

Saludos
__________________
Grupo Telegram Docker en Español
  #8 (permalink)  
Antiguo 25/07/2013, 16:37
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.482
Antigüedad: 16 años, 10 meses
Puntos: 2110
Respuesta: ¿Un botón que dispara un efecto de CSS?

IE9 no soporta las transiciones: http://caniuse.com/css-transitions

Etiquetas: boton, css, diseño, efecto, html
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 04:32.