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
-
Building ConLangs, with a concrete example by Charles_Rockafellor, 𝖀𝓷ᶦ𝕔ⓞðə E Ⓜ️🅾️j̵͍̟̝̝̖̮̓ͭͨ̂̐̚ℹ️ (Charles_Rockafellor)
Fandoms: Conlangs - Fandom
07 Apr 2024
Tags
Summary
Sometimes we want a conlang (constructed language) in our fic (or even without a fic). They abound in the wild — Star Trek's Klingon has an essentially functional vocabulary, Tolkien put in a lot of work on Elvish Quenya and other languages of Middle Earth, and many others exist in one state of completeness or another.
So, how do you go about making one for yourself? This takes you through the steps alongside resource links; where you start building one is up to you, but this provides a good grounding in some of the basics at least. It also goes through those steps as it progresses, building up the lelɹli conlang as we go. The sounds and written form, the vocabulary and grammar, and even dialects, though each section's associated linked resources are probably of more interest to most (except perhaps my readers).
NB: there's a metric shit-ton of IPA in here, for which I apologize beforehand should you read this with a TTS screen reader (or, I imagine, a braille reader) that's not majorly buffed.
I read, appreciate, and reply to all of your comments — they're always welcome!
𝑫𝒐𝒏'𝒕 𝒇𝒐𝒓𝒈𝒆𝒕 𝒕𝒐 𝑳𝒊𝒌𝒆, 𝑺𝒉𝒂𝒓𝒆, 𝒂𝒏𝒅 𝑺𝒖𝒃𝒔𝒄𝒓𝒊𝒃𝒆! ❤️
Series
- Part 11 of How to
-
Userscript and CSS, as you prefer, to return overflow and sticky effects client-side by 𝖀𝓷ᶦ𝕔ⓞðə E Ⓜ️🅾️j̵͍̟̝̝̖̮̓ͭͨ̂̐̚ℹ️ (Charles_Rockafellor) for feindcode (feind)
Fandoms: CSS abuse - Fandom
12 Jun 2026
Tags
Summary
What can I say that isn't pretty self-evident from the title?
On Mon 08 Jun 2026, AO3 updated some stuff that broke a lot of things in a lot of people's CSS-works (and at least one userscript). I fixed it. This fix is only client-side, so that you can re-enable some of the magic that some people have wrought and see it once more as a reader — it doesn't act from within a work skin to force a rollback to the actual server-side site-level underlying code itself, so it's not much good directly for authors (indirectly: your readers might use this to see your effects).
Have you seen some of my CSS demos, or mystyrust's do you believe in coincidences?, or Mewsmodeus (Mewzebub)'s I'M NOT AN FANFIC AUTHOR PLEASE DON'T CURSE ME, or mackerel_cheese's Íkaros in when the wax melts ? If so (before the “update”), then you know and remember; if not, then you're going to want to do so, and you'll want this CSS or JS with which to view them in all of their glory.
-
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
-
Bubble-pop! game by Charles_Rockafellor, 𝖀𝓷ᶦ𝕔ⓞðə E Ⓜ️🅾️j̵͍̟̝̝̖̮̓ͭͨ̂̐̚ℹ️ (Charles_Rockafellor)
Fandoms: css - Fandom
27 Jul 2025
Tags
Summary
Ever want to pop some bubbles? Ever want to use RNG to generate them? Well then, here's your handy, dandy bubble-popping game with Random Number Generator, all rolled into one! (Full code included.)
But wait, there's more! Yes sirree, Bob, this li'l baby comes with colors and patterns on its bubbles, and a little tense background music for ambience (might need a pop first, depending upon browser)... and no, it's not a Rick Roll (TL;DR from testing: audio in desktop Chrome, not desktop Opera, iPhone Safari, or Android Chrome; desktop results vary with settings for Firefox, TOR, and MS Edge — details in head-note). G'head: kick the tires and take her out for a spin! ❤️
And YES, it's PLAYABLE ! Tap / chase to click the bubble, find the next; OCD Heaven/Hell!
Don't panic! 😁
Series
- Part 7 of How to
-
Fonts, and colors, and work skins, oh my! by Charles_Rockafellor, 𝖀𝓷ᶦ𝕔ⓞðə E Ⓜ️🅾️j̵͍̟̝̝̖̮̓ͭͨ̂̐̚ℹ️ (Charles_Rockafellor)
Fandoms: css - Fandom, Work Skins - Fandom
24 Jan 2021
Tags
Summary
Explains:
● how to make a work skin;
● how to view fics' work skin rules;
● how to colorize text and circle words and highlight backgrounds (examples in head-note), and change and resize your fonts;
● how to turn all links blue-underscore automatically;
● the CSS code for diacritics to render properly, e.g.: “ầ” & “ồ” (with diacritics not superimposed), or “ị” (with underdot directly beneath, not kerned to the left), without breaking words such as “gầu” or “vịt” (using a monotype font for these letters would create gaps to each side of the ầ or the ị). Head-note has corrected examples;
● Site Skin addenda to block / shrink tags, and block authors / works;
● even a quick way (code included) to simply make a Site Skin so that you can read everything in your font of preference!Full code is included.
I read, appreciate, and reply to all of your comments — they're always welcome!
𝑫𝒐𝒏'𝒕 𝒇𝒐𝒓𝒈𝒆𝒕 𝒕𝒐 𝑳𝒊𝒌𝒆, 𝑺𝒉𝒂𝒓𝒆, 𝒂𝒏𝒅 𝑺𝒖𝒃𝒔𝒄𝒓𝒊𝒃𝒆! ❤️
Series
- Part 5 of How to