Takeflight - Web design and web development

Introduction

We’re a bunch of highly skilled developers and designers who create innovative and engaging websites and apps.

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.

Screenshot of UTAS 125 home page on an iPad
Screenshot of UTAS 125 home page on an iPhone

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.

Screenshot of Tidetech home page on mobile

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.

team-small.jpg

Xref
Web design

To help users understand a complex product we created a marketing website that educates via animated storytelling.

Screenshot of Xref home page on an iPhone
Article

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.

Read more

Free Wi-Fi
App development, web design

An app to help deliver free wi-fi to the masses around Tasmania.

Screenshot of Free Wi-Fi home page on an iPhone
Screenshot of Free Wi-Fi fullscreen map page on an iPhone

Like what you see?
Let's chat about working together

Get in touch directly with our client services director, Casey.

You can reach him by phone on 1800 954 700, email at casey@takeflight.com.au or visit us at Factory Floor in Hobart, Tasmania