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
-
Hunt the Wumpus by Charles_Rockafellor
Fandoms: Interactive Fiction | IF, Hunt the Wumpus (Interactive Fiction | IF)
20 Oct 2025
Tags
Summary
Playable game with RNG (Random Number Generator) driven random events!
If you don't remember this game, think back to things like Zork (or, as a poor simile, something remotely like Sir-Tech's Wizardry series in atmosphere [this version of Wumpus being far less graphics-intensive]).
Armed with vorpal arrows and bearing lid-bags of wumpusnip and wumpuspurge of dubious effectiveness in hope of alternately luring and warding away the evil monster, will you take up the gantlet?
Who says that CSS is 𝖍ard?
(NB for TTS screen readers: that last word was “hard”, not “ard”, but I cheated with an “h” from an unusual Unicode range instead of CSS, so that it would remain visually odd in the Summary... and found that my testing-purpose [and sometimes laziness] freebie TTS browser extension can't read it... because of course.)NB 1: HTML-structural redundancy bloated the word and chapter counts; ~15K actual words (~4K vis. by RNG) and 20 caves!
NB 2: More PG than G, about as graphic as Oregon Trail, but I'm not sure if that's enough to rate as Teen.
-
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
-
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
-
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
-
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