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.
- 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:
|background-image: linear-gradient(black, black), url(/path/to/background/image.jpg);|
|clip-path: polygon(0 0, 100% 0%, 100% 85%, 50% 100%, 0% 85%);|
|background-image: linear-gradient(76deg, rgba(0, 179, 255, 0.49), rgba(209, 255, 0, 0.73) 98%);|
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:
|mask-position: center right;|
To achieve the drop shadow, I applied a background image to the parent element, positioned the same way as the bubble mask:
|background-position: center right;|
Credit to the team at Waldinger Creative, whom Bmore Creative, Inc. partnered with, for designing a beautiful website.