Propiedades Basicas CSS: Efectos

TUTORIAL REALIZADO POR PYRITE WOLF DE SOURCECODE

Hoy en los super tutos de CSS tenemos a los más esperados... ¡los efectos! Son simples pero bonitos, y combinados pueden hacer que tu foro se vea muy cool. Puede que edite este post si más adelante me acuerdo de algo que haya faltado, pero por ahora introduciremos seis efectos básicos y sus instrucciones de uso. Debo advertirte, sin embargo, de que si no has estado practicando lo suficiente puede que esto se te complique un poco.


Ya, creo que este es el efecto más simple de todos pero no por eso el de menor calidad. Las transparencias te permiten ajustar la opacidad de un elemento, yendo de 0 a 1 (0 es transparente, no lo verás; 1 es completamente sólido, no será semitransparente). Y lo mejor es que en la prehistoria era un lío colocar la opacidad, porque no todos los exploradores la soportaban, pero ahora, con tan solo agregar una línea que diga opacity: 0.8; el elemento deseado ya será un 80% sólido.


El hover es lo que sucede cuando uno pasa el mouse sobre algo y ese algo cambia. Puede afectar a prácticamente cualquier propiedad de cualquier elemento habido y por haber. Les puedes cambiar completamente el estilo al pasar el mouse. La sintaxis es:

Código:

nombre:hover {
lo que sea que quieras que suceda al pasarle el mouse (cambiar la opacidad, cambiar la sombra, cambiar el color de letra, el color de fondo, alto, ancho, LO QUE SEA)
}

Donde dice nombre se debe poner el nombre del id, class o elemento que se quiera modificar. ¡Y LISTO! (:


De seguro han entrado a algún foro, pasaron el mouse sobre un link y suavemente al link le apareció un resplandor alrededor de algún tono, ¿a que sí? O el link se movía hacia algún lugar. Pues es algo super simple, es un efecto hover con transición suavizada. Se puede suavizar la transición de cualquier cosa con las siguientes líneas:
transition: all XXs tt delay;
-moz-transition: all XXs tt delay;
-webkit-transition: all XXs tt delay;
Donde dice XX se debe reemlpazar por la cantidad de segundos que debe durar la transición (recomiendo 0.75 o 1 para hovers). El t determinará cómo se llevará a cabo la función a lo largo del tiempo especificado. Estos son los valores que se le pueden asignar: linear (la animación sucede de modo parejo), ease (empieza lento, acelera y vuelve a desacelerar), ease-in (comienza lento y sigue normal) y ease-out (comienza normal y termina lento). Finalmente, donde dice delay se puede colocar el tiempo en segundos que quieren que transcurra antes de que inicie la animación. Si no quieren que pase tiempo, simplemente borran ese valor.


Rotar y girar elementos a gusto es algo que definitivamente no recibe la atención que se merece. Estos códigos permiten girar cualquier cosa - imágenes, cajas, texto, etc. - la cantidad de grados que uno quiera.

Código:

transform:rotate(XXdeg);
-ms-transform:rotate(XXdeg);
-moz-transform:rotate(XXdeg);
-webkit-transform:rotate(XXdeg);
-o-transform:rotate(XXdeg);

Donde dice XX reemplazas por la cantidad de grados que desees rotar. Tiene todas esas lineas porque básicamente hay problemas de compatibilidad entre exploradores.



Esta propiedad tiene una escala donde 1 es el valor del objeto en su tamaño normal y va hasta el 0. Permite hacer una suerte de zoom en los elementos. La propiedad se aplica así:

Código:

transform : scale(0.9)
-moz-transform:  scale(0.9);
-webkit-transform: scale(0.9);
  -o-transform:  scale(0.9);

¡ADVERTENCIA! Esto sí que puede ser complicado xD
Una de las opciones menos aprovechadas y más entretenidas de CSS es que te permite animar tus elementos para que se muevan de un lado a otro. Esto viene en dos partes. Por un lado, la animación en sí será:

Código:

@keyframe nombre {
from {left: XXpx}
to: {left: YYpx;}
}

@-moz-keyframes nombre {
from {left: XXpx;}
to {left: YYpx;}
}

@-webkit-keyframes nombre {
from {left: XXpx;}
to {left: YYpx;}
}

Como verás la sintáxis es algo diferente a lo que estás acostumbrado, y es tantito largo por el tema de las compatibilidades entre exploradores. Donde dice Nombre deberás darle un nombre a la animación, la segunda línea es de donde parte (puedes reemplazar el left: XXpx; por el lugar que quieras, puede salir del bottom o del top o de donde a tí se te antoje) y la tercera es hacia dónde va. Lo demás es repetir datos. Entonces, si ponemos from {left:0px;} y to {left:700px} nuestra animación se moverá de su posición original a unos 700 píxeles a la izquierda.

La segunda parte se debe colocar en el CSS del elemento afectado por la animación. La sintáxis de esta segunda parte es mucho más corta pero no por eso más simple, ya que es una sola propiedad con muchos valores:

Código:

animation: nombre XXs velocidades YYs ZZ dirección;
-moz-animation: nombre XXs velocidades YYs ZZ dirección;
-webkit-animation: nombre XXs velocidades YYs ZZ dirección;

Donde dice nombre va el mismo nombre que hayas puesto al keyframe (es decir, el nombre que usaste en el código anterior).
En "XXs" es la cantidad de segundos que quieres que dure.
En Velocidades va una opción de efecto que hace que la animación sea más lenta o más rápida en diferentes momentos, las opciones son linear (misma velocidad todo el tiempo), ease (que es la que saldrá por defecto; comienza lento, luego rápido y termina lento), ease-in (comienza lento), ease-out (termina lento), y ease-in-out (comienza lento, luego va normal, y termina lento).
En "YYs" debes colocar si quieres que tenga algún delay (es decir, que pase una determinada cantidad de segundos antes de que comience la animación).
En ZZ debes reemplazar por la cantidad de veces que quieres que se realice la animación; puedes poner un número fijo o simplemente infinite para que lo haga por siempre.
Finalmente, donde dice dirección no debes poner nada si quieres que suceda siempre lo mismo; pero si quieres tienes la opción de colocar alternate. Alternate permitirá que de todas las veces que se realice la animación, las veces pares se haga al revés (es decir, por ejemplo, si fue hacia la izquierda, que vuelva hacia la derecha; si no colocas alternate simplemente volverá a aparecer a la derecha y se moverá hacia la izquierda). Además de todo esto, será importante que le des position: relative; a tu elemento para que esto funcione. Aquí les dejo un ejemplo completo.


Ok, eso último sí que fue enredado. Espero que de todos modos lo hayan entendido xD
En fin, estas características se pueden combinar, y para su óptimo uso recomiendo pasar muchas horas tonteando en la página de pruebas.
Cualquier dato que sepas que falte o consulta que quieras hacer, deja un aviso aquí ^^