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.