UI Challenge - Elevate CSS masking techniques

The premise

A few months ago, we started the AgileThought re-branding project. As the lead of the company's Web practice, I worked shoulder-to-shoulder with the head of the Design Guild to make sure the new brand of the company reflects our status and true potential to the world. As all projects of this nature, we were holding regular meetings with the Design team, to review their designs and their expected functionality.

The challenge

During one of those meetings, the Design team came up with the following piece:

At first sight, it looks like a regular design till they explained something that changed everything; the idea is that all avatars (as they’re meant to show people pics) share the same background of whatever element it's behind (per design, we will be using a gradient and a doodle as background); this implies each avatar background will look different in each device as their position will vary depending on the viewport size. At that point, we had not realized the challenge the design team put in front of us, it was till we started to brainstorm about how to implement it that we figured it was not going to be that simple. This component caught my attention as I had never built one like this before so I took it for myself. Before jumping to the technical solution, it's worth to mention some relevant facts related to it:

• The component is used in several pages and the shape (e.g. hexagon) is different in some of them.
• The shape is used for another website components.

The solution

Now let's talk about the solution; for this, we are going to need 2 components:

• The Avatar component
• The Avatar Grid component

But first, in case you are like me, a desperate person, you could take a look to an implemented use case here. Now lets begin.

The Avatar component

Our goal is creating a visual effect that a person is coming out of the shape. In order to achieve that I needed 3 layers:

Back Layer - The shape container

For this layer I needed to consider the following:

• The solution should allow to manage the shape aspect ratio regardless of its size (this way the component responsiveness will be easy to handle)
• The solution should allow to use a shape and clip whatever is outside of it as shapes are used in another web components (creating a new shape would be an alternative but it would bring another complications when using it in a grid and also would take the fun away of it). And after some reading/researching/coding, I came up with the piece of CSS code that did the trick:

.masked {

mask-image: url(https://atwebsite.blob.core.windows.net/images/hexagon.svg), linear-gradient(#fff,#fff);

mask-size: calc(100% - 20px) calc(100% - 20px), 120%;

mask-composite: exclude;

mask-origin: content-box;

mask-repeat: no-repeat;

mask-position: center;

}

This CSS technique allows to take several shapes (in this case we are using a hexagon and the square drawn by the gradient) and clip whatever portion of the element where shapes are not colliding.

This approach perfectly fits the solution needs mentioned above.

Middle Layer - The picture container

The second layer will hold the picture, there is not much going on here, just usual CSS. I scaled the picture up so it's always bigger than the shape which is needed for the coming out of the shape effect.

Front Layer - The bottom half of the shape container

As you could imagine, I just simple reused the shape container built in the first layer but also added a parent (container) so I can handle the portion of the picture I want to be covered from the bottom to the top.

Here you'll find a Pen with a full implementation of this component and a couple of CSS variables you can play with.

That's it for our first piece of this solution; in the next part I will using the component we just made to create a cool grid.