Ordenar hojas de estilo CSS con lintingNoticias 

Transiciones CSS3

Transiciones CSS3

Aplicaciones atractivas con transiciones CSS3.

Una aplicación atractiva tiene que provocar un impacto visual agradable en el usuario. Los usuarios siempre han de saber que cualquier orden suya (mediante clic del ratón, una pulsación en pantalla o cualquier otra forma) se recibe e interpreta de forma correcta en la aplicación, y las animaciones ofrecen una manera muy interesante de conseguir esto.

La nueva especificación HTML5 (aunque, en honor a la verdad, tendría que decir “la nueva especificación CSS3”) incorpora una herramienta muy potente para gestionar animaciones sencillas: las transiciones.

Introducción

Al principio, el grupo de trabajo de CSS dentro del W3C se resistía a integrar las transiciones dentro de CSS argumentando que en realidad no son propiedades de los estilos, pero finalmente los diseñadores y desarrolladores consiguieron convencerles de que las transiciones son en realidad estilos dinámicos y que pueden tener cabida dentro de un archivo CSS.

Según se puede leer en el sitio web del W3C, CSS3 Transitions permite crear variaciones progresivas sobre los siguientes tipos de propiedades:

  1. Color: interpolación entre los componentes rojo, verde, azul y alpha (tratando a cada uno como un número, como se verá más adelante).
  2. Longitud: interpolando entre valores expresados como números reales.
  3. Porcentaje: interpolando entre valores expresados como números reales.
  4. Entero: interpolado en pasos discretos (números completos). La interpolación tiene lugar en el espacio de los números reales y se convierte a entero utilizando la función floor().
  5. Número: se interpola entre valores expresados como números reales (coma flotante).
  6. Lista de transformación: puedes consultar la especificación CSS Transforms en: http://www.w3.org/TR/css3-2d-transforms/.
  7. Rectángulo: se interpolan los valores x e y, y los componentes de anchura y altura (todos estos valores se tratan como números).
  8. Visibilidad: se interpola en forma de pasos discretos. La interpolación se produce en el espacio de números entre el cero, el 1, donde 1 significa “visible” y el resto de valores son “hidden” (ocultos).
  9. Sombra: se interpolan los valores de color, coordenadas x e y, y el componente de difuminado (blur), tratando todos los valores como de color o número según corresponda. En aquellos casos donde existen listas de sombras, la lista más corta se rellena al final con sombras de color transparente y todas las longitudes (x,y y difuminado), con valor cero.
  10. Gradiente: se interpolan los valores de posición y color en cada parada. Tienen que ser del mismo tipo (radial o lineal ) y con el mismo número de paradas para poder realizar la animación.
  11. Servidor de dibujo (SVG): la interpolación solo está soportada para las transiciones de gradiente a gradiente y de color a color. Funcionan como se ha descrito antes para cada uno de esos valores.
  12. Lista separada mediante espacios de los elementos anteriores: si la lista tiene el mismo número de elementos, cada elemento dentro de ella se interpola siguiendo las reglas anteriores. Si no, no se produce la interpolación.
  13. Una propiedad abreviada: si todas las partes de una abreviatura se pueden animar, la interpolación se efectúa como si se hubiera especificado cada una de las propiedades de manera individual.

Y esta es la lista de propiedades que se pueden modificar mediante transiciones:

  1. background-color (color)
  2. background-image (solo gradientes)
  3. background-position (porcentaje y longitud)
  4. border-bottom-color (color)
  5. border-bottom-width (longitud)
  6. border-color (color)
  7. border-left-color (color)
  8. border-left-width (longitud)
  9. border-right-color (color)
  10. border-right-width (longitud)
  11. border-spacing (longitud)
  12. border-top-color (color)
  13. border-top-width (longitud)
  14. border-width (longitud)
  15. bottom (longitud y porcentaje)
  16. color (color)
  17. crop (rectángulo)
  18. font-size (longitud y porcentaje)
  19. font-weight (número)
  20. grid-* (diversos valores)
  21. height (longitud y porcentaje)
  22. left (longitud y porcentaje)
  23. letter-spacing (longitud)
  24. line-height (número, longitud y porcentaje)
  25. margin-bottom (longitud)
  26. margin-left (longitud)
  27. margin-right (longitud)
  28. margin-top (longitud)
  29. max-height (longitud y porcentaje)
  30. max-width (longitud y porcentaje)
  31. min-height (longitud y porcentaje)
  32. min-width (longitud y porcentaje)
  33. opacity (número)
  34. outline-color (color)
  35. outline-offset (entero)
  36. outline-width (longitud)
  37. padding-bottom (longitud)
  38. padding-left (longitud)
  39. padding-right (longitud)
  40. padding-top (longitud)
  41. right (longitud y porcentaje)
  42. text-indent (longitud y porcentaje)
  43. text-shadow (sombra)
  44. top (longitud y porcentaje)
  45. vertical-align (palabras clave, longitud y porcentaje)
  46. visibility (visibilidad)
  47. width (longitud y porcentaje)
  48. word-spacing (longitud y porcentaje)
  49. z-index (entero)
  50. zoom (número)

 

Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros 

Cursos y Diplomados de Tecnología Web visita www.uneweb.edu.ve  para más información

Related posts