Last week, I shared my frustration with not getting a solution to work out for the new project I was working on–a design/build for the True Woman ‘27 Conference that Revive Our Hearts will put on at the end of September 2027. Over the weekend, I had a new idea on how to tackle the problem and was successful in pulling it off. The evolution of a solution As I mentioned last week, one of the logo variations had a “punched out” shape element. I wanted to punch out that shape from a div within the hero so that it would reveal a fixed positioned paint background that was applied to the header element. <header class="tw-hero"> <div class="layer-with-punch-out">...<div> </header> I thought there would be a way to do this by applying a SVG mask to .layer-with-punch-out that would allow the background image to .tw-hero to show through so that you would see different parts of that paint background as the page scrolled. As I mentioned last week, I tried a masking technique but I ran into two…
No comments yet. Log in to reply on the Fediverse. Comments will appear here.