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.

Using CSS to manipulate images means changing them requires only the editing of code, not opening image editing software.

 

The 16 keywords that can be used with <blend-mode> are normal, darken, multiply, color-burn, lighten, screen, color-dodge, overlay, soft-light, hard-light, color, hue, saturation, and luminosity.

 

Explore linear-gradient(), radial-gradient(), repeating-radial-gradient() and repeating-linear-gradient() for gradient effects.

 

<background-blend-mode> can be used on all HTML elements and <mix-blend-mode> can be used on any element inclduing SVG.

 

Filters can be used for interesting effects: blur, brightness and hue-rotate, can be chained and can add hardware acceleration.

Browser support is variable

 

Cross-device consistency can be an issue

 

Consider accessibility, for example with colour contrast and readability

 

Stacking context: element order matters especially when working with frameworks

 

Performance: effects like opacity can affect rendering