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
-
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
-
How to make and fix a series on AO3 by Charles_Rockafellor, 𝖀𝓷ᶦ𝕔ⓞðə E Ⓜ️🅾️j̵͍̟̝̝̖̮̓ͭͨ̂̐̚ℹ️ (Charles_Rockafellor)
Fandoms: AO3 help - Fandom
23 May 2021
Tags
Summary
🙂 Don't panic. 🙂
This takes you through an easy step-by-step process so that you'll have as many series as you wish in no time — and yes, you can even weave multiple series together, and rearrange their order.
Bonus on how to search for a series (and other search tips and details).
Did your series glitch out on Next Work →, or give you two fics with the same part number and zero of the one before, and now it's freakin' tutti sciancato? Work with me here: we can fix this, we have the technology (cue music from Six Million Dollar Man).
Did your series disappear from the page that shows all of your different series? 〽 ♪ ♫ I think that I know why... ♫ ♪
(Bonus section on indenting [CSS work skin] and different-width spaces [HTML], and screen reader problems with lists and symbols, and styling list items' bullet point markers, and empty row glitches.)
I read, appreciate, and reply to all of your comments — they're always welcome!
𝑫𝒐𝒏'𝒕 𝒇𝒐𝒓𝒈𝒆𝒕 𝒕𝒐 𝑳𝒊𝒌𝒆, 𝑺𝒉𝒂𝒓𝒆, 𝒂𝒏𝒅 𝑺𝒖𝒃𝒔𝒄𝒓𝒊𝒃𝒆! ❤️
Series
- Part 2 of How to
-
Acronyms, sōreîtai, Superman and such, sew it now seams by 𝖀𝓷ᶦ𝕔ⓞðə E Ⓜ️🅾️j̵͍̟̝̝̖̮̓ͭͨ̂̐̚ℹ️ (Charles_Rockafellor)
Fandoms: Superman (Comics)
15 Feb 2026
Tags
Summary
Riddle me this:
The Riddler has left a set of clues to follow, and Batman is fighting other crime.
There's a hit piece on Superman in today's Daily Planet, by authors unknown. What sort of people could possibly have written it? It's up to you to find and sew together the seaming/seeming clues of this wild goose chase — and to watch out for red herrings!
Of course, if you get tired of syllogistic logic, then you could just... rebus alone! 😉 🤣
-
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
-
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