jueves, 31 de marzo de 2011

Un poco más sobre las transiciones con CSS - Vagabundia


Habíamos visto que las transiciones en CSS tienen cuatro propiedades que las controlan de manera individual:



transition-property la utilizamos para listar las propiedades que se cambiarán, separadas por comas; por ejemplo:
transition-property: background;
transition-property: background-color;
transition-property: background, width;
Ese lista no es obligatoria ya que, por defecto, el valor es all lo que significa que, salvo que lo indiquemos expresamente, la transición se hará sobre todas las propiedades que cambien. Por ejemplo, si tengo este DIV con un texto:
<div class="demoT">CSS3</div>

<style>
.demoT {
  /* todas las propiedades normales que quiera poner */
  background-color:#101921;
  border: 6px solid #89A;
  border-radius: 10px;
  color: #EEE;
  cursor: pointer;
  font-size: 16px;
  height: 50px;
  margin: 0 auto;
  padding-top: 20px;
  text-align: center;
  width: 100px;
  /* acá irá la transición */
}
.demoT:hover {
  /* estas son las propiedades que van a cambiar */
  background-color: #606971;
  border-radius: 150px;
  color: #000;
  font-size:64px;
  height: 200px;
  padding-top: 100px;
  width: 300px;
  /* acá irá la transición */
</style>
en lugar de agrega esto para animarlo un poco:
transition-property: background-color, border-radius; color, font-size, height, padding-top, width;
transition-duration: 2s;
puedo simplificarlo así:
transition-property: all;
transition-duration: 2s;
o utilizar una sóla línea, separando los valores con un espacio, de manera similar a lo que hacemos con otras propiedades:
transition: all 2s;
El orden es:
transition: transition-property, transition-duration transition-timing-function transition-delay;
Así que en ese ejemplo, sólo habría que agregar los prefijos de los distintos navegadores lo que daría esto:
-moz-transition: all 2s;
-webkit-transition: all 2s;
-o-transition: all 2s;



CSS3


Cuando queremos anular la transición lo que utilizamos es el valor none:
transition: none;
transition-duration es lo que indica la velocidad, o sea, el tiempo que durará la transición y por defecto es cero; al igual que la anterior, si ponemos varios valores, estos se separan con comas:
transition-duration: 1s;
transition-duration: 1s, 2s;
transition-timing-function es la más complicada de comprender; lo que hace es definir el modo en que se ejecutará esa transición; la curva de tiempo que se usa para calcular los diferente estados entre el inicio y el final. Por defecto, tiene el valor ease pero pueden usarse otros: linear, ease-in, ease-out, ease-in-out, cubic-bezier()




Ese valor por defecto genera una animación suave; digamos que, comienza despacio y luego se va ascelerando. El valor linear lo hace de modo constante y usando cubic-bezier() podemos llegar a controlar esa velocidad de manera exacta aunque compleja. Pueden ver y experimentar esto en Ceaser, una herramienta online para probar valores y posibles alternativas. Mientras tanto, en este ejemplo, basta poner el cursor encima para ver como, aún utilizando en todos ellos el mismo valor de tiempo, el resultado final cambia haciendo que algunas se ejecuten más rápido que otras:


ease
linear
ease-in
ease-out
ease-in-out
cubic



Por último:



transition-delay determina el tiempo que transcurrirá antes de comenzar la transición y su valor inicial es cero.



Demasiada cosa, demasiado detalle pero todo es mucho más simple de lo que parece ya que, en realidad, para usos normales, basta saber que sólo necesitamos esto y nada más:
-moz-transition: all 1s; -webkit-transition: all 1s; -o-transition: all 1s;
ABCDEFGHIJKLMNÑOPQRSTUVWXYZ



















TABLA - FUENTES - FONTS


SOUV2BalaramScaGoudyFOLIO 4.2Biblica Font








free counters


Disculpen las Molestias




TABLA - INFORMÁTICA - UTILIDADES

miércoles, 30 de marzo de 2011

Pixlr: Editor de imágenes online - Vagabundia


La mayoría de los editores de imágenes online comienzan con la letra P y pixlr no es la excepción. Claro, eso sólo es un detalle sin importancia. Lo interesante es que es uno de los mejores que he probado y está en español.




Posee dos aplicaciones, Pixlr Editor es el editor completo y Pixlr Express es un editor con menos opciones, útil cuando lo que necesitamos es hacer retoques rápidos. Ambos utiliza Flash pero son bastante rápidos y además, disponen de un API que puede ser utilizado por desarrolladores de manera gratuita.






Podemos usarlos sin necesidad de registro aunque esto último nos permite enviar las imagenes directamente a alguna red social como Facebook o Picasa. Admite crerar imágenes nuevas, seleccioanrlas desde nuestra PC o desde cualquier web y es bastante intuitivo, parecio al Photoshop. Unos videos muestran el modo de uso de sus características principales.




También resulta interesante la herramienta Grabber que no es otra cosa que una extensión para para Firefox o para Chrome por medio de la cual, tenemos acceso al editor simplemente haciendo click y con el botón derecho sobre cualquier imagen que veamos; de esta manera, podemos adaptarla, recortarla o guardarla.




Ambos servicios tamboén se pueden incluir en cualquier sitio mediante un IFRAME:
<iframe id="pixlr" type="text/html" width="100%" height="100%" src="http://pixlr.com/editor/" frameborder="0"></iframe>

<iframe id="pixlr" type="text/html" width="100%" height="100%" src="http://pixlr.com/express/" frameborder="0"></iframe>
Y acá puse esos IFRAMES en unos enlaces para que se muestren en una ventana modal si es que alguien quiere probar cómo funcionan:




















TABLA - FUENTES - FONTS


SOUV2BalaramScaGoudyFOLIO 4.2Biblica Font








free counters


Disculpen las Molestias




TABLA - INFORMÁTICA - UTILIDADES

Correo Vaishnava

Archivo del blog