That coding thing
.jpeg)
A collection of html and css guides to put all the tutorials I've found in one space
(Closed, Unmoderated, Unrevealed)
Random bookmarks
-
Tags
Summary
A Quick Guide to Making Translations Accessible on AO3
-
How to create a work skin to have different fonts and colors in your works by Goddess_of_the_arena
Fandoms: css - Fandom, HTML - Fandom, Work Skins - Fandom, AO3 help - Fandom
30 May 2024
Tags
Summary
This is a tutorial on how to use different fonts on Ao3, how to make them in different sizes and how to make them colored as well.
It also contains two ready-to-use codes to give your fonts a gradient effect. There are both the code for the linear gradient effect and the code for the radial gradient effect.
CHAPTER 2 contains the visual examples of every font that you find in chapter 1.
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.Series
- Part 2 of CSS GUIDES
- Part 2 of Goddess_of_the_arena's CSS Playground
- Language:
- English
- Words:
- 3,249
- Chapters:
- 2/2
- Collections:
- 1
- Comments:
- 33
- Kudos:
- 237
- Bookmarks:
- 213
- Hits:
- 10,376
Bookmarked by 0dotexe
03 Jan 2025
Bookmarker's Collections:
Bookmarker's Notes
Incredible resource for figuring out how to push the limits of AO3's text editing. Will be messing about with this in the future.
-
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
-
How to create a work skin to add underline and create line dividers by Goddess_of_the_arena
Fandoms: css - Fandom, HTML - Fandom, AO3 help - Fandom, Work Skins - Fandom
02 Sep 2024
Tags
Summary
This tutorial contains the steps and ready to use codes to add underline to your text and create text dividers.
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 underline, also mixing colored text with colored underline and in gradient colors.
CHAPTER 2 is for line dividers, also in gradient colors, with emoticon/emoji and with colored emoticons and neon effect emoticon/emoji.Series
- Part 5 of CSS GUIDES
- Part 5 of Goddess_of_the_arena's CSS Playground
-
Tags
Summary
Work Skin for Disco Elysium-style conversations that require minimal style adjustments.