Platinum Partner
css,html5,tips and tricks

Using a Grayscale Image to Indicate User is Offline

You may have noticed webapps images in Chrome going grayscale to indicate that the network is down. A simple demonstration of the same concept is shown here.

This can be done with a very simple HTML5 event and CSS3 trick. Some time back I had blogged about HTML5+JS offline/online notification. On the same lines, I have done some silly code to emulate the offline gray-scaling of images, check out the demo .

Here is the code :

// CSS grayscale 
  -webkit-filter: grayscale(100%); // Latest webkit
  -moz-filter: grayscale(100%); // Mozilla
  -ms-filter: grayscale(100%);  // M$
  -webkit-filter: grayscale(1); // Old webkit
  filter: grayscale(100%);        // Current API
 
 
//Javascript to change the class
window.addEventListener('offline', function (evt) {
  console.log("offline");
  document.getElementById('test').className = "offline";
});
window.addEventListener('online', function (evt) {
  document.getElementById('test').className = "";
});

You can also use : document.getElementById('id').classList.toggle('class'); to toggle classes :)

Update 1:

There were a few comments on reddit saying this is not working on FF, the fix is as below:

filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
filter: grayscale(100%);

Published at DZone with permission of {{ articles[0].authors[0].realName }}, DZone MVB. (source)

Opinions expressed by DZone contributors are their own.

{{ tag }}, {{tag}},

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}
{{ parent.authors[0].realName || parent.author}}

{{ parent.authors[0].tagline || parent.tagline }}

{{ parent.views }} ViewsClicks
Tweet

{{parent.nComments}}