In all the right ways, Ecovyst is a clean, minimalist website with an emphasis on the compelling use of images and a straightforward presentation of content.

Services

  • Front End Development
  • CMS Implementation

CSS is extremely powerful when it comes to image manipulation. I like trying to capture the aesthetic of the image treatment within a design without burdening the client or design agency with having to manipulate images in Photoshop or other image editing software. In other words, a client should be able to upload a standard image and have CSS do the heavy lifting.

For Ecovyst, the general aesthetic was to apply a gradient overlay over a grayscale image.

Screenshot of header image, demonstrating a blue-to-green gradient overlay and chevron-shaped clip path.
Header image
Screenshot of footer image, demonstrating a blue overlay and chevron-shaped clip path.
Footer image

To accomplish this, I used the following style declarations:

.overlay{
background-cover: cover;
background-image: linear-gradient(black, black), url(/path/to/background/image.jpg);
background-repeat: no-repeat;
background-blend-mode: saturation;
clip-path: polygon(0 0, 100% 0%, 100% 85%, 50% 100%, 0% 85%);
}
.overlay::before{
background-image: linear-gradient(76deg, rgba(0, 179, 255, 0.49), rgba(209, 255, 0, 0.73) 98%);
content: "";
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}

The critical piece is to include the full black linear-gradient with the background image. In conjunction with the blackground-blend-mode: saturation, that creates the grayscale background image. Then, the ::before pseudo-class declarations create the overlay with the blue-to-green angled gradient. Finally, using clip-path created the chevron shape for the section.

The Bubble Graphics

I’ve written about CSS masks for the Wayforth project, but this project kicked it up a notch with the inclusion of the drop shadows.

For the bubble shape, I used the following declarations:

.bubble{
mask-image: url(/path/to/bubble.svg);
mask-position: center right;
mask-repeat: no-repeat;
mask-size: cover;
}

To achieve the drop shadow, I applied a background image to the parent element, positioned the same way as the bubble mask:

.parent{
background-image: url(/path/to/background/image.svg);
background-position: center right;
background-repeat: no-repeat;
background-size: contain;
}
Mask image
Mask image
Background image
Background image

Credit to the team at Waldinger Creative, whom Bmore Creative, Inc. partnered with, for designing a beautiful website.