Foros del Web - Ver Mensaje Individual

C2am · #2 (**permalink**) 04/01/2012, 13:37

Hola oskar
Bueno, jugando un poco hice esto.

Espero que te sirva.
Copio el código para que quede también en el foro (por si el enlace no funciona)

Código HTML:

Ver original<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
</head>
<body>
 
 
<h3>Transiciones horizontales</h3>
<div id="horizontal">
<div id="izq">De Izquierda a Derecha</div>
 
<div id="der">De Derecha a Izquierda</div>
</div>
 
 
 
<h3>Transiciones verticales</h3>
<div id="vertical">
 
<div id="arriba">De Arriba a Abajo</div>
<div id="abajo">De Abajo a Arriba</div>
 
</div>
</body>
</html>

Y el css:

Código CSS:

Ver original#horizontal{
position:relative;
width: 200px;
height:200px;
border: 1px solid #C30;
}
 
#izq, #der, #arriba, #abajo
{
width: 100px;
height:100px;
font-size:14px;
color:#FFF;
text-align:center;
}
 
#izq
{
 position:relative; 
 background-color:red;
 transition-property:width 1s linear  2s;
/* Firefox 4 */
-moz-transition:width 1s linear 1s;
/* Safari and Chrome */
-webkit-transition:width 1s linear 2s;
/* Opera */
-o-transition:width 1s linear 2s;
}
 
#der
{   
    position:absolute;
    right:0px;
    background-color:blue;
    transition-property:width 1s linear 2s;
    /* Firefox 4 */
-moz-transition:width 1s linear 2s;
    /* Safari and Chrome */
-webkit-transition:width 1s linear 2s;
    /* Opera */
-o-transition:width 1s linear 2s;
}
 
#izq:hover, #der:hover
{
width:200px;
}
 
#vertical{
position:relative;
width:200px;
height:200px;
border:1px solid #C30;
}
 
#arriba
{   
   position:relative;
    background-color:#F63;
    transition-property:height 1s linear 2s;
    /* Firefox 4 */
-moz-transition:height 1s linear 2s;
    /* Safari and Chrome */
-webkit-transition:height 1s linear;
    /* Opera */
-o-transition:height 1s linear 2s;
}
#abajo
{
    position:absolute;
    left:100px;
    bottom:0px;
    background-color:#939;
    transition-property:height 1s linear 2s;
    /* Firefox 4 */
-moz-transition:height 1s linear 2s;
    /* Safari and Chrome */
-webkit-transition:height 1s linear 2s;
    /* Opera */
-o-transition:height 1s linear 2s;
}
#arriba:hover, #abajo:hover
{
    height:200px;
}

PD: Si alguien lo quiere mejorar bienvenido sea. O si ve alguna bestialidad siéntase con el derecho de aportar su critica constructiva
PD: otro ejemplo con mas movimientos