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
-
Chess puzzle extravaganza by Charles_Rockafellor, 𝖀𝓷ᶦ𝕔ⓞðə E Ⓜ️🅾️j̵͍̟̝̝̖̮̓ͭͨ̂̐̚ℹ️ (Charles_Rockafellor) for Mewsmodeus (Mewzebub)
Fandoms: CSS abuse - Fandom, Chess - Fandom
13 Jul 2025
Tags
Summary
But does it play chess? While chess is hardly DOOM, there still are some constraints on actually moving things around without JavaScript (though gifbot has some ideas that might render such possible).
Don't panic! 😉
Time for some in situ RNG aikido.
I can't [yet] offer any definite way to actively play chess on AO3, and so, in lieu of such, I offer you 256 preconfigured static-display chess puzzles, one selected randomly per refresh, with random black or white to move, using only HTML and CSS, no offsite JS.
There are also some secret messages from the BBEG upon
:hoveron desktop Chrome, Firefox, Edge, Opera, and TOR [in a WIN 11 environment], or upon:touchon iPhone Safari (Android Chrome... is iffy, because Android : it has both worked and failed for me, so no guarantees). Lemme know how it is on Mac / 'nix!Part CSS extravaganza demo, and part How To for leveraging RNG for stunning results.
Series
- Part 6 of How to
-
Targeting specific AO3 work sections (not site) with CSS effects by Charles_Rockafellor, 𝖀𝓷ᶦ𝕔ⓞðə E Ⓜ️🅾️j̵͍̟̝̝̖̮̓ͭͨ̂̐̚ℹ️ (Charles_Rockafellor)
Fandoms: css - Fandom, AO3
26 Jan 2025
Tags
Summary
Want to apply CSS effects (e.g.: some background color, image, or .gif) to entire sections automatically from your work skin (without having to waste precious character count within said sections)?
Wish you could adjust the font, color, highlight, alignment, etc. of the section headers themselves? Perhaps even extend the work beyond the boundaries, covering that wasted space to the sides, and even the site page header and footer regions?
No clue where to even start? Tired of trying to find which part of the work is which from peeking at other works' work skin rules, or mucking about with trial and error?
🤣 Don't Panic. 😉
Here you'll find how to aim your work skin rules at any section of your work (or combination thereof) that you want — and yes, even how to expand those effects to outside of the work area ! (Even... comments )
I read, appreciate, and reply to all of your comments — they're always welcome! ❤️
Series
- Part 8 of How to
-
Userscript to add Series [Public] Bookmarks total count to author's stats page by 𝖀𝓷ᶦ𝕔ⓞðə E Ⓜ️🅾️j̵͍̟̝̝̖̮̓ͭͨ̂̐̚ℹ️ (Charles_Rockafellor)
Fandoms: AO3 stats - Fandom
04 Jan 2026
Tags
Summary
It's bugged me vaguely for years, though never enough that I really cared... but it hit me last night: if JS can do one thing, such as return the special kudos messages to their days of tailored glory, then it can do another, so... yeah, why not?
If you want to see your series' total number of public bookmarks in your stats page: you got it! ❤️
NB: Cf. Userscript to return tailored kudos thanks' and styled comments' visibility client-side re. CSS to return
overflowandsticky, or link for same as a userscript.Full code included.
-
Inside, Outside, Upside-down by 𝖀𝓷ᶦ𝕔ⓞðə E Ⓜ️🅾️j̵͍̟̝̝̖̮̓ͭͨ̂̐̚ℹ️ (Charles_Rockafellor)
Fandoms: AO3 CSS, css - Fandom, HTML - Fandom
23 Mar 2025
Tags
Summary
I threw this together overnight (and have tweaked it some since then). Just applying a few little CSS party tricks that I've learned or developed along the way... 😉
My tricks aren't revealed in the narration, but since this is a How To series, you should be able to ferret them out by now — and if not, then take it as your homework challenge! ❤️
Use your 1337 haX0r Wiz zen skillz.
Click for keynote
Best viewed on a COMPUTER browser with a MOUSE, not a 'phone where some effects will be missed or simply not optimized (though there are a couple of surprises that appear on iPhone [not Android] rather than desktop browsers).
⚠️
CAUTION, beware of audio from invisible video; see notes.
⚠️Cf. notes in work skin for issues w.r.t. different approaches used in this work.
Series
- Part 9 of How to
-
̶̢̡̢̨̨̢̛͓̖͈̥̯̗͉̣͍̤̱̟͚͓̠̱̤̻̝͈̗͉̰͚̣͉̜̻̙͉̜͕̪̠̪̺̹̦̦̞̼̥͈̭̜̘͍̥̪̯̘̳͚̦̩̭͉̬̲̝̲̹̥̞̯͕̠̥̯̖͙͔̺̹̹̠̪͎̰̬̗̣̹̼̞̘̦̲̠̻͎͈͙̀̎̋́̆͒̽̃̀̊͊̿̅̄́̈́̇̆̾̔͂̿̏͛́̽͆̄͒̀͗̐̂́̉̀͗͑̀͋̌͐̓̿͒̈̑̉͒̔͂̄̇̅̍͛̃̑̏͊̾͐̈̽̊̄̐͒̋̃̆́́̆́̇̈͐̈́̑͐̑̅͌͗̈́̓͘̚̕͘͜͝͠͠͠͠͠ 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.