Captivatingly colourful campaigns: Our guide to using CSS Filters in email
CSS filters can be used to alter the way in which an image is rendered. They can be used to blur, warp or modify the colour intensity of an image without the need for photo editing software.
For example, using the grayscale(1) argument, we can change a full colour image to black and white:
Alternatively, we could use the invert filter to create an x-ray effect:
In addition to these filters, which accept an argument between 0 and 1, there’s a variety of other filters where a higher value or alternative unit is accepted. For example, the hue-rotate filter accepts an argument between 0 and 360 degrees:
This clever CSS filters tool is a really useful resource for experimenting with various CSS filters, you can even create combinations of multiple CSS filters for an even wider variety of image-alteration outcomes!
CSS filters and animation
CSS filters can be also be combined with CSS animation to create some eye-catching effects and add life to an element which has traditionally been static.
For example, perhaps we’d like our header image to encapsulate a funky disco scene, such as in this example:
http://dev01.tmw.co.uk/EMAILS/test/filters/filters-disco.html
This effect can be created with the following code:
We create an animation, “filter-disco”, which puts a sepia filter onto the image and a higher saturation at 50%, this is then lowered again at 100% so that the colours in the image blur in an out, creating a cool disco effect:
@-webkit-keyframes filter-disco {
0% {
-webkit-filter: sepia(0) saturate(2);
}
50% {
-webkit-filter: sepia(1) saturate(8);
}
100% {
-webkit-filter: sepia(0) saturate(2);
}
}We then apply the class that we’ve attributed to our image property, together with a 5 second play time. We also set the animation count to infinite so that it loops:
img.disco {
-webkit-animation: filter-disco 5s infinite;
}Another instance of where we could use a combination of CSS filters and animation in email is to reveal a new product, by using the CSS ‘blur’ filter to create an enigmatic effect and draw the user’s attention, such as in this example:
http://dev01.tmw.co.uk/EMAILS/test/filters/filter-reveal.html
This effect is created in a similar way, the CCS blur filter accepts a unit-related value as opposed to a percentage based value. We want the image to be illegible when the user first opens the email, so I’ve started the animated with a blur value of 10px. I wanted the blur filter to be removed a bit faster towards the end of the animation so I set the value to 4px in the middle of the animation, with the filter being completely removed at the end:
@-webkit-keyframes filter-blur {
0% {
-webkit-filter: blur(10px);
}
50% {
-webkit-filter: blur(4px);
}
100% {
-webkit-filter: blur(0);
}
}You will notice this animation is slightly longer at 7 seconds. This is a great way of making your recipients more likely to engage with the rest of the content within your email, because by the time the animation has stopped and the blur filter is completely removed the user has already invested 7 seconds of their time looking at the email.
img.cakes {
-webkit-animation: filter-blur 7s;
}Why not just use an animated gif?
Traditionally, the only way to include an animated element in email was via an animated gif. Whilst it remains true that animated gifs are still more widely supported within email clients, there are some good arguments[1] for a clever combo of CSS filters and CSS animation as an alternative to the traditional animated gif:
· CSS Animations are more lightweight and quicker to load than animated gifs, which is particularly useful for keeping your email size below 100KB
· Animations are much smoother than animated gifs
· GIFs are limited to 256 different colours, whereas a much wider variety of colours can be rendered with CSS. Aesthetically, this therefore has a much better impact.
A note about multiple classes
In email, it is likely that you’ll want to optimise images for smaller devices, perhaps by changing the width for example. If this is the case, your images may already have a class within a media query to enable you to achieve this.
So what if we want to assign a second class to our image in order to apply our css filter? This is achieved with specific css selectors. If we assign multiple classes to our image like this:
It is important to note that both classes will not work if we use multiple attribute selectors to define them:
*[class="grey-blossom"] {
-webkit-filter: grayscale(1);
filter: grayscale(1);
}*[class="shrink"] {
width:320px !important;
}
This is because the attribute selector searches for exactly the value on the element, which in this instance is “shrink grey-blossom”. Therefore, we could use:
img[class="shrink grey-blossom"] {
-webkit-filter: grayscale(1) !important;
filter:grayscale(1) !important;
width:320px !important;
}But in this case, we want to keep both classes separate, because the shrink class is placed inside a media query but the image filter, the “grey-blossom” class, is not. To get around this, we can specify the img element within the class selectors i.e.:
img.grey-blossom {
-webkit-filter: grayscale(1) !important;
filter:grayscale(1) !important;
}Then, inside the media query:
img.grey-blossom {
width:320px !important;
}This method will enable both classes to be applied to the image in clients where both CSS filters and media queries are supported.
Support
As with many CSS3 properties, CSS filters are not universally supported in all email clients. Currently, CSS3 properties are most widely supported on the following clients[2]:
· Apple Mail
· iOS (iPhone / iPad)
· Android Mail 2.3
· Android 4.2
· AOL Mail (Chrome)
· Outlook 2011 + 2015 (MAC)
It is therefore important to note that, in other popular email clients such as Outlook, Gmail and Yahoo, the CSS filter will not be applied and the image will be served to the user in its original state. For this reason, we would advise that CSS filters should be used in email purely as an enhancement for mobile users and should not be relied upon as a crucial feature of the email.
[1] Alex Ilhan
Animated GIFs vs CSS Animation — The Showdown
https://www.displayblock.com/2014/12/10/animated-gifs-vs-css-animation-showdown/
[2] KEVIN MANDEVILLE
A Bulletproof Guide to Using HTML5 and CSS3 in Email:
https://litmus.com/blog/a-bulletproof-guide-to-using-html5-and-css3-in-email
Authored by Jennifer Birks (@JenniferJBirks), a member of the TMW Unlimited Email Team (@TMWEmail). Jennifer is developer, campaign consultant and all round #emailgeek.
Her favourite email campaign is the Burberry’s interactive scarf personaliser email, which uses sprite sheet animation and interactive check-boxes to showcase a variety of products.
