Skip to main content

Design in the browser with CSS image effects

It used to be that the most exotic thing you could do with images in the browser was just to change the image resolution, but as computers and web browsers become more powerful it's now possible to create impressive image effects that you'd expect to have to use Photoshop CC for.

All it takes is a bit of CSS knowledge, and in this session from Generate (opens in new tab) New York back in April, Una Kravets (opens in new tab) – creator of the ever-popular CSSGram (opens in new tab) - shows you how to do it. She points out that it's now possible to design in the browser, and over half an hour she demonstrates how to apply filters, blend modes and gradients to images, and shows you how to combine them to bring pictures to life without going anywhere near Photoshop.

Generate New York - Una Kravets

Learn how to apply filters, blends and gradients in the browser with Una Kravets

It's increasingly easy to pull off amazing visual tricks in the browser using the standard web toolkit rather than relying on plugins, and if you want to give your pages extra flair then there are plenty of opportunities to learn the latest visual techniques at upcoming Generate conferences.

This Friday at Generate San Francisco (opens in new tab) Sarah Drasner will be explaining how you can create intricate SVG animations (opens in new tab). As well as demonstrating multiple techniques for manipulating vectors, she'll also show you how to use SVGs as a viewfinder, push the boundaries of the CPU with filters, and even combine techniques to create otherworldly effects. Don't miss out; there's still time to book your ticket!

At Generate Sydney (opens in new tab) on 5 September, Val Head will discuss motion in design systems (opens in new tab). In her talk she'll cover guidelines for designing animation that fits your brand, making animation part of your design process, and documenting your animation decisions in your style guide for future use; all the things you need to make web animation work for you and your team.

Generate London - Cennydd Bowles

Don't miss Cennydd Bowles' all singing, all dancing Generate London session
(opens in new tab)

And at Generate London (opens in new tab) on 22 September, Cennydd Bowles will talk about adding an extra dimension to your web experiences: sound. In All singing, all dancing (opens in new tab) he'll look at the potential of sound in our products, show you how simple music theory can help communicate mood and function, and finally explore how motion and sound together can help bring life and clarity to the things we make.

If you're serious about web design or frontend development then you can't afford to miss Generate; it's a perfect opportunity to learn from the experts and give yourself an extra competitive edge that'll win you more clients and keep them coming back. To find out more, head to the main Generate site (opens in new tab).

Thank you for reading 5 articles this month* Join now for unlimited access

Enjoy your first month for just £1 / $1 / €1

*Read 5 free articles per month without a subscription

Join now for unlimited access

Try first month for just £1 / $1 / €1

Jim McCauley is a writer, performer and cat-wrangler who started writing professionally way back in 1995 on PC Format magazine, and has been covering technology-related subjects ever since, whether it's hardware, software or videogames. A chance call in 2005 led to Jim taking charge of Computer Arts' website and developing an interest in the world of graphic design, and eventually led to a move over to the freshly-launched Creative Bloq in 2012. Jim now works as a freelance writer for sites including Creative Bloq, T3 and PetsRadar, specialising in design, technology, wellness and cats, while doing the occasional pantomime and street performance in Bath and designing posters for a local drama group on the side.

Topics