CSS Abuse and HTML Tryhard
My HTML and CSS works are growing, and they're not all in the tutorial series (though honestly, a lot of my regular fics [not in this collection] have snippets of CSS in their notes, outlining and explaining quick little bits of computer magic used for an offhand effect [not being the focus of the work] in some chapter), but I figured that collecting the particularly CSS-heavy or *-related works (tutorials, demos, games, etc.) into one spot might be useful for readers and researchers, so... here they are, all in One Big Happy — ENJOY! 😁
Tutorials, QRLs (Quick Reference Lists), demos, [playable] games.
(Closed, Moderated)
Random works
-
Userscript to return tailored kudos thanks' and styled comments' visibility client-side by 𝖀𝓷ᶦ𝕔ⓞðə E Ⓜ️🅾️j̵͍̟̝̝̖̮̓ͭͨ̂̐̚ℹ️ (Charles_Rockafellor) for Mewsmodeus (Mewzebub), GumbaBunny
Fandoms: CSS abuse - Fandom
02 Jan 2026
Tags
Summary
Remember when people started tailoring their kudos messages and error notices? Pepperidge Farm remembers — and so do I.
Permit those messages to be seen and go brrrrr again (at least for you as a reader).
I use it in Violentmonkey and Tampermonkey. I don't speak JS (this is me dipping my toes into the water here) and am not at all familiar with the ins and outs of all of the different userscript managers, so you might need slightly different syntax or something if you use a different one (and since I discovered last night that Chrome no longer supports Violentmonkey, and it seems that Tampermonkey and others aren't really open source, I was stuck between Skýlla and Khárybdis). And bonus: it even permits the effect on multichapter works in single-chapter mode!
2x bonus: link at bottom for stats' page SERIES bookmark count.
3x bonus: link beneath that to returnoverflowandsticky.Don't Panic
Make Kudos Great Again!
* Full code included -
̶̢̡̢̨̨̢̛͓̖͈̥̯̗͉̣͍̤̱̟͚͓̠̱̤̻̝͈̗͉̰͚̣͉̜̻̙͉̜͕̪̠̪̺̹̦̦̞̼̥͈̭̜̘͍̥̪̯̘̳͚̦̩̭͉̬̲̝̲̹̥̞̯͕̠̥̯̖͙͔̺̹̹̠̪͎̰̬̗̣̹̼̞̘̦̲̠̻͎͈͙̀̎̋́̆͒̽̃̀̊͊̿̅̄́̈́̇̆̾̔͂̿̏͛́̽͆̄͒̀͗̐̂́̉̀͗͑̀͋̌͐̓̿͒̈̑̉͒̔͂̄̇̅̍͛̃̑̏͊̾͐̈̽̊̄̐͒̋̃̆́́̆́̇̈͐̈́̑͐̑̅͌͗̈́̓͘̚̕͘͜͝͠͠͠͠͠ Foolproof, and just teh fool to prove it! by 𝖀𝓷ᶦ𝕔ⓞðə E Ⓜ️🅾️j̵͍̟̝̝̖̮̓ͭͨ̂̐̚ℹ️ (Charles_Rockafellor)
Fandoms: April Fools' Day - Fandom, CSS abuse - Fandom
01 Apr 2026
Tags
Summary
Just a few gags, gimmicks, and general tomfoolery, some CSS and some textual, all brought together for April Fools' Day (wait: did teh title change?)... enjoy! 😉
(There's even a playable Red Dot [of sorts] for you to chase!)
...just keep an eye out for “Jack”! 🫨
(No, seriously: I say that with humor, but do beware of possible jump-scare .)〽 ♪ ♫
My kung fu
brings m@d 5k1||z to teh yard,
and they're like,
it's stronger than yours....
♫ ♪
— Milkshake
(...or an unreasonable approximation thereof)
Kelis, 2003
NB: With apologies, this isn't optimized for iPhone or Android (slightly better on Android than iPhone, and in either case better sideways in landscape than vertical in portrait); it's essentially functional on them, but not teh same experience as on a computer (a bit weird in Firefox and TOR, but fine in Chrome, MS Edge, and Opera).
Also: Teh lyrics are faux ego; I know just enough to have a little fun; my kung fu is not particularly strong. -
How to AO3 by Charles_Rockafellor, 𝖀𝓷ᶦ𝕔ⓞðə E Ⓜ️🅾️j̵͍̟̝̝̖̮̓ͭͨ̂̐̚ℹ️ (Charles_Rockafellor)
Fandoms: AO3
24 Sep 2023
Tags
Summary
New to AO3 (or even not so new)? Have questions? Dazed and confused?
...do your notes in chapter one stay stuck to the most recent last chapter? 😉
Does your chewing gum lose its flavor on the bedpost overnight?
Start here.🙂 DON'T PANIC ! 🙂
This is a beginner's guide / primer / introduction for readers and writers (possibly better titled “Guide to the Archives”, as someone suggested on Facebook — though that makes me feel like Virgil to some Dantean cerchio or bolgia, prompting me to think instead “Guìdo della archivio” [my 13-14c Genoan is a bit rusty, seriously, so I hope that I got that right]). My later tutorials in this series cover somewhat more advanced stuff, but I've seen so many people (sometimes long-timers) in need of the basic stuff that I finally decided to write this.
One Stop Shop-'n'-Drop? Not quite, but it explains a lot of things that you might not find easily (in some cases, not for years), or might assume work like some other site (which is a hit or miss assumption), and will point you to a number of resources.
Series
- Part 1 of How to
-
Green Rain font, from The Matrix by Charles_Rockafellor, 𝖀𝓷ᶦ𝕔ⓞðə E Ⓜ️🅾️j̵͍̟̝̝̖̮̓ͭͨ̂̐̚ℹ️ (Charles_Rockafellor)
Fandoms: The Matrix (Movies)
02 Apr 2023
Tags
Summary
This gives you the CSS and HTML necessary to present a somewhat passable but rather primitive and
staticDYNAMIC emulation of the “green rain” / “digital rain” of The Matrix. Webkit is included for lead symbols' outline, in order to sharpen the contrast.A dynamic one could be faked nicely with .gifs (AO3 can run Doom, after all), but you can't (by T.o.S.) use Javascript within AO3 (not sure about T.o.S. w.r.t. external), so an actually dynamic font seems a little out of reach for now. But that's OK: 27 Nov 2023 I found a workaround for a dynamic background.
Full code and illustrations are included.
I read, appreciate, and reply to all of your comments — they're always welcome! 🙂
𝑫𝒐𝒏'𝒕 𝒇𝒐𝒓𝒈𝒆𝒕 𝒕𝒐 𝑳𝒊𝒌𝒆, 𝑺𝒉𝒂𝒓𝒆, 𝒂𝒏𝒅 𝑺𝒖𝒃𝒔𝒄𝒓𝒊𝒃𝒆! ❤️
Series
- Part 10 of How to
-
Olive Pine Moon site skin theme by 𝖀𝓷ᶦ𝕔ⓞðə E Ⓜ️🅾️j̵͍̟̝̝̖̮̓ͭͨ̂̐̚ℹ️ (Charles_Rockafellor)
Fandoms: Site Skin - Fandom
03 May 2026
Tags
Summary
This theme uses an olive tone as its basis, and was built at the request of a Redditor.
It requires ravenothere's Closer to Home BASE site skin in order to function.