Glitch effect on text in pure CSS
dustri.org
dustri.org
h2 {
filter: url(https://dustri.org/b/files/glitch.svg#filter);
}
By comparison, the CSS version can only be applied to text, and requires duplicating the text content at least once (the article duplicates it once in an attribute value, which is sufficient only for plain text; if you wanted any mixed formatting like bold or italics, you’d need to duplicate the element twice).
Also of glitch.svg: 6ßpx looks like an interesting number. Wonder if the error is intentional or not.
Interestingly, searching for "6ßpx" gives a few results. This is probably the culprit, going by author name: https://codepen.io/DirkWeber/pen/ArFvk
If the background is dark blue you won’t be able to see the effect very well.
The reason is Apple no longer offer a non-super-glare screen on their laptops any more. I bought an MBP about 10 years ago, and the choice between a "matte" screen or "make everything more difficult to see in every environmental condition except inside the Apple Store" screen. Obviously I went for matte.
In their infinite marketing wisdom, Apple has removed the matte option.
Eventually I decided that I preferred that the theme match the ambient lighting conditions. The recent operating system and browser features to provide adaptive behaviour is exactly what I sought. I now use light themes during the day–I am also a fan of natural light, and dark themes at night with reduced blue and lower colour saturation. I personally don't understand the preference for dark themes in bright ambient lighting. For me it seems to induce more eyestrain than relieving it.
In this case, this means adding something like the following to glitch.css:
@media (prefers-color-scheme: dark) {
.glitch {
color: white;
}
.glitch:before, .glitch:after {
background: #1c1c1c;
}
/* and, unless you change the SVG one to use clipping or masking instead of a white flood fill, probably easiest to just give it a white background and be done with it: */
[alt="Svg glitch"] {
background: white;
}
}
Am I missing something? This very site doesn't seem to offer theme/dark mode on my end.
Hacker News is always the exception.
Sounds like a good way to get people to never introduce multiple themes.
Accessibility is a good example of this, so that, for the web, the ARIA Practices document starts with a big warning, “no ARIA is better than bad ARIA”—because in general if you don’t touch ARIA stuff everything will still be there and usable, but it’s easy to mess everything up if you set things in the wrong way (but you can’t really put guard rails in without crippling the functionality for those cases where it is desired).
Dark modes can be added by browser extensions like Dark Reader, and it’s not frightfully uncommon for it to do a better job than the author—on this site, for example, Dark Reader would handle the code highlighting properly, where the author neglected to. (Would it have handled the glitch background thing? I haven’t tried it, but from past experience of how it works I think it would have caught at least the CSS one, but I’m not sure what it would have done with the SVG one at all.)
The top example is just a GIF, so that's whatever - but the bottom example, which is actual text using this CSS trick, flickers white in a way that unfortunately ruins the illusion of the experience with a black background.
The code needs to use CSS's 'prefers-color-scheme' to differ between background colours for the effect.
This could also be used, for that matter; to auto-invert the 'text' colour. :)
I think it'd be worth trying to translate this to CSS on text in a web page and see if the performance issues are still there. One can do it transparently these days with CSS filters. Or just draw against same colour as page background.
In fact, I think I'm going to give this a try. Will update here, but might take a while to get to it. I also wonder if it could be done more simply. this is basically just slices of offset text right? Also, those clip rects are pretty large. Wonder if that would impact browser texture allocation.
I also remember a big issue with a blinking cursor, so I am thinking why is such heavy animation APIs not coming with giant warnings.
Overall I'd say if your web page doesn't need continuous animation, and you're worried about battery life or stutteriness or whatever, maybe don't use it?
It has gotten a lot better though. Not for SVG though, at least not last time I checked, and forget about SVG animated fonts unless you don't mind running CPU at 100% nonstop. :)
CSS generally does not trigger reflow, including in this case. More: https://gist.github.com/paulirish/5d52fb081b3570c81e3a
Also in my Process manager I see 2 chrome process with 5% and 7=8% usage witht he animated element and if I remove the elemtn I see only 1 process with 2% usage (weird static page still uses CPU, maybe there is still some other crap somewhere I had no adblocking on.
So far the only way I found to debug such performance issue was to start deleting elements until the CPU usage in Process manager drops I wish I knew a better way.
I'm kinda confused, I do some data visualization work professionally and I understand how overlay patterns on SVGs work with the 'fill' property and IDs but lost with what the 'content' property is actually doing.
Why is it necessary to replace the h1 text with identical text? What does 'content' enable? It seems unnecessary to replace the text with the same text right?
[0] https://developer.mozilla.org/en-US/docs/Web/CSS/::after
I always struggle to change my mental model about css to be more expressive, but now many wheels are starting to turn.
`::before & ::after` are pseudo-elements and a very common way of creating independently styleable elements when doing CSS effects like this
`content` is a property you can use to add text to those elements (he could have also just written `content: 'Artificial Truth';` if he preferred - having it as a data-attribute puts it right next to the "real" text and makes things easier to maintain)
`attr(data-text)` sets the value of content to the value of an attribute of the HTML. data-* is a common convention for creating value that aren't used for display. It is not possible, to my knowledge, to access the text contained within the `<h1>` with CSS only, hence the above choices.
In any case, for an animation like this I'd set it to run through a few times, perhaps just once, then stop instead of bouncing around infinitely. Or have a long frame at then end of the sequence so that it only animates occasionally.
Though the loop than ends or only results in occasional animation has another rather nice benefit: less stuff jiggling around to drag my attention away from what I'm actually trying to look at. And using that will break the articles “with pure CSS” intent.
Though do make sure you are understanding that 84% figure. Is it really that much of a full speed core or that much of one that is in a low power mode because none of the CPU needs to be at full speed ATM. CPU loading read from task manager apps and similar can be quite misleading these days.