3 ms·
Unrelated to the content of the article, the effect on the left sidebar (white text on green, blending in diagonally with the same text green on white as you sc
by wildpeaks 3y ago
Unrelated to the content of the article, the effect on the left sidebar (white text on green, blending in diagonally with the same text green on white as you scroll) looks visually interesting.
- gen_greyface 3y agoits not smooth, but interesting nonetheless
- DaiPlusPlus 3y ago> blending in diagonally with the same text green on white as you scroll I took a quick look - initially I was thinking they'd be doing something smart, like using CSS blending filters or a text-mask technique as to avoid duplicating HTML markup - but alas, no: duplicating HTM is exactly what they're doing: there's two copies of the sidebar HTML (`div.gta-article--scroller--top` and `div.gta-article--scroller--bottom`), the one with white-text is z-ordered above the scrolling gradient, the other (with green text) is z-ordered behind it. I'm surprised at the extent people still compromise their HTML for CSS effects when it really isn't necessary - the curse of divitis still exists :/
- iainmerrick 3y agoThe other way of looking at it is, this is the brute-force way of doing it that works and is probably reliable on lots of browsers. Trying to do it in "proper" CSS could be fiddly to get right, and may or may not work the same in all browsers. (I don't know off-hand about this particular effect, but I've done some work with CSS gradients recently and they really don't compose well with other features.)
- abluecloud 3y agoyep. why spend more time to achieve the same effect? as long as you've marked the elements as "invisible" so a screen reader wont read them both out, and it works, what really matters. of all things, the extra few divs and css isn't gonna cause issues here.