Com a nova serie de efeitos eu estou aqui falando sobre a propriedade de transicao de efeitos a famosa "transition" ela permite fazer efeitos realmente fantasticos com um simples passar do mouse ou algo mais complexo feito com javascript que eu utilizo muito aqui no blog, e agora irei compartilhar com voces essa fantastica propriedade que permite movimento em imagens crescimento das mesmas, girar objetos, mudar cores de algo, fazer algo aparecer ao passar do mouse entre outras inumeras possibilidades!Vamos agora ve-la:Sua estrutura...Como essa propriedade controla o tempo de transicao ela vai ter varias propriedades mas eu prefiro fazer algo mais resumido que para mim tem o mesmo efeito.Olhe:-webkit-transition: all 3s;-moz-transition: all 3s;-o-transition: all 3s;transition: all 3s;Explicando:O "transition" se refere a propriedade de transicao ou seja da mudanca, o 3s significa o tempo em segundos da mudanca e o "all" se refere ao o que tera o efeito, nesse caso o atributo sao todos os atributos possiveis e como sempre, eu colocarei alguns exemplos:#ex{-webkit-border-radius: 12px;-moz-border-radius: 12px;border-radius: 12px;border: 2px solid blue;background: black;color: #ffffff;width: 210px;-webkit-transition: all 3s;-moz-transition: all 3s;-o-transition: all 3s;transition: all 3s;}#ex:hover{opacity: 0.6;border: 2px solid black;background: blue;font-size: 36px;width: 420px;height: 220px;-webkit-transform: rotate(720deg);-moz-transform: rotate(720deg);transform: rotate(720deg);}Div, ela funciona em todos navegadores,ou quase(IE) passe o mouse!<html><head><style type="text/css">#ex{-webkit-border-radius: 12px;-moz-border-radius: 12px;border-radius: 12px;border: 2px solid blue;background: black;color: #ffffff;width: 210px;-webkit-transition: all 3s;-moz-transition: all 3s;-o-transition: all 3s;transition: all 3s;}#ex:hover{opacity: 0.6;border: 2px solid black;background: blue;font-size: 36px;width: 420px;height: 220px;-webkit-transform: rotate(720deg);-moz-transform: rotate(720deg);transform: rotate(720deg);}</style></head><body><br /><div id="ex">Div, ela funciona em todos navegadores,ou quase(IE) passe o mouse!</div></body></html>Acho que com apenas esse exemplo voce pode ver o poder dessa propriedade. Ate a proxima postagem! Virou assunto na internet!Apresentadora do jornal da Record fala ao vivo "Jornal da globo".Isso mesmo!Ja virou ate assunto no twitter!Olhe o video, em que a apresentadora erra e fala: "jornal da globo" inves de "jornal da Record" olhe o video:Creditos do video ao canal "TheLucasDime". Muitos ja devem ter visto tudo que existe na pagina inicial do Google e suas ferramentas, mas voce ja viu tudo?Todos sabemos que o Google tem muito a ser explorado e muitas ferramentas, mas voce sabia que tem muitas outras ferramentas que o Google tem?Veremos algumas...(Google Home Page)Eu estou logado no Google+ como voce pode ver, na navbar do Google voce pode ver:O Seu Google+O Primeiro item da lista e uma referencia a seu Google+ facilitando sua vida , caso voce esteja logado no Google+.PesquisarA pagina mais conhecida do Google!A De pesquisar no maior motor de buscas do mundo!Com inumeras linguas a sua disposicao, design espetacular,e alguns simples detalhes que fazem a diferenca!O Google ainda nos ajuda a lembrar algumas datas com seus Doodles animados, inanimados,interativos, ou nao!ImagensQuem ja nao procurou uma imagem no Google Imagens? Ele e muito util para todas as pessoas!Com o design do Google mas com a capacidade de "pegar" imagens e arrastar ara a caixa de Pesquisa Tente!E Um sistema realmente muito inteligente!Com reconhecimento de imagens?Voce ja viu algum site reconhecer imagens alem do Google?Suponho que nao!E Voce ainda consegue um URL bem menor assim!MapasGoogle Maps!Eu sei que voce ja usou ele para procurar algum lugar,ou uma rota!Com otimas estatisticas da localizacao de lugares! Visualizacoes