The second is a quick little thing I live-coded in Professor Mode on @codepen in under 15 minutes a little while back.
Just like the first, it has absolutely no text duplication, not in the markup and not in pseudo content.
A little #SVG #filter magic slices and offsets it https://codepen.io/thebabydino/pen/RwmPZVR
The third is something I quickly made to answer a question I saw on reddit https://reddit.com/r/css/comments/1fwm87i/comment/lqg11fl/
It's similar to something you can find on a lot of websites with a couple extra constraints: no extra elements, no pseudos
working fine on top of image background
Slice! is the fourth, one of my faves and also by far my most popular demo I've made this year
https://codepen.io/thebabydino/pen/GRaKbZo
No JS, no text duplication whatsoever, no images save for CSS gradients. SVG filters take care of both the texture and the slice + offset effect.
Also contenteditable.
Oh, and the code is heavily commented.
The fifth is a pure #CSS text effect.
https://codepen.io/thebabydino/pen/XWQQRWG
No text duplication whatsoever, no pseudos, no images save for CSS gradients. Just a single div and a few heavily commented CSS declarations.
Unfortunately broken in Firefox due to an old bug https://bugzilla.mozilla.org/show_bug.cgi?id=1481498
The sixth is a little pure #CSS #3D thing I quickly make in under 10 minutes https://codepen.io/thebabydino/pen/wvbWYyd
I really didn't expect anyone would even notice such a silly simple little thing and then it got hearted over 200 times...
The seventh is a fancy effect you may have seen on some websites: making a section slide horizontally on vertical scroll!
Here with pure #CSS using scroll-driven animations
The eighth is this no text duplication blended layers demo https://codepen.io/thebabydino/pen/abxLyxw
Uses #CSS gradients and some #SVG #filter magic to get the effect - can you figure out how before checking it out on @codepen?
@codepen The ninth is a realistic image grainy shadow effect:
https://codepen.io/thebabydino/pen/OJYwgpe
Using a single img element for each. No image duplication in the markup or CSS.
The tenth is this no text duplication stroke shadow
https://codepen.io/thebabydino/pen/mdoPoJz
Absolutely no text duplication, not in the markup, not in any pseudo-element content.
The outline shadows are tiled down using an #SVG #filter, which is also responsible for the wave distortion.
@anatudor In case I don’t say it enough, love your work :)
@anatudor your version of trivial is actually black magic to me. Can’t even comprehend any of these.
@anatudor You're a fucking genius, honestly.