Useful CSS code
This is a collection of some of the useful workskins I've come across while scrolling through AO3.
(Open, Moderated)
Recent works
-
Mimicking Minecraft for fics- Some Minecraft Work Skins by Ultraviollett
Fandoms: Fandom - Fandom, Minecraft (Video Game), Hermitcraft SMP, Dream SMP, Empires SMP
20 Apr 2024
Tags
Summary
Some CSS for workskins involving minecraft!
Current chapters:
-Minecraft chat text, including "[username] joined/left game" and "[username] whispers to you"
-Minecraft buttons (respawn/ quit to title)
-End poem text
-minecraft booksSeries
- Part 1 of AO3 workskins
-
Mimicking Twitch Chat for Fics- Some Twitch Chat Workskins by Ultraviollett
Fandoms: Video Blogging RPF, Fandom - Fandom, Real Person Fiction
04 Jul 2022
Tags
Summary
A CSS workskin to mimic twitch chat. I couldn't find any so I decided to create one myself!
Series
- Part 2 of AO3 workskins
-
Tags
Summary
Got a fic where characters message each other?
Series
- Part 3 of Azdaema's AO3 Messaging Skins
-
Tags
Summary
Got a fic where characters message each other?
Series
- Part 4 of Azdaema's AO3 Messaging Skins
-
How to make a fanfic header Ao3 Style inside your own fanfic by ElectricAlice
Fandoms: Archive of Our Own, Fandom - Fandom
26 Sep 2020
Tags
Summary
Live example and tutorial on how to insert a fanfic header + fic tags + summary in your fanfic. In perfect ao3 style.
If you need your own fic to go extra meta.Series
- Part 3 of CSS code scripts for Ao3
Recent bookmarks
-
Tags
Summary
Whatsapp work skin.
- Text messages, photos, videos, voice messages, links and quotes;
- Group chats;
- Header and icons;
- Scrollable. -
Tags
Summary
A little something to help people with coding for their works, notes, and summaries. No work skins are needed for any of these.
-
Tags
Summary
Twitter work skin.
- Tweets, quote-tweets, images, polls...;
- DM's, text, emojis, images, voice messages, groupchats...;
- Scrollable version. -
How to Make Honkai: Star Rail Chat Messages by html_hell (jihnari)
Fandoms: 崩坏：星穹铁道 | Honkai: Star Rail (Video Game), No Fandom
13 Jan 2025
Tags
Summary
This is a tutorial on how to mimic HSR chat messages on AO3.
-
Toggle for all caps, all lowercase, and capitalization by DoctorDizzyspinner
Fandoms: No Fandom, Ao3 meta - Fandom
22 Mar 2025
Tags
Summary
It's not a good idea to write in all caps or all lowercase. See: Use CSS Text Transform for Better Accessibility and text-transform - CSS: Cascading Style Sheets | MDN.
This provides free to use CSS for both
text-transformand a toggle for turning these styles on and off so that the reader does not have to turn off the entire workskin if they do not want to see all caps or all lowercase words.Series
- Part 3 of My Code Snippets