Transition de CSS 3 Afecta a los demás elementos

Citar

Escrito el 05 May 2012 10:08 pm

Hola que tal amigos, recién estoy empezando a aprender CSS3

mi problema esta en que tengo 4 botones de los cuales aplique un transition para que cambie de tamaño cuando el puntero se encuentre dentro del botón, el problema es que cuando paso el puntero sobre el botón hace el efecto pero los demás botones también se mueven, pienso que puede ser un problema de mi estructura de código, aunque me gustaría que me dijeran como hacer para que cuando aplique transition no se alteren las propiedades de los demás objetos

Mis botones

Código CSS :

#botonenviar{/*boton de altas*/
background-color: #26bcd7; height:60px; width:100px;
text-align: center;
display: block;
margin: 30px 0px 0px 33px;
-moz-border-radius-topleft:0px;
-moz-border-radius-topright:0px;
-moz-border-radius-bottomleft:20px;
-moz-border-radius-bottomright:20px;
-webkit-border-top-left-radius:0px;
-webkit-border-top-right-radius:0px;
-webkit-border-bottom-left-radius:20px;
-webkit-border-bottom-right-radius:20px;
border:none;
color: #ffffff;
font: 160% "Lucida Grande", "Trebuchet MS", Verdana, sans-serif;   
   text-decoration:none;
}
#botonenviar:hover{
height:80px;
transition: height 1s;
-webkit-transition: height 1s; 
}

Mi HTML

Código HTML :

<input type="button" id="botonenviar" values="Insertar" onclick="location.href='#'">

Aquí esta una pequeña captura de como es que pasa esto

Muchas gracias a toda la comunidad de Cristalab

Por luispastendeveloper

12 de clabLevel

Genero:Masculino

Envíale un mensaje privado

Citar

Escrito el 06 May 2012 04:50 am

Probando el poco código que has posteado no me sucede lo que dices que sucede. Así que sospecho que hay algo más. ¿Podrías poner un enlace a una página donde poder ver el problema directamente?.

Tema aparte. No necesitas prefijos de navegador para border-radius.

border-radius: 0 0 20px 20px;

Hace lo mismo que has hecho y además funciona en todos los navegadores modernos.

Por DriverOp

Claber

2510 de clabLevel

Envíale un mensaje privado Web

Citar

Escrito el 06 May 2012 08:40 am

que tal si pruebas poniendo la trasition en #botonenviar en vez de #botonenviar:hover

Por Eclypse

Claber

118 de clabLevel

Envíale un mensaje privado Web

Citar

Escrito el 06 May 2012 01:32 pm

Eclypse intente de igual forma poniendo, en el bloque de código del identificador pero el resultado es el mismo, aquí les dejo el código de mi HTML completo

Código HTML :

<html>
<style type="text/css">
form{
   text-align: left;
   font: 100% Myriad Pro;
}
select{

   text-align: left;
   font: 100% Myriad Pro;   
}
input{

   font: 100% Myriad Pro;
   font-weight: bold;
}

#botones{ /*Caja de los botones de cambio de formulario*/
background-color: #FAFAFA;
width:1000px;
height:70px;
margin: -68px 0px 20px 0;
border-radius:0 20px 0 0;
}

#botonenviar{/*boton de altas*/
background-color: #26bcd7; height:60px; width:100px;
text-align: center;
display: block;
margin: 30px 0px 0px 33px;
border-radius:0 0 20px 20px;
border:none;
}
#botonenviar:hover{
height:80px;
transition: height 1s;
-webkit-transition: height 1s; 
}

#botonbusqueda{/*boton de busquedas*/
background-color: #7a4ea3; height:60px; width:100px;
display: block;
margin: -60px 0px 0px 190px;
border-radius:0 0 20px 20px;
border:none;
}
#botonbusqueda:hover{
height:80px;
transition: height 1s;
-webkit-transition: height 1s; 
}

#botonborrar{/*boton de bajas*/
background-color: #185e70; height:60px; width:100px;
display: block;
margin: -60px 0px 0px 352px;
border-radius:0 0 20px 20px;
border: none;
}
#botonborrar:hover{
transition: height 1s;
-webkit-transition: height 1s; 
height:80px;
}

#botonactualizar{/*boton actualizar*/
background-color: #000000; height:60px; width:100px;
display: block;
margin: -60px 0px 0px 510px;
border-radius:0 0 20px 20px;
border:none;
}
#botonactualizar:hover{
transition: height 1s;
-webkit-transition: height 1s;
height:80px;
}

</style>
<br><br>
<div id="botones">
<input type="button" id="botonenviar" values="Insertar" onclick="location.href='#'">
<input type="button" id="botonbusqueda" values="Busqueda" onclick="location.href='#'">
<input type="button" id="botonborrar" values="Insertar" onclick="location.href='#'">
<input type="button" id="botonactualizar" values="Actualizar" onclick="location.href='#'">
</div>
<form>
id Articulos: <input type="text" class="input" align="middle"><br><br>
Nombre Articulo: <input type="text" class="input"><br><br>
Talla: <input type="text" class="input" ><br><br>
Precio: <input type="text" class="input" ><br><br>
Id Categoria: <input type="text" class="input" ><br><br>
Genero: <select name=Genero>
<option name=masculino>Masculino</option>
<option name=femenino >Femenino</option>
</select><br><br>
Color Articulo: <input type="text" class="input"><br><br>
Id Marca: <input type="text" class="input"><br><br>
</form>
</html>

Por luispastendeveloper

12 de clabLevel

Genero:Masculino

Envíale un mensaje privado

Citar

Escrito el 06 May 2012 05:02 pm

Ahora entiendo lo que pasa.
Sinceramente, no sé por qué pasa eso aunque le veo cierta lógica. Como estás haciendo crecer el tamaño del botón, el contenedor de éste también debe crecer y eso provoca que el resto de los botones dentro de ese contenedor también se desplacen.

Pero sí sé cómo solucionar el problema asumiendo que era esto lo que querías lograr.

Atento porque he reparado algunos errores y simplificado en el código:

Código HTML :

.boton {
   position: absolute;
   height:60px;
   width:100px;
   text-align: center;
   display: block;
   border-radius:0 0 20px 20px;
   border:none;
}
.boton:hover {
   height:80px;
   transition: height 1s;
   -webkit-transition: height 1s; 
   -o-transition: height 1s; 
}
#botones{ /*Caja de los botones de cambio de formulario*/
   position: relative;
   background-color: #FAFAFA;
   width:1000px;
   height:70px;
   margin: -68px 0px 20px 0;
   border-radius:0 20px 0 0;
}

#botonenviar{/*boton de altas*/
   left: 0;
   background-color: #26bcd7; 
}

#botonbusqueda{/*boton de busquedas*/
   left: 110px;
   background-color: #7a4ea3;
}

#botonborrar{/*boton de bajas*/
   left: 220px;
   background-color: #185e70;
}

#botonactualizar{/*boton actualizar*/
   left: 330px;
   background-color: #000000;
}

El HTML relevante quedaría así:

Código HTML :

<div id="botones">
<input type="button" class="boton" id="botonenviar" value="Insertar" onclick="location.href='#'">
<input type="button" class="boton" id="botonbusqueda" value="Busqueda" onclick="location.href='#'">
<input type="button" class="boton" id="botonborrar" value="Insertar" onclick="location.href='#'">
<input type="button" class="boton" id="botonactualizar" value="Actualizar" onclick="location.href='#'">
</div>

Por DriverOp

Claber

2510 de clabLevel

Envíale un mensaje privado Web

Citar

Escrito el 06 May 2012 09:35 pm

Muchas gracias por la solución DriverOP, quiero pensar que el problema recidía en la propiedad position: relative, ya que el flujo de los objetos de la página se alteraban al hacer transition:

muchas gracias por los tips

Por luispastendeveloper

12 de clabLevel

Genero:Masculino

Envíale un mensaje privado

Citar

Escrito el 06 May 2012 10:45 pm

Claro. Algo así debe ser. La verdad es que no tengo mucha experiencia con esta propiedad transition, salvo casos puntuales como el tuyo que me hacen investigar y experimentar.

Por DriverOp

Claber

2510 de clabLevel

Envíale un mensaje privado Web

Citar

Escrito el 08 May 2012 12:38 am

position:absolute lo soluciono

Por Eclypse

Claber

118 de clabLevel

Envíale un mensaje privado Web

Transition de CSS 3 Afecta a los demás elementos

Escribe una respuesta rapida