development

Understanding CSS clip-path

Understanding CSS clip-path

The world of CSS just keeps getting better as new specs are introduced and eventually adopted by major browsers. One of those exciting specs is CSS Masking. While not fully supported across the major browser line up, it’s an interesting addition that’s generating a lot of attention. One absolutely outstanding example of what can be achieved with css masking is a project by Bryan James - Species in Pieces that showcases a collection of endangered species, made and animated using clip-path. 

Defined in the CSS Masking Module Level 1 spec, CSS masking provides two ways to hide sections of full images or objects: masking and clipping. Masking allows the use of another element to create a luminance or an alpha mask. Clipping simply provides a mechanism to only show a certain section of an object. Think of it as taking scissors and cutting a part of a piece of paper into a shape you want. 

In this post, I want to explore specifically the clip-path property and show a quick example of what can be achieved by it. 

So we tried Slack. And failed.

So we tried Slack. And failed.

In my group, we use Outlook and Lync as our main forms of communication. The traditional, brick and mortar means of communication in the corporate workplace. Introduction of Lync a few years ago reduced the volume of email. After all, there’s no need to send an email to ask someone “Hey, did you deliver your changes yet?”. What Lync didn’t solve, and was never really meant to solve, is the ease of finding relevant information in a pool of hundreds of messages that end up in your inbox every day. 

Corporate email is broken, and most people know that, yet monolithic companies are slow to change. So here we are, in 2015, still sorting through piles of useless email. 

Enter Slack.