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
The Header and Footer
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.
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; | |
} |
Credit to the team at Waldinger Creative, whom Bmore Creative, Inc. partnered with, for designing a beautiful website.