Image Image Image Image Image
Scroll to Top

Topo

23

nov
2011

Sem Comentários

Em Blog
Design
HTML

Por Allison

Grayscale Images Hover com HTML5 Cross Browser

Em 23, nov 2011 | Sem Comentários | Em Blog, Design, HTML | Por Allison

A um tempo atrás o blog Web Designer Wall fez mais um de seus interessantes posts mostrando como é possível criar imagens em escala cinza com JavaScript, mas especificamente com a utilização de HTML5 (Canvas). Só que como todos sabem, o Internet Explorer não tem suporte a esse tipo de feature, mas você pode contornar isso facilmente com um código prorietário da Microsoft.

Basicamente, o código é o seguinte:

1.element.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(grayScale=1)

Com isso basta você fazer uma verificação e se o user agent no momento for o IE, use esse código, caso contrário, use HTML5.

  1. Exemplos
  2. Downloads

Fonte: Pedro Rogério/PinceladasnaWeb

Redes Sociais

Tags | , , ,

Enviar um Comentário