HTML & CSS stuffs
A collection of useful Ao3 posts for CSS and HTML
(Open, Unmoderated)
Recent works
-
Tags
Summary
Popup tooltips that work well on both desktop (hover) and mobile (tap open and close). Constrained width, so best for short tooltips or translations for a couple words at the most.
Series
- Part 1 of Simbeline's Work Skins
-
RNG in site skins by 𝖀𝓷ᶦ𝕔ⓞðə E Ⓜ️🅾️j̵͍̟̝̝̖̮̓ͭͨ̂̐̚ℹ️ (Charles_Rockafellor)
Fandoms: css - Fandom, HTML - Fandom
07 Nov 2025
Tags
Summary
〽 ♪ ♫
Do you want to build a site skin...?
Come on, let's go RNG !
♫ ♪1950s TV announcer voice cuts in:
Is that you whom I see, staring wistfully at flashy websites with eye-bleeding '90s randomization, never knowing what the next site in the webring might bring? Or how about you — yes, you, right there, reading this — do you yearn to expand the limitations of work skin RNG past the 500K char count, and you're not sure of where to turn?
Well, do I have a deal for YOU!Yes, my friends, you, too, can have the random surprise package of your dreams, with this handy-dandy never-before-seen unlimited time offer of one RNG Site Skin introductory proof of concept for the low, low, low price of a kudos and a comment (not that I'd complain about shares, subs, and bookmarks 😉)!
How whoa can you go?
* Reader participation required.
Bonus: Target n-tuple works with totally different rules from one single skin.
Cautionary tale: not 8 new RNG sources in DOM, only page source!
-
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.
-
Tags
Summary
This is a personal experiment with HTML. It is a very limited list with what I find useful.
Update: Somehow I find more and more stuff useful, so this list is not that limited (and not that private) anymore. I'll improve it with time and according to my needs. I just realized, this will never be "complete" and there is no final number of chapters.So far that's posted:
Part One: Basics
Part Two: Lines
Part Three: Footnotes and Links
Part Four: Columns and Skins
Part Five: Pictures
Part Six: Videos (and gifs)
Part Seven: Choose Your Own Adventure
Part Eight: Chapter Title
Part Nine: The Title, the Username, and Links
Part Ten: Kudos Message (NEW)
Part Eleven: Newspaper Article
Part Twelve: Content Notes and Spoiler (NEW: Opacity)
Part Thirteen: Playground for Jinx (glitch text, color, table)
Part Fourteen: Text generator
Part Fifteen: Boxes (still in progress)
Part Sixteen: Vertical Text (NEWEST) -
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
Recent bookmarks
-
Epistolary workskin by irrationalpie for Stratisphyre
Fandoms: No Fandom, 陈情令 | The Untamed (TV)
24 Apr 2025
Tags
Summary
A simple workskin and tutorial for including letters in a fic (with a mini fic to demonstrate!).
This workskin merges with the reader's site skin rather than overriding the text or background color (tested with both default/light mode and reversi/dark mode).
-
Summary
We ride at dawn, to fight the programming errors on our screens and to tear our hair out and cry the long suffering cry.
- Words:
- 8,498
- Works:
- 4
- Bookmarks:
- 16
-
Tags
Summary
A tutorial + live example on how to add Gmail-esque emails into your fic using CSS and HTML.
Series
- Part 3 of Cool Coding Kumquats
-
Mimicking Twitter Posts for Fics - Some Twitter Workskins by Ultraviollett
Fandoms: Fandom - Fandom, Real Person Fiction
20 Apr 2024
Tags
Summary
A repository of a twitter skin I made for Ao3, so you can add your characters tweeting at eachother inside your fic. Friendly towards different siteskins, disabled workskins, screenreaders and mobile readers.
This is mainly a demo, not a tutorial. I am currently planning to create a generator for this workskin on this site.
Series
- Part 4 of AO3 workskins
-
Css in Testing: Second in the Series by InfinitysWraith
Fandoms: Ao3-Skins, Work-Skins, css - Fandom
22 Aug 2023
Tags
Summary
𝔚𝔢𝔩𝔠𝔬𝔪𝔢 𝔱𝔬 𝔭𝔞𝔯𝔱 𝔱𝔴𝔬 𝔬𝔣 𝔴𝔥𝔞𝔱 𝔦𝔰 𝔫𝔬𝔴 𝔞𝔭𝔭𝔞𝔯𝔢𝔫𝔱𝔩𝔶 𝔞 𝔰𝔢𝔯𝔦𝔢𝔰 𝔟𝔢𝔠𝔞𝔲𝔰𝔢 ℑ 𝔟𝔯𝔬𝔨𝔢 𝔰𝔬𝔪𝔢𝔱𝔥𝔦𝔫𝔤 𝔦𝔫 𝔪𝔶 𝔩𝔞𝔰𝔱 𝔚𝔬𝔯𝔨 𝔖𝔨𝔦𝔫 𝔞𝔫𝔡 𝔠𝔞𝔫'𝔱 𝔞𝔡𝔡 𝔞𝔫𝔶𝔱𝔥𝔦𝔫𝔤 𝔪𝔬𝔯𝔢 𝔱𝔬 𝔦𝔱 :)
𝔜𝔬𝔲'𝔯𝔢 𝔴𝔢𝔩𝔠𝔬𝔪𝔢 𝔱𝔬 𝔞𝔰𝔨 𝔮𝔲𝔢𝔰𝔱𝔦𝔬𝔫𝔰, 𝔰𝔱𝔢𝔞𝔩 𝔠𝔬𝔡𝔢 𝔬𝔯 𝔬𝔣𝔣𝔢𝔯 𝔪𝔢 𝔦𝔫𝔰𝔭𝔦𝔯𝔞𝔱𝔦𝔬𝔫. 𝔍𝔲𝔰𝔱 𝔡𝔬𝔫'𝔱 𝔱𝔞𝔨𝔢 𝔪𝔶 𝔞𝔯𝔱𝔴𝔬𝔯𝔨 𝔴𝔦𝔱𝔥𝔬𝔲𝔱 𝔞𝔱 𝔩𝔢𝔞𝔰𝔱 𝔩𝔦𝔫𝔨𝔦𝔫𝔤 𝔪𝔢 𝔶𝔬𝔲𝔯 𝔣𝔦𝔠 ;)
ℑ𝔣 𝔶𝔬𝔲 𝔥𝔞𝔳𝔢𝔫'𝔱 𝔞𝔩𝔯𝔢𝔞𝔡𝔶, 𝔱𝔞𝔨𝔢 𝔞 𝔩𝔬𝔬𝔨 𝔞𝔱 𝓟𝓪𝓻𝓽 𝓞𝓷𝓮 𝔣𝔬𝔯 𝔪𝔬𝔯𝔢 𝔭𝔯𝔬𝔧𝔢𝔠𝔱𝔰.
Click me!
Ao3 done unleashed a monster right here and it's goddamn beautiful.
Series
- Part 2 of CSS in Testing