Actions

Work Header

Rating:
Archive Warning:
Fandom:
Additional Tags:
Language:
English
Stats:
Published:
2026-05-13
Updated:
2026-06-12
Words:
7,084
Chapters:
10/?
Comments:
10
Kudos:
11
Bookmarks:
15
Hits:
190

Work Skins Guide and Example Collection

Summary:

This is a systematic tutorial designed to help fan creators with no coding background learn how to use and create work skins, with an additional collection of examples.

In Part 1, I briefly introduce how work skins are used and explain some HTML and CSS code in detail, so you can read it and know how to modify work skin styles shared by other people.

In Part 2, I talk about how to write code in a proper code editor and apply it to your fanworks.

In Part 3, I will include some adapted code and some code I wrote myself, along with full HTML and CSS formats for anyone who wants to copy and modify them.

Clicking a link will take you directly to the relevant chapter. If there is no link, it means I have not written that chapter yet.

This article will never really be finished, because there is simply too much code out there. At least I have finished the main body of Part 1, and I hope it helps you explore work skins more confidently. I may rearrange the chapter order at any time.

Chapter 1: Contents

Chapter Text

 

 


hover me
hello






While writing fanfiction, I suddenly wanted to add some visual effects, so I started experimenting with work skins. Then I thought: since I am already learning this stuff, I might as well write it down. That is how this work came to exist.

Before you start, make sure the button in the top right of your page says Hide Creator's Style rather than Show Creator's Style. Otherwise, you will not see any effects at all, only plain text.

This guide mainly talks about CSS. I only touch on limited HTML knowledge related to CSS. If you want to learn more about HTML itself, please check the recommended reading listed in Part 1.

One more note: I am not a coding expert, just a hobbyist who is still learning. If I get something wrong, or if anything is unclear, feel free to correct me or ask questions.

All code in this work is licensed under the MIT License, allowing you to freely use, modify, and distribute i. All included third-party snippets respect their original licenses (primarily MIT) and are properly attributed.

Please retain the original author's credit and source link when using this code. Giving credit where it's due is a small but meaningful way to support the developer community.

2026.5.20 Update: I will not be updating Part 1 or Part 2 over the next month. I am too busy right now: I have a lot of course papers to write, their deadlines are coming up, and then there are the brutal final exams I need to study for. I also have another fanfic that is already more than half written, and honestly I feel a little guilty working on code before I finish it. I may still occasionally post a few pieces of code that I rewrote or wrote myself in Part 3. See you all in the summer!

Contents

Part 1: Reading Basic Code

The Simplest Way to Use a Work Skin

An Overview of HTML, CSS, and Work Skins

Reading CSS and HTML

Embedding Images, Audio, and Video Media and Styling Them

Links, Redirects, and Practical Applications

References and Recommended Reading

License


Part 2: Guide to Writing Code

Introduction to Code Editors

The Full Structure of HTML and CSS

How to Add Effects to Text

How to Make Cards or Buttons

How to Add Hover Effects

Using GIFs and Hover to Add Motion to Your Work

How to Draw with CSS

Using Limited HTML in Comments and Profiles

Using CSS to Decorate Your Title, Summary, Notes, and Kudos

Sharing your code


Part 3: Example Collection

Codecard

Button

Keyboard

Musicplayer

PowerShell 7 Style Page