Efectos CSS

Transiciones Propiedades:

transition-property:
Determina la(s) propiedad(es) a ser animadas; puede ser cualquier propiedad CSS.
transition-duration:
Indica la duración de la animació del inicio al fin en segundos. Por defecto el valor es 0.
transition-timing-function:
Definen física de animación: ease (por defecto), linear, ease-in, ease-out y ease-in-out.
transition-delay:
Tiempo en que la animación debe pausarse antes de comenzar.

Transformaciones:

Existen 4 tipos de valores para transformar elementos HTML mediante CSS3:

Skew:
desplazamiento de los ejes horizontales.
Scale:
modificación de la escala del elemento.
Rotate:
cambio de rotación del mismo definido en grados.
Translate:
desplazamiento del elemento desde su posición original.

FUENTES:

@font-face {
font-family: ‘DestroyX’;
src: local(‘DestroyX’),
url(‘Destroy x.ttf’) format(‘truetype’);
}

#titulo{
font-family: DestroyX;
font-size:48px;
}


SOMBRAS:

.CLASE {

box-shadow: rgba(0, 0, 128, 0.25) 5px 3px 4px;
text-shadow: rgba(64, 64, 64, 0.5) -6px 0px 0px;

}

EFECTO REFLEJO:

.CLASE {
float:left;
position: absolute;-webkit-box-reflect: below 10px
-webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(255, 255, 255, 0.40)));

}

ROTACION:

#objeto {
height:100px;
width:100px;
border:1px solid #f00;
margin:10px auto;
background: #ccc;
text-align:center;
-webkit-transition: all 2s ease-in-out;
transition: all 2s ease-in-out;
}
#objeto:hover{
-webkit-transform:rotate(720deg) scale(2,2);
transform:rotate(720deg) scale(2,2);
}

TRANSICION ESPECIFICA:

.especificando{
width:200px;
height:200px;
background-color:#f00;
border:1px solid #666;
-webkit-transition-property: width, height, background-color;
-webkit-transition-duration: 0.5s, 1s, 1s;
-webkit-transition-timing-function: ease, ease-out;
-webkit-transition-delay:0s ,0.5s, 1.5s;
}
.especificando:hover {
width:400px;
height:300px;
background-color:#fc0;
-webkit-transition-property: width, height, background-color;
-webkit-transition-duration: 0.5s, 0.5s, 0.5s;
-webkit-transition-timing-function: linear, linear;
-webkit-transition-delay:0s ,0.5s, 0.5s;
}

TRANSICION GENERAL:

.todito{
width:200px;
height:200px;
background-color:#f00;
border:1px solid #666;
-webkit-transition: all 1s ease;
}
.todito:hover {
width:400px;
height:300px;
background-color:#fc0;
-webkit-transition: all 2s ease;
}

TEXTO 3D

etiqueta {
text-shadow: 0 1px 0 #ccc,
0 2px 0 #c9c9c9,
0 3px 0 #bbb,
0 4px 0 #b9b9b9,
0 5px 0 #aaa,
0 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 1px 3px rgba(0,0,0,.3),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.25),
0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.15);
}

BARRA DE DESPLAZAMIENTO:

::-webkit-scrollbar {
width: 12px; /*Ancho de las barras de desplazamiento*/
height:12px; /* Alto de las barras de desplazamiento */
}
::-webkit-scrollbar-button:vertical:start{
background:url(imagenes/scrollarriba.png) no-repeat top; /*  Flecha Superior*/
}
::-webkit-scrollbar-button:vertical:end{
background:url(imagenes/scrollabajo.png) no-repeat bottom; /*  Flecha Inferior*/
}
::-webkit-scrollbar-button:horizontal:increment{
background:url(imagenes/scrollderecha.png) no-repeat right; /* Flecha Derecha */
}
::-webkit-scrollbar-button:horizontal:decrement{
background:url(imagenes/scrollizquierda.png) no-repeat left; /*Flecha Izquierda */
}::-webkit-scrollbar-button:decrement,
::-webkit-scrollbar-button:vertical:start,
::-webkit-scrollbar-button:vertical:end,
::-webkit-scrollbar-button:horizontal:increment,
::-webkit-scrollbar-track-piece {
background-color:rgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:vertical {
-webkit-border-radius: 6px;
background: rgba(256,0,0,0.8) url(imagenes/scrollbar.png) no-repeat center; /*Barra de desplazamiento*/
}

 

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: