I Love Webkit Image Filters!

by

It’s a shame this will not be supported cross-browser sooner. This kind of thing will open up much more customization in Wayward without a lot of overhead, programming or asset creation – everything can be changed on the fly using some really neat Webkit (Chrome/Safari) CSS image filter properties. Below is an example using the fabled “Golden Sword” available in Wayward. This is all using the same graphic.

Swords

  1. Golden Sword
  2. Inferior Golden Sword
    -webkit-filter:saturate(0.8) contrast(0.8);
  3. Exceptional Golden Sword
    -webkit-filter:contrast(1.2) saturate(1.2) brightness(0.1);
  4. Iron Sword
    -webkit-filter:grayscale(1);
  5. Bronze Sword
    -webkit-filter:hue-rotate(10deg) saturate(1.2);
  6. Ultra Rare Super Awesome Ice Blade +3
    -webkit-filter:hue-rotate(160deg) saturate(2.0);

Obviously there’s a lot more possibilities here than shown above. Additional note: There is some very “hacky” ways to get cross-browser support for some of these things using just CSS involving some SVG tricks for Firefox and Microsoft filter effects for IE, but will not produce the same range of effects as Webkit’s implementation allows.

1 thought on “I Love Webkit Image Filters!”

Leave a Comment