Farewell Photoshop: Advanced CSS Image Techniques

Over its history, the Web has become an increasingly visual medium. And throughout that time, Photoshop and similar tools have been the mainly we create visual adornment . But images are big, impacting performance, particularly on mobile devices, and unwieldy in terms of workflow – even minor edits can trip up a fast paced project.

So increasingly we’re using CSS properties to create engaging visual effects.

But while you’ve probably used gradients, at least a little, CSS now features the sort of sophisticated image manipulation effects you most likely think you need Photoshop for, including filters that allow us to blur, change the brightness and contrast and otherwise affect an image, and blend modes.

In this session, Jessica Edwards will show you real world examples, how they are done, outline the benefits, and cover off issues like browser support, and fallbacks for older browsers and devices.

slides [https://github.com/jessicace?tab=repositories]

There are a number of CSS properties that allow devs and designers to control how images are displayed on the web, delivering a level of control that has previously been credited only to Photoshop.

 

A developer is likely to prefer creating image effects with code.

 

Blend mode in digital image editing determines how two images on separate layers can be blended together.

 

CSS <blend-mode> can be used with the same 16 keywords used to identify blending effects in Photoshop, as defined in a W3C spec.

 

It’s probably too early to rely solely on these techniques, due mainly to variations in browser support, but it’s good to familiarise yourself with what can be done in browsers that do support these properties now.