This probably shouldn’t have been a surprise. And, since nothing changes before the blending, its result is the same. And the answer is that, yes, drop-shadow() works, but the way it works – the shadow being blended with the header background 2 – provides a clue about why grayscale() didn’t change a thing: filters are applied before blending, our text is white and the output of grayscale() in this case is identical to its input (white in, white out). Does any filter value work? Well, tried drop-shadow() next to try to find an answer to this question. However, the text isn’t grayscale anymore and setting filter: grayscale(1) doesn’t change anything. Mission accomplished! Both the text and the image can be changed and the effect is preserved without the need for any JavaScript or for any changes to the CSS.īut I instantly found that there was another itch to scratch: what happens if the image isn’t just black and white? Well, let’s try that! Turns out the result actually looks pretty good: The result can be seen in the following Pen: For simple black and white images, black in the original image becomes white where we have white text above it and white in the original image becomes black where we have white text above it. What I can understand in this situation is that having white text over the image gives us a result that’s the image inverted where the text overlaps it. I can’t really understand blend modes or normally see a difference between difference and exclusion, but according to MDN, they’re pretty much the same, with exclusion having less contrast. We set the background-image on the header container, we give the h2 white text and set its mix-blend-mode to difference or exclusion. Let’s say we have a heading in a contentEditable 1 container with a black and white image (well, grayscale) background. So I decided to give my initial idea – blend modes – a try. However, this means we need to change the clipping path if we change the image and, at this point, it’s anything but easy to figure out polygonal clipping paths with a lot of points via dev tools (which is why having something like Benett Feely’s Clippy with two-way editing directly in dev tools would be immensely useful). Then the pseudo-element with the white text above gets clipped to the shape of the black dress. These two are stacked one on top of each other (they completely overlap). We have black text below as the actual text content of the element and the white text above as the value of the content property (taken from a data attribute which gets updated via JS). Instantly, my mind went “blend modes!”, which turned out to be wrong. I’m a very visual creature, so the first thing I noticed was the effect, not the title (which clearly states how the effect was achieved). It started with seeing a recent Pen of Mandy Michael’s text effects demos.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |