CSS Transitions 101

29 julio on Sin categoría  

A pesar de la expectativa de cambio y el movimiento en la pantalla, CSS y HTML de las personas tienen pocos controles que le permiten diseñar la interactividad, y los que existen son binario.
Un enlace es o bien un color u otro. Un campo de texto es o bien un tamaño u otro. Una foto es bien transparente u opaco. No en intermediarios de un estado a otro. No hay transiciones.
Esto ha llevado a la mayoría de las páginas web sensación abrupta, con elementos de cambio y cambiar sin gracia.
Sí, podemos utilizar DHTML y aprovechar la biblioteca jQuery para las transiciones, pero esto requiere una gran cantidad de código para algo que debería ser muy simple.
Lo que necesitamos es una manera rápida y fácil de añadir transiciones simples a la página y en este artículo encontrarás información útil sobre las transiciones CSS y cómo usarlos.
Hace unos meses, me metí el pie en la boca por lo que sugiere que los diseñadores deben empezar a utilizar las nuevas técnicas de CSS 3 que les permiten hacer algunos de los estilos básicos que han estado pidiendo para. El único problema: ninguno de ellos trabajó en Internet Explorer. No, ni siquiera IE8.
Algunos lectores consideraron que sugiere técnicas que alrededor del 75% de la audiencia no sería capaz de ver era imprudente.
Para aquellos lectores que digo, 'Mantenga a sus sombreros ", porque voy a presentar a otra nueva propiedad CSS que le permite añadir transiciones a cualquier elemento con sólo un par de líneas de código.
Transiciones CSS se están introduciendo en estos momentos en el Nivel CSS 3, pero ya se han añadido como una extensión de Webkit. En este momento lo que significa que sólo funcionan en los navegadores basados ​​en Webkit, como Apple Safari y Google Chrome.
 Dónde Transiciones CSS vienen de
Las transiciones han sido parte de Webkit por un tiempo y son la base de muchas de las cosas interesantes que la interfaz de usuario de Safari puede hacer que otros navegadores no pueden.
Pero el grupo de trabajo del W3C CSS resistió añadir transiciones a sus especificaciones oficiales, algunos miembros argumentando que las transiciones no son propiedades de estilo y estarían mejor manejados por un lenguaje de script.
Pero muchos diseñadores y desarrolladores, incluido yo mismo, argumentaron que estos son en realidad estilos-sólo los estilos dinámicos, en lugar de los estilos estáticas tradicionales que muchos de nosotros estamos acostumbrados.
Afortunadamente, el argumento a favor de estilos dinámicos celebró el día. En marzo pasado, los representantes de Apple y Mozilla comenzaron a agregar el módulo CSS Transiciones a la especificación de CSS nivel 3, de cerca el modelo de lo que Apple ya había añadido a Webkit.
 Una breve nota sobre Mejoras de Diseño
Antes de continuar, permítanme hacer hincapié en un punto: no depender de estilos para la funcionalidad sitio web si los estilos no son interoperables navegador (es decir, disponibles en todos los navegadores comunes).
Una vez más para aquellos que se lo perdieron: no depender de estilos para la funcionalidad sitio web si los estilos no son interoperables navegador.
Dicho esto, puede utilizar estilos, como transiciones, como mejoras de diseño para mejorar la experiencia del usuario, sin sacrificar la facilidad de uso para aquellos que no pueden verlos. Esto está bien, siempre y cuando usted podría de otra forma de vivir sin las transiciones y los usuarios aún pueden completar sus tareas.
 En primer lugar, algunas ideas de transición
Transiciones CSS no se reemplazan todos los usos de DHTML, pero aquí están algunas maneras de mejorar su diseño en los navegadores que soportan las transiciones, sin arruinar por el resto de su público.
Usted tendrá que ver esta página en Apple Safari 3+ o Google Chrome para ver estas transiciones funcionan. Ambos navegadores están disponibles en Mac y PC sabores.
Roll-Overs
El uso más obvio para las transiciones es poner de relieve los elementos (si los enlaces, tablas, campos de formularios, botones o cualquier otra cosa) cuando el ratón del usuario se cierne sobre ellos. Las transiciones son una gran manera de dar a la página un aspecto más suave.
Ejemplo # 1

Enlace

Menús desplegables
Menús CSS puras son fáciles de lograr, y transiciones permiten das menús deslizable hacia abajo y los efectos que destacan.
Ejemplo # 2

Sobre Nosotros

Nuestro Equipo
Noticias
Opiniones
Contacto

Animación
Puede mover un objeto entre dos puntos en la página y usar transiciones para animar su movimiento.

Ejemplo # 3
Click & Hold!

 Transiciones, los Estados y acciones
Pero espera un minuto allí, Tex. Antes de zambullirse en las transiciones, tenemos que entender los diferentes estados a los que un elemento puede transición.
Estados definen cómo un elemento en particular interactúa actualmente con el usuario o la página, y se especifican en CSS utilizando las pseudo-clases. Por ejemplo, cuando el usuario se desplaza sobre un elemento, ese elemento podría ser de estilo con la pseudo-clase vuelo estacionario.

Dinámica Pseudo Clase

Elementos Afectados

Descripción

: Link

Enlaces única

Los enlaces no visitados

: Visitado

Enlaces única

Enlaces visitados

: Hover

Todos los elementos

Cursor del ratón sobre el elemento

: Activa

Todos los elementos

Clics del ratón elemento

: Enfoque

Todos los elementos que se pueden seleccionar

Se selecciona Elemento

Ninguno

Todos los elementos

Estado por defecto de todos los elementos

Transitions funcionan cambiando un estilo durante un período de tiempo entre los diferentes estados de los elementos. Por ejemplo, el valor de color del estado por defecto de un elemento pasará a través de colores intermedios en el espectro antes de aparecer como el valor del color para el estado estacionario.
 Una transición simple
Vamos a considerar una simple transición de un color a otro cuando el usuario se desplaza sobre un enlace. Como cualquier otra propiedad CSS, se añaden transiciones directamente al selector que es para ser aplicado a. La propiedad se puede tomar uno de los siguientes cuatro valores.
Propiedad CSS

 La propiedad que se va a ser alterada (por ejemplo, el color). Consulte la tabla siguiente para obtener una lista de todas las propiedades CSS que puede ser la transición.
Duración

 ¿Cuánto tiempo durará la transición, en general, en segundos (por ejemplo, .25s).
Función de sincronización

 Permite controlar cómo se mide el tiempo de la duración. En lugar de utilizar un recuento lineal simple, se puede acelerar o ralentizar la transición o incluso especificar un latido o contar (por ejemplo, lineal). Más sobre esto más adelante en el artículo.
Retraso

 ¿Por cuánto tiempo debe esperar entre la acción y el comienzo de la transición, por lo general expresado en segundos (por ejemplo, .1s). Este valor se puede omitir si no desea un retraso.
Dado que la propiedad de transición que comenzó como una extensión de Webkit, tenemos que incluir tanto la transición y propiedades -webkit-transición para la compatibilidad hacia atrás.
Primero vamos a añadir estas dos propiedades al: hover pseudo-clase:
[CSS]

a: hover {

   color rojo;

   -webkit-transición: Color .25s lineal;

   transición: Color .25s lineal;

}

[/ Css]
Ahora, cuando un enlace se cernía sobre, en lugar de saltar de azul a rojo, se hará la transición de un cuarto de segundo a través de los colores intermedios.

Por supuesto, también queremos hacer la transición de vuelta al color de enlace por defecto, así que vamos a añadir una transición al: link (y probablemente: visitamos) pseudo-clases, con sólo un breve retardo (una décima de segundo) antes de que se desvanece:
[CSS]

a: link, a: visited {

   color azul;

   -webkit-transición: Color .25s .1s lineales;

   transición: Color .25s .1s lineales;

}

[/ Css]
 Adición de múltiples transiciones
Debido a que una transición es una propiedad CSS, si agrega varias instancias de la propiedad de transición en la misma regla, entonces el último prevalecerá sobre las anteriores, más que añadir a ellos. Así que en la siguiente regla, la única transición sería el color de fondo:
[CSS]

a: hover {

  color rojo;

  background-color: rgb (235 235 185);

  -webkit-transición: Color .25s lineal;

  transición: Color .25s lineal;

  transición: .15s fondo de color lineal 0.1;

}

[/ Css]
Múltiples transiciones se añaden como una lista separada por comas de la misma definición de propiedad de transición:
[CSS]

a: hover {

  color rojo;

  background-color: rgb (235 235 185);

   -webkit-transición: .25s de color lineal, background-color .15s .1s lineales;

  transición: .25s de color lineal, background-color .15s .1s lineales;

 }

[/ Css]
Esto creará tanto un color y transición de fondo-color.
 ¿Qué se puede transición?
Casi cualquier propiedad CSS que tiene un color, longitud o componente de posición, incluyendo muchas de las nuevas propiedades CSS 3, se puede dar una transición. Una notable excepción parece ser box-shadow.
Directamente desde la especificación del W3C Transiciones, aquí hay una lista de las propiedades CSS que se pueden dar una transición, junto con los aspectos que se transforman. He destacado algunas de las propiedades más útiles.

CSS Propiedad

¿Qué cambios

color de fondo

Color

imagen de fondo

Solamente los gradientes

background-position

Porcentaje, longitud

border-bottom color

Color

border-bottom-width

Largo

color de la frontera

Color

border-left-color de

Color

border-left-width

Largo

border-right color

Color

border-right-width

Largo

border-spacing

Largo

border-top color

Color

border-top-width

Largo

border-width

Largo

fondo

Longitud, porcentaje

color

Color

cosecha

Rectángulo

tamaño de fuente

Longitud, porcentaje

font-weight

Número

GRID *

Varios

altura

Longitud, porcentaje

izquierda

Longitud, porcentaje

letter-spacing

Largo

altura de la línea

Número, longitud, el porcentaje

margin-bottom

Largo

margin-left

Largo

margin-right

Largo

margin-top

Largo

max-height

Longitud, porcentaje

max-width

Longitud, porcentaje

min-height

Longitud, porcentaje

min-width

Longitud, porcentaje

opacidad

Número

outline-color de

Color

esbozar-offset

Entero

outline-width

Largo

fondo acolchado

Largo

padding-left

Largo

padding-right

Largo

padding-top

Largo

derecho

Longitud, porcentaje

text-indent

Longitud, porcentaje

text-shadow

Sombra

cima

Longitud, porcentaje

vertical-align

Palabras clave, longitud, porcentaje

visibilidad

Visibilidad

anchura

Longitud, porcentaje

word-spacing

Longitud, porcentaje

z-index

Entero

zoom

Número

 El tiempo de transición y Delay
Con transiciones, puede variar la tasa de recuento, contando más lenta al principio y acelerando al final, a la inversa, o cualquier otra cosa. Transiciones CSS vienen con cinco palabras clave para tiempo de transición y le permiten especificar los valores para su propia curva de distribución.

Nombre

Cómo Funciona

cúbicas bezier (x1, y1, x2, y2)

Los valores X e Y son entre 0 y 1 para definir la forma de una curva de Bezier utilizado para la función de temporización.

lineal

Velocidad constante

facilidad

Desaceleración gradual

facilidad en

Acelerar

la facilidad de salida

Ve más despacio

facilidad in-out

Acelerar y frenar

 Una Transición Universal?
Las transiciones se convertirá rápidamente en un procedimiento operativo estándar para todos los sitios web, la mejora de la retroalimentación interfaz de usuario.
Para agregar transiciones ubiquitious través de todo su sitio web, una opción es añadir una transición al selector universal, similar a un restablecimiento CSS. Esto se aplica una transición por defecto a todos los elementos de la página, que le permite mantener una transición coherente:
[CSS]

*: Link, *: visited, *: hover, *: activo, *: enfoque {

   -webkit-transición:

     .25s de color lineal,

      background-color .25s lineal,

     border-color .25s lineal;

   transición:

     .25s de color lineal,

     background-color .25s lineal,

     border-color .25s lineal;

}

[/ Css]
Un argumento en contra de una transición universal, y de hecho en contra de usar el selector universal para restablece CSS en general, es que la aplicación de un estilo a cada elemento de la página puede ralentizar la renderización de páginas. Sin embargo, nunca he encontrado ninguna evidencia de que este es el caso. Alguien sabe diferente?

Jason Cranford Teague es el autor de más de 13 libros sobre medios digitales, incluyendo Hablando En Estilos: Los Fundamentos de la CSS para diseñadores web. Para más información sobre CSS y tipografía web, echa un vistazo a el nuevo libro de Jason, Fluid Tipografía Web. Siga Jason en Twitter: jasonspeaking.

En PotencialDigital.com nos dedicamos a ofrecer todo lo necesario para su proyecto web, utilizando los más altos estándares de tecnología e innovación. Algunos de nuestros servicios son: diseño web, desarrollo web, pagina web profesional, armado sitio web, diseñador web argentina, diseño grafico, imagen corporativa, marketing por internet, agencia de publicidad online, posicionamiento seo, primero en google. Para contratar alguno de nuestros servicios haga click en el siguiente link: Ver presupuesto

Sin comentarios aún

Dejar comentario