Web and Beer

ceaser css animation lib

Para todos aquellos que necesiten hacer animaciones simples pero muy bonitas con css3, hoy les presentamos Ceaser.

Parece ser un proyecto muy interesante, donde con poco esfuerzo podemos lograr animaciones muy buenas, movimientos, efectos especiales, etc.

En la web oficial, podemos ver un claro ejemplo de las posibilidades.

http://matthewlein.com/ceaser/

El codigo necesario (a nivel ejemplo) se ve de la siguiente manera

-webkit-transition: all 500ms cubic-bezier(0.215, 0.610, 0.355, 1.000);
-moz-transition: all 500ms cubic-bezier(0.215, 0.610, 0.355, 1.000);
-o-transition: all 500ms cubic-bezier(0.215, 0.610, 0.355, 1.000);
transition: all 500ms cubic-bezier(0.215, 0.610, 0.355, 1.000);

-webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
-moz-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
-o-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);

Algo destacable es la posibilidad de crear extensiones.

Como muchos webmaster usan addfreestats para poder ir viendo que carga de usuarios tienen en sus sites, me parecio importante comentarle sobre esto.

Aparentemente por lo que detecte en mis sitios, addfreestats esta eliminando la propiedad CSS display:none, ya que debe estar medio molesto porque siempre le escondemos el loguito del servicio que estamos usando.

Para solucionarlo (que me funciono sin problemas) solo cree una clase css y le puse el display none en la clase, y agregue la misma al div que contenia el codigo de addfreestats.

Por el momento funciona sin problemas.

AddFreestats

El siguiente post fue escrito por Manuel Herrera.
Yo empleo otro hack para definir estilos diferentes para IE6 e
inferiores sobre la misma hoja de estilos:

#contenedor{
width: 94px !important;
width: 100px;
padding: 2px;
border: 1px solid #693
background: #ef9
}

Qué sucede:

El modelo de cajas en IE6 e inferiores no corresponde al estándar w3c
CSS 2.1. En la especificación se establece que el tamaño (ancho o
alto) de la caja se computa de la siguiente manera: width (or height)
+ padding + border-width
en IE6 se toma tan solo el tamaño especificado en la directiva width ó
height.

Empleando este hack, IE6 utilizará último ancho especificado,
omitiendo la directiva !important (Microsoft haciendo lo que le da la
gana). Esto hace la hoja de estilos mucho más legible y manejable.

Este hack funciona con cualquier parámetro así que prácticamente se
podrían reescribir todas las propiedades y tener dos hojas de estilos
en una (aunque esto no tiene mucha gracia).

A partir de IE7, el soporte al modelo de caja del estándar sí
corresponde a la realidad, lo mismo que la relevancia de !important,
así que se verá igual de bien en este navegador.

Sin embargo, si se necesitan especificaciones muy diferentes, lo mejor
es hacer algo como esto:

Este tipo de comentarios sólo los procesa IE y tienen una serie de
reglas que en el momento no recuerdo, pero que son muy útiles a la
hora de hacer habilitar bloques de código para cada versión de IE.

Espero que esto les sirva tanto como a mi me ha prestado utilidad.