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

Acesso Premium Free

Acesso a nossa biblioteca completa de artigos Hub Premium, arquivos de projeto e os primeiros 10% de cada Tutorial-Video da Biblioteca Tutorial on-line .

Criar sua conta gratuita agora!

Alguns têm o divertimento com CSS3 Transitions
Traduzido pelo Google Translate

Parece que fabricantes de navegadores são realmente empurrando novas funcionalidades através CSS3 em um ritmo muito rápido, apesar CSS2.1 apenas tendo sido

Mesmo que CSS3 está anos longe de ser concluído browsers mais modernos têm vindo a implementar-lo por um tempo. Nesta dica rápida Ill mostrar-lhe um roll-over pequeno puro efeito usando CSS3 Transitions.


Passo 1

Tenho algumas de marcação muito simples aqui. Apenas uma lista não ordenada com alguns links dentro:


Ive colocar os tags de link dentro de algumas tags span puramente para compatibilidade com versões anteriores. Eu sei que não é estritamente semântica, mas se você quiser que isso funcione no IE6 (Shakes punho!) É assim que você necessitará para marcá-lo até como IE6 (Shakes punho!) Não vai entender: hover em outra coisa senão ligação tags. Para IE7 youll necessidade de certificar-se de declarar um doctype para: hover para trabalhar em ligação não-elementos. Patético, eu sei!

Ive aplicado algum estilo simples de fazer uma barra de navegação horizontal.


Este é o resultado:


Ive aplicada display: inline; para as tags lista para evitar alguns problemas de layout no IE6 (Shakes punho!).


Passo 2

Agora eu estou indo para aplicar uma imagem de fundo para as tags meu link:


Este é o resultado:


Eu sei que isto parece um pouco estranho, mas pense comigo. A imagem é posicionada usando a regra abreviada de fundo.

background: ;


Passo 3

Agora eu posso estilo as tags span.


Este é o resultado.


Youll notar que as tags de imagem link 'fundo está agora escondida pela cor de fundo da tag span, que está sentado em cima dela. A tag span é também 20px de altura menor do que a tag link. Isso é importante!


Passo 4

Agora aplicar a Ill: hover regra para o meu tag link. Isso fará com que o link da imagem de fundo etiquetas para mover para baixo 10px, essencialmente, revelando que quando você passa o mouse sobre o link.


Este é o resultado.


Neste ponto, você está essencialmente no modo fallback. A marcação atual deve funcionar em todos os navegadores conhecidos. Qualquer código que eu adicionar a partir de agora será CSS3 e apoio irá variar de navegador para navegador.


Passo 5

Ill agora adicionar a minha regra de transição CSS3 para as tags link.


Veja como ele funciona.

transição:

todos (se aplicam a todas as propriedades CSS deste elemento)

0,3 s (o tempo para a transição)

linear (a curva de tempo da transição)


Agora, qualquer mudança nas propriedades das tags link (em foco) fará a transição sem problemas para seu novo valor. Ou seja, a posição do fundo ea cor do texto.

Youll aviso também que há muitos prefixos fornecedor para algumas transições CSS. Cada navegador atualmente implementa este efeito de diferentes maneiras por isso precisamos alvo quantos pudermos.


-Moz-= Mozilla Firefox

-Webkit-= Safari, Chrome

-O-= Opera


Assim que isso for finalizado ele se tornará simplesmente transição.


Passo 6

Finalmente Ill adicionar alguns cantos arredondados rápida.


Este é o resultado:


Compatibilidade

  • 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!!


Conclusão

Este conceito pode ser aplicado às cargas de roll-over efeitos. No download abaixo você encontrará alguns exemplos mais, incluindo o efeito que quando você rolar um álbum que mostra o formato CD, Vinil com uma transição agradável.


BAIXAR ESPECIAL CSS3 exemplos aqui.

Peça sobre e se divertir



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