Takeflight - Web design and web development

Main navigation

Introduction

University of Tasmania: 125 Stories

Web design, content strategy

Drawing on the University of Tasmania’s rich history and tapping into their deep archives, we delivered an engaging interactive timeline experience as the centerpiece for their 125th anniversary celebrations.

Tidetech

Web design, API development

Elegance and innovation in data representation. We created a highly designed marketing and subscription platform for a company that supplies important ocean data to commercial and recreational boaters.

Our team

Passionate and brilliant

At Takeflight we don’t hide behind account managers. We believe that to deliver the best outcome, the people working on the project need to understand you and your business - which can only happen with direct communication.

Xref

Web design

Fudging masks using CSS blend modes

One of the features I'm super excited about is masking using SVGs. But the limited support for masking or applying SVG filters to HTML elements meant having to turn any text or images into SVG instead of HTML. Which I'm not a fan of.

Then I started spending some time with blend modes and found I could achieve many of the masks I needed using them instead. The idea is fairly simple. Use a combination of the darken and lighten blend modes along with black and white shapes made using plain css to mask off sections of one html element and let layers below them become visible.

It's worth pointing out that you can achieve the same effect exhibited here with better browser support using clip-path - thanks @SaraSoueidan for pointing this out. BUT if you want to use text as part of your mask that means putting it in an external SVG file. This method allows you to keep it in the main HTML document - where it belongs ;)

You've been warned. In lieu of this being useful, see it as an interesting hack.