Posts from 2013 - Feb

CSS Filters to emulate colour blindness

Last August I went along to the London stop on the Adobe Create the Web Tour at the Vue cinema in Leicester square.

The day was mostly filled with Adobe showing off their new web-focused tools and techniques aimed at creating content for a modern web. Basically no Flash or action script but a slew of Javascript, CSS and HTML5 instead. The event was well organised and pretty much all their new tools impressed me and inspired ideas in my head about how I could find uses for them in my workflow.

One demonstration from the very beginning really got my mind working and that was Adobes proposed custom CSS filter specification:

From the second they showed a demo of using standard OpenGL ES Shading Language in CSS to apply vertex and fragment shaders to any CSS-selectable element I was dying to get my hands on a copy of Chrome Canary to enable the preference and start playing with the Adobe Filter Lab. Unfortunately the Filter Lab only supports their filters, a few custom ones you have to fork on github to edit or import gists. I just wanted to tinker locally so I set up a test page with a few bits of text and some images and set to work.

While most of the examples are generally pointless visual effects like page turning and burning I wanted to try and come up with practical use. So I figured I'd try and get dynamic colour blindness emulation going in the browser in real-time without the need for third-party applications or browser extensions.

The custom filter I ended up with is just a simple fragment shader that does a matrix transform on each pixels RGBA values to adjust the hues visible to emulate colour blindness of various types. This is my first attempt at writing a CSS filter and my first time with the GLES Shader language so if you spot something wrong make sure you contact me and let me know where I could improve.

Screenshot of the CSS filters in action

Read Full Post

3 comments :: Posted by Nick Palmer :: 2013-02-19 00:06:41 is finally here

Well, after many years of planning and talking about it I've finally started moving my online presence from the old palmnet moniker to the new palmr name.

The old site has served me well, though it has been through many styles over the years. Initially from 2004-2006 is was a horrible mass of static black pages with white text, flash intro files with blaring music and even bravehost widgets.

Then in 2004 I found a small, simple blogging system called nanoblog written in PHP. I put it on the site and started hacking. For over a year evolved and I learned all the basics of PHP development from that time. I started off by modifying the styling, then adding editable links menu sections and in the end posts could have "reactions" and ratings too.

The original from 2006

Learning from that all future instances of the site would be all my own code and all about learning new things and trying out new web development methodologies.

Read Full Post

No comments yet... :: Posted by Nick Palmer :: 2013-02-13 00:53:51