10 Bookmarked Items in Coding Dragon Hoard
List of Bookmarks
-
How to Make Honkai: Star Rail Chat Logs by Enllyn
Fandoms: 崩坏：星穹铁道 | Honkai: Star Rail (Video Game)
18 Dec 2023
Tags
Summary
A tutorial on how to mimic the chats in Honkai: Star Rail.
-
Bookmark Collections:
-
-
How to combine hover and transition to style your works by Goddess_of_the_arena
Fandoms: AO3 help - Fandom, No Fandom
24 Jul 2026
Tags
Summary
This guide will show you how to use the combination of hover and transition in you workskins to achieve several visual effects in your works.
CHAPTER 1: changing color, font, size of the text, zoom effect, gradient text appearing on hover, gradient background appearing on hover, blockquote style changing on hover.
CHAPTER 2: glitching text that disappears on hover, neon text, shadowed text and 3D text.
CHAPTER 3: rotating text and making emoticon and emoji appear on hover.
CHAPTER 4: rotating images, rotating text boxes, rotating text box with text and image in the same page, rotating two text boxes side by side like pages in a journal, creating the effect of turning a card with two images/two text boxes/an image and a text box.
CHAPTER 5: rotating card with a text box and a video, or with an image and a video, rotating text box with text and video in the same page.
CHAPTER 6: codes for siteskin to add to the dashboard an appearing gradient background on hover.
CHAPTER 7: using the front/back inside the tooltiptext.Series
- Part 12 of CSS GUIDES
- Part 12 of Goddess_of_the_arena's CSS Playground
-
Bookmark Collections:
-
How to create a work skin for glitch effect, mirror text, vertical text, upside down text and colored blockquote by Goddess_of_the_arena
Fandoms: HTML - Fandom, css - Fandom, AO3 help - Fandom, Work Skins - Fandom
22 May 2025
Tags
Summary
WARNING: all the codes in this guide were tested on a computer. I can't guarantee the effect when the work they are applied to is read on a mobile phone.
CHAPTER 1 is for the text with glitching effect similar to the Zalgo font, also in color, with different fonts and highlighted.
CHAPTER 2 is for the mirror effect, vertical text and upside down text, also in color, with different fonts and highlighted.
CHAPTER 3 is to create a negative mirror text effect (here in black and white) with the text side by side.
CHAPTER 4 is to give your blockquote a colored side border, top border or bottom border (also in gradient colors or using an image), a colored background (also in gradient colors) and different margin values.Series
- Part 4 of CSS GUIDES
- Part 4 of Goddess_of_the_arena's CSS Playground
- Language:
- English
- Words:
- 6,097
- Chapters:
- 4/4
- Collections:
- 1
- Comments:
- 27
- Kudos:
- 98
- Bookmarks:
- 95
- Hits:
- 3,322
-
Bookmark Collections:
-
A Beginner's Guide to HTML and CSS on AO3 by the_untamed_poet25
Fandoms: No Fandom, Fandom - Fandom, AO3, Original Work
21 Sep 2026
Tags
Summary
You've seen it. A fic formatted like a classified document. A chapter that looks like a real social media feed. An interactive game, somehow, inside an AO3 work. You clicked the kudos button. You thought: how.
This is the tutorial that answers that.
A beginner-friendly guide to HTML and CSS on AO3 — no prior coding experience required. By the end of this series, you'll know enough to write formatted fics, build your own workskins, style your entire AO3 interface, and maybe make something that makes other people stop and think how.
Series
- Part 23 of Izzy's HTML & CSS Experiments
- Part 2 of HTML/CSS AO3 Skins & Tutorials
- Language:
- English
- Words:
- 72,563
- Chapters:
- 12/?
- Collections:
- 5
- Comments:
- 323
- Kudos:
- 1,745
- Bookmarks:
- 2,628
- Hits:
- 61,224
-
Bookmark Collections:
-
Tags
Summary
This is a tutorial on how to create Twitter / X templates for AO3, includes both Tweets and profile card.
- Scalable so it's also accessible to mobile users.
- Tweets (chapter 1): text, tags, quote tweet, photo(s), replies, verified checkmark.
- Profile card (chapter 2): displays a user's profile as shown on Twitter.
- Please let me know if there are bugs and/or requests.Ao3 Twitter Template Generator now available! (Made possible by the amazing Anlanther): Now you only have to fill in your text and copy-paste the generated code!
- Language:
- English
- Words:
- 2,851
- Chapters:
- 4/5
- Collections:
- 4
- Comments:
- 219
- Kudos:
- 1,136
- Bookmarks:
- 1,136
- Hits:
- 48,833
-
Bookmark Collections:
-
Tags
Summary
This is a tutorial/live example on how to create a "Choose Your Own Adventure" fic. While this has been explained before (see here), this particular tutorial shows you how to use a work skin to hide the next parts from the reader until they click through to get to them.
Series
- Part 16 of AO3 Work Skins/Tutorials
- Language:
- English
- Words:
- 1,769
- Chapters:
- 1/1
- Collections:
- 7
- Comments:
- 79
- Kudos:
- 1,353
- Bookmarks:
- 1,189
- Hits:
- 60,748
-
Bookmark Collections:
-
User-Selectable Names in a Fanfic Work by feindcode (feind)
Fandoms: Testing, AO3 Abuse, HTML Tryhard - Fandom
06 Aug 2023
Tags
-
Bookmark Collections:
-
-
Tags
Summary
There are some great quick-and-dirty guides to HTML on A03. This is not one of them - it is a comprehensive guide
It's now 2025, a decade later. A03 supports some new HTML and and we're all walking around reading fic on supercomputers that fit in a jean pocket. It was time to update.
The previous three chapters have been divided into smaller concepts. Each tag continues to have - at a minimum - a link to the w3schools page about it (so you can learn more), a code example, and the result of the code example. Most tags have their attributes, things like [src] or [title], listed and examples of how using the attributes modify the tags.
There's a chapter on Bad Ideas, including how some of the archive's default CSS is available to you to format your work (users can't turn that off by hiding a workskin!)
Oh. And I added a bunny army. You could learn how to add one too.
/)/) /)/) /)/) (..) (..) (..) *( ) *( ) *( )
Series
- Part 19 of AO3 Work Skins/Tutorials
- Language:
- English
- Words:
- 28,122
- Chapters:
- 15/15
- Collections:
- 8
- Comments:
- 1,403
- Kudos:
- 7,336
- Bookmarks:
- 8,773
- Hits:
- 448,664
-
Bookmark Collections:
-
Tags
Summary
This is a personal experiment with HTML. It is a very limited list with what I find useful (2018).
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 and interests.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
Part Eleven: Newspaper Article
Part Twelve: Content Notes and Spoiler (with opacity and hover translations)
Part Thirteen: Playground for Jinx (glitch text, color, table)
Part Fourteen: Text generator
Part Fifteen: Boxes (still in progress)
Part Sixteen: Vertical Text
Part Seventeen: Drop-Down Transition Delay (NEW & reformed)
Part Eighteen: Automated Animation (NEWEST and No. 2 added)- Language:
- English
- Words:
- 15,861
- Chapters:
- 21/?
- Collections:
- 7
- Comments:
- 229
- Kudos:
- 1,122
- Bookmarks:
- 1,030
- Hits:
- 42,660
-
Bookmark Collections:
-
How to Make Simple Text Effects with Work Skins by cool_oniichan
Fandoms: 괴담에 떨어져도 출근을 해야 하는구나 - 백덕수 | Even If I Fall Into a Ghost Story I Still Have to Go to Work - Baek Deoksoo
02 Sep 2026
Tags
Summary
Contains a work skin and its usage guide to make text styling similar to the novel. Includes: text colors, background colors, colored strikethroughs, text sizing, text shadows, overlapping texts, and making text boxes.
-
Bookmark Collections:
-