X Course Advisor FREE Course Advisor
(Close)
Watch Tutorials
macProVideo.com
Close

Acceso Premium gratis

Acceso a toda nuestra biblioteca de artículos Hub Premium, los archivos del proyecto y el primer 10% de cada uno-Video Tutorial de la Biblioteca Tutorial en línea .

Crea tu cuenta gratis!

Un buen rato con CSS3 transiciones
Traducido por Google Translate

Parece que los fabricantes de navegadores están empujando nuevas características a través de CSS3 a un ritmo bastante rápido a pesar de CSS2.1 apenas de haber sido

A pesar de CSS3 está a años de haber terminado la mayoría de navegadores modernos lo han estado de ejecución de un tiempo. En este consejo enfermedad te muestran un vuelco poco aseado efecto con CSS3 transiciones.


Paso 1

Tengo algunas marcas muy simple. Sólo una lista desordenada con algunos enlaces in:


He puesto las etiquetas de enlace dentro de algunas etiquetas span puramente por razones de compatibilidad. Sé que no es estrictamente semántico, pero si quieres que esto funcione en IE6 (agita el puño!) Esta es la forma en que usted necesitará marcar como Internet Explorer 6 (agita el puño!) No va a entender: hover en otra cosa que enlace etiquetas. Para IE7 usted necesitará asegurarse de que declare un doctype para: hover para trabajar en los elementos no-link. Patético, lo sé!

He aplicado algunas estilo sencillo para hacer una barra de navegación horizontal.


Este es el resultado:


He aplicado display: inline; a la lista de las etiquetas para evitar algunos problemas de diseño en Internet Explorer 6 (agita el puño!).


Paso 2

Ahora Im que va a aplicar una imagen de fondo para las etiquetas de mi link:


Este es el resultado:


Sé que esto parece un poco raro, pero ten paciencia conmigo. La imagen se coloca con la regla de la taquigrafía de fondo.

de fondo: ;


Paso 3

Ahora puedo estilo de las etiquetas span.


Este es el resultado.


Youll cuenta de que la imagen de la etiqueta link 'de fondo está escondida por el color de fondo de la etiqueta span, que está sentado encima de él. La etiqueta span es 20px más pequeña en altura que la etiqueta de vínculo. Esto es importante!


Paso 4

Ahora Ill aplicar el: hover regla a mi etiqueta de enlace. Esto hará que el enlace de imágenes en las etiquetas de fondo para desplazarse hacia abajo 10px, en esencia, revelando al pasar el ratón sobre el enlace.


Este es el resultado.


En este punto, básicamente estás en el modo de reserva. El marcado actual debe trabajar en todos los navegadores conocidos. Cualquier código que añadir a partir de ahora será CSS3 y soporte varían de un navegador a otro.


Paso 5

Ahora Ill añadir mi CSS3 gobierno de transición a las etiquetas de enlace.


He aquí cómo funciona.

transición:

todos (se aplican a todas las propiedades CSS de este elemento)

0,3 s (el tiempo de la transición)

lineal (la curva de tiempo de la transición)


Ahora, cualquier cambio en las propiedades de las etiquetas de enlace (en hover) harán la transición sin problemas a su nuevo valor. Es decir, el fondo de la posición y el color del texto.

Youll notar también que hay un buen proveedor de algunos prefijos de Transitions CSS. Cada navegador implementa actualmente este efecto de diferentes maneras por lo que deben dirigirse a tantos como podamos.


-Moz-= Mozilla Firefox

-Webkit-= Safari, Chrome

-O-= Opera


Una vez que se concluyó que se convertirá simplemente de transición.


Paso 6

Finalmente III añadir un poco de curvas rápidas redondeadas.


Este es el resultado:


Compatibilidad

  • This should work well in Firefox, Safari and Chrome. 
  • Opera does support CSS3 Transitions but not yet on background-position. 
  • Hopefully we’ll see this in Internet Explorer in about the year 3038. But don’t bet on it!!


Conclusión

Este concepto puede ser aplicado a las cargas de los dispositivos de efectos. En la descarga por debajo de usted encontrará algunos ejemplos más, incluyendo el efecto que cuando uno se voltea un álbum que muestra el formato de CD, vinilo con una buena transición.


Descarga especial CSS3 ejemplos.

Obra de teatro sobre y pasar un buen rato



Toby Pitman

Toby Pitman | Articles by this author

For the past 20 years Toby has worked as a professional guitarist, programmer and producer. Clients include Sir Paul McCartney, George Michael, Shirley Bassey, Yusuf Islam, Giles Martin as well as the London 2012 Olympic Ceremonies. He has also worked extensively in TV, Advertising and Film. As well as composing himself he has also worked alongside many composers like David Arnold, Clint Mansell and Simon Franglen on many major film releases. An expert in synthesis and sound design Toby has also lectured for Apple on their Logic Pro music software which he has used since its days on the Atari. He has also worked as an educator for the International Guitar Foundation and the Brighton Institute of Modern Music teaching guitar. In his spare time (of which there is very little) he moonlights as a motion graphics artist specialising in Cinema 4D and After Effects.

Comments

You must be logged in to post a comment.
Create an Account  Login Now

What is macProVideo.com?

macProVideo.com is an online education community featuring Tutorial-Videos & Training for popular Audio & Video Applications including Adobe CS, Logic Studio, Final Cut Studio, and more.
© 2018 macProVideo.com
a division of NonLinear Educating Inc.
Link