[SOLUCIONADO] Div fijos en una transicion

TheCastor · #1 (**permalink**) 12/02/2015, 05:32

Muy buenas chicos.
Hace tiempo que no tocaba nada de diseño web (4 o 5 años), y me he vuelto a poner manos a la obra utilizando nuevas etiquetas que habia visto por ahí.

El tema es que estoy haciendo unos botones donde utilizo la etiqueta transicion para cambiar la opacidad de una palabra, y cuando esta cambia, la posicion de los div tambien, quedando muy brusco el cambio.

La cosa es que, la "animacion" por asi llamarlo que hace me gusta, pero eso, queda muy brusco. Me gustaria saber si hay alguna manera de que no sea un cambio tan brusco o si no, de que los div no se muevan.

Os dejo el codigo a continuacion (disculpad la de mierda que tiene, aun me queda pegarle un lavado de cara jejejjee)

HTML

Código:

<!doctype html>
<html lang="es">
    <head>
        <meta charset="utf-8">
        <title>Bienvenidos a mi Web</title>
        <link rel="stylesheet" href="estilos.css">
<STYLE TYPE="text/css" MEDIA="screen, projection">
@import url(http://fonts.googleapis.com/css?family=Great+Vibes);    </STYLE>


    </head>
    
    <body>
        <header class="cabecera">
            
           <div class="superior">
            
            </div>
            
            <div class="inferior">
            <p><span id="titulo">The Castor</span>  <br>Welcome to my Website</p>  
            <div class="conjunto">
                <div id="icon">
                    <a href="#">
                    <img src="icon/facebook.png" id="icon"><p id="icon">facebook</p>                       </a>
                </div>
                <div id="icon">
                    <a href="#">
                        <img src="icon/g_plus.png" id="icon"><p id="icon">g+</p></a>                   </div>
                <div id="icon">
                    <a href="#">
                        <img src="icon/twitter.png" id="icon"><p id="icon">twitter</p>                      </a>
                </div>
            </div>
            </div>
        </header>
       
        
    </body>
</html>

CSS

Código:

html{
    height: 100%;
    vertical-align: middle;


}

body{
font-family: 'Great Vibes', cursive;
font-size: 30px;
    text-align: center;
    
background: #e2e2e2; /* Old browsers */
background: -moz-linear-gradient(top,  #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e2e2e2), color-stop(50%,#dbdbdb), color-stop(51%,#d1d1d1), color-stop(100%,#fefefe)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%); /* IE10+ */
background: linear-gradient(to bottom,  #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=0 ); /* IE6-9 */

}
header{
    /*margin-top: 28%;*/
}
div.superior{
    position:relative;   
    margin: 0 auto;
    height: 50%;
    width: 99%;
}
div.inferior{
    position:absolute; bottom:0;
    margin: 0 auto;
    height: 50%;
    width: 99%;
}
span#titulo{
    font-size: 80px;
}
p{
    text-align: center;
}
div.contenedor{
	float:left;

}
div#conjunto{
    margin: 0 auto;  
    text-align: center;
    /*position: absolute;*/
}
div#icon{
    display: inline-block;
    margin: 0px 20px 20px 20px;
    padding: 0;
    width: 50px; 
}
a{
    text-decoration: none;
    color: black;
    float: left;
}
p#icon{
    opacity: 0;   
    transition: opacity .6s ease-in-out;
    margin: 0;
    font-size: 2px;
}
img#icon{
    width: 48px;
    transition: width .4s;  
}
img#icon:hover{
    width: 60px;
    opacity: 1;
}

div#icon:hover p#icon{
    font-size: 25px;
    opacity: 1;
}
div#icon:hover img#icon{
        width: 60px;

}

fede5426 · #2 (**permalink**) 12/02/2015, 11:47

No soy profesional en diseño y programación, pero estas colocando un identificador igual a diferentes elementos y etiquetas.. segun tengo entendido, no es para nada recomendable. Si necesitas colocar los mismos estilos a 2 o mas elementos, usa "class" no "id".

Cuando cambias el tamaño de un div, obviamente ocupa mas espacio y es por eso que el resto de los botones cambian de lugar.. Proba asignandole un "height:100px" al div#icon. (el primer boton puede que se corra unos px a la derecha porque el texto "facebook" es mas ancho que el propio boton)

Para que sea menos brusco, aumenta el tiempo de la transición, proba con 1s.. lo tenes con .6s y .4s (0.4 segundos, es menos de 1 seg, muy rapido :P)

AngelKrak · #3 (**permalink**) 12/02/2015, 12:07

quieres algo asi como esto amigo? ya solo te falta editarle los id que faltan ;)
http://codepen.io/AngelKrak/pen/MYQYRq

dime si es asi como lo quieres o especifica algo mejor :)

fede5426 · #4 (**permalink**) 12/02/2015, 13:11

http://codepen.io/anon/pen/NPyqaB

Ahi no se mueven :D

TheCastor · #5 (**permalink**) 12/02/2015, 13:21

Angelkrak eres un maquina tio, me viene de lujo, ahora estudiaré bien lo que has hecho y el xk me da a mi el fallo.

De momento me he dado cuenta que es por no utilizar bien las clases y los identificadores (lo que yo decia, hace falta ser costante en esta mierda, si no se olvida jajajaja)

Gracias!