Re: Tema de Prueba 5

por **Admin** Lun Sep 02, 2013 4:37 am

Uuu... Cajas de colores...

Código:: <style>#Caja1 {width: 198px; height: 100px; opacity: 1; Background: #00ff00;} #Caja2 {width: 198px; height: 100px; margin-top:-100px; Background: #ff0000; opacity: 0.0; transition: all .8s linear; -webkit-transition: all .8s linear; -moz-transition: all .8s linear;} #Caja2:hover {width: 198px; height: 100px; margin top:-100px; opacity: 1; transition: all .8s linear; -webkit-transition: all .8s linear; -moz-transition: all .8s linear;}</style> <div id="Caja1"> </div><div id="Caja2"> </div>

por **Admin** Lun Sep 02, 2013 3:53 am

Mi punto de rotación es el 50% 50% es decir, el centro del elemento

Código:: <div id="centroj" style="background-color: orange; width: 100px; height: 100px;transition: all 1s">Mi punto de rotación es el 50% 50% es decir, el centro del elemento</div>

Yo roto en el 100% 0% es decir, en la punta de arriba a la derecha ^^

Código:: <div id="derechaj" style="background-color: orange; width: 100px; height: 100px;transform-origin: 100% 0%;-webkit-transform-origin: 100% 0%;-ms-transform-origin: 100% 0%; transition: all 1s">Yo roto en el 100% 0% es decir, en la punta de arriba a la derecha ^^</div>

por **Admin** Lun Sep 02, 2013 3:50 am

DEFORMAR:

Holis a todos. ¿A que estoy deformado?

Código:: <div style="transform: skew(20deg, 20deg);-webkit-transform: skew(20deg, 20deg); background-color: orange; width: 100px; height: 100px">Holis a todos. ¿A que estoy deformado?</div>

por **Admin** Lun Sep 02, 2013 3:47 am

Rotar:

Este texto está un poco rotado, aunque es muy guachi-.

Código:: <div style="transform: rotate(45deg) ; -webkit-transform : rotate(45deg); background-color: orange; width: 100px; height: 100px">Este texto está un poco rotado, aunque es muy guachi-.</div>

por **Admin** Lun Sep 02, 2013 3:27 am

Degradados:

BLA BLA BLA

Código:: <div style="background: -webkit-linear-gradient(#2d6a79, #183840);background: -moz-linear-gradient(#2d6a79, #183840);background: -o-linear-gradient(#2d6a79, #183840);background: linear-gradient(#2d6a79, #183840);background: linear-gradient(#2d6a79, #183840); height: 80px;"></div>

BLA BLA BLA

Código:: <div style="background: -webkit-radial-gradient(#2d6a79, #183840); background: -moz-radial-gradient(#2d6a79, #183840); background: -o-radial-gradient(#2d6a79, #183840); background: radial-gradient(#2d6a79, #183840);"> [center]BLA BLA BLA[/center]</div>

por Contenido patrocinado