Conteúdo para você se capacitar em programação
Eu precisava testar o suporte para CSS Transition no :beforee, :afteruma vez que apenas o Firefox e o IE10 parecem suportá-lo. var isTransitionSupported = (function (pseudo, transProp, transPropStart, transPropEnd) { …
Continuar lendoEste Mixin aproveita cada loop do Sass para cobrir vários prefixos de fornecedores e tornar mais fácil incluir transições com um único include. Foi escrito para ser limpo e pequeno. …
Continuar lendo#amazing-element { -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; transition: all .3s ease-in-out;}
Continuar lendoAqui está uma técnica que usei para simular uma ideia de técnica de dobra de fotos 3D que vi no dribbble: http://codepen.io/micjamking/pen/cuweI O código para a técnica é bastante simples, …
Continuar lendoSe sprites não forem uma opção, os rollovers CSS podem ter um problema: quando o navegador tenta carregar a imagem do estado de foco, você verá um flash do fundo …
Continuar lendo<html><head><meta charset=utf-8 /> <style> .animate{ opacity: 1; -webkit-transition: opacity 2s linear; }img{opacity: 0}</style><title>JS Bin</title></head><body> <img onload=”this.className=’animate'” src=”https://www.google.de/logos/2012/olympics-archery-2012-res.png”></body></html> Visualização: http://jsbin.com/amefit/2
Continuar lendoDefinir a transição nas dimensões de um elemento que não tem suas dimensões especificamente definidas é um problema. Do MDN : Além disso, o autovalor costuma ser um caso muito …
Continuar lendoA transição ou a mistura de cores pode ser um problema. Para muitas animações de interface, uma simples interpolação RGB (interpolando os componentes vermelho, verde e azul linearmente) funcionará, porque …
Continuar lendoOntem, encontrei um problema comum: fazer a transição para uma altura individual com o valor ‘auto’. O problema é que, assim que você tiver um elemento como .transition-box { height: …
Continuar lendoNavegadores WebKit como Chrome e Safari às vezes adicionam um efeito de aliasing durante uma transição CSS3. Freqüentemente, parece que o texto torna-se um pouco mais estreito durante a transição …
Continuar lendo