Actions

Work Header

you can make beautiful things: Exploring CSS Art on AO3 (Appa's version)

Summary:

CSS art of Appa from Avatar the Last Airbender made specifically within AO3 limited HTML restrictions. (Now with three versions!)

Free mini essay about my experience with making CSS art on AO3 inside!

Notes:

keep creator style on :)

(See the end of the work for more notes.)

Work Text:

Selected travel time: Night Day Sunset

Select travel time:

Day Night
Sunset Night

When I first encountered AI art in person, it was at a Dungeons & Dragons game. The Dungeon Master (DM) assigned us character sheets along with character art made from AI Discord Bot.

There’s something sad about looking at an image spat out by a bot with wonky fingers and hands all while knowing that there were extremely talented artists at that table with us. A table filled with incredible storytellers, artists, and roleplayers – only for us to be given preassigned AI art.

The DM works in IT – so when we asked them why they would use AI instead of asking someone from the table who would have made art if they really wanted it, their defence was that they’re a tech person, not an artist.

I don’t think being a tech person and an artist is mutually exclusive.

The above images of Appa flying were created entirely out of HTML and CSS within the limited HTML parameters set by AO3.

It contains 43 lines of HTML and about 606 lines in CSS (I know that CCS lines isn’t a good measure, sue me). It took me a few hours to make. This is not my first dive into CSS art.

(My first dive into CSS art was basically a glorified stickman.)(It will never see the light of AO3.)

The HTML on AO3 has a ton of restrictions – there are so many things you cannot do. On the flipside, there are so many ways to work around with the things you can do.

There are HTML works on AO3 that make text fics look like actual texts, where you can snoop through a character’s phone , a gender pronouns toggle for the main character in video game fics, a work that totally doesn’t explode (I promise)(I’m also a strong believer in trickery) – I mean you can even play a knockoff Pokémon game. There’s something so rewarding about creating interesting things in a restrictive format. It's just a constant exploration on how you can break the mold and make something cool.

In Kermit The Frog’s TedTalk (yes he gave a TedTalk), two things really stuck out to me – what it means to be creative and the importance of a creative community.

If you’re on AO3, I bet that you engage (or would like to engage) in some kind of conventional creative outlet – painting, writing, playing music, etc. However, not everyone can be in the creative industry by trade – at the end of the day, you still have bills to pay.

Being creative doesn’t mean that you have to pick up a brush or learn how to sing and dance. Sometimes being creative is figuring out how best to plan a project at work or learning a new skill.

That’s where I feel fandom comes in.

Fandom is both an opportunity and a community. It gives you a chance to do the creative things that you might not be able to do in your day to day life while also giving you a chance to connect with other people.

I started my coding journey around August last year specifically so I could make text fics look like actual texts. It didn’t feel like enough to just tell a story, I wanted to shape it. I came in with 0 knowledge – I just wanted to tell stories in visually appealing ways and unironically, AO3 is a great platform to test it out.

Yes, people say that you should “create for yourself”, but I would argue that creativity is not meant to exist in a vacuum. Reach out to other creatives in your fandom or community. Go leave comments on fics you’ve read. Go connect and learn from each other. I can confirm that brainstorming together is better than brainstorming alone.

But since I’ve learned to code and started posting HTML Tryhard works on AO3, I’ve had several people suggest or recommend that I use AI instead.

After all, wouldn’t it be easier if people could just prompt an AI to generate a workskin to use? Why write text fics when there’s an AI that makes fake tweets from your favourite characters? Why learn to code at all for something as trivial as fanfiction?

For that, I look at Avatar the Last Airbender. It has always been a masterclass in artstyle and storytelling. Each frame is carved with the love, skill, and time of the team behind the show. It was one of the few pieces of media I had growing up that made me feel seen, like someone heard me.

The story was never afraid to show people that love can come in all forms, from anyone. That we could all be a little kinder in our everyday lives.

The show taught me that learning a new skill isn’t easy, even if your body and soul were literally made for it. It showed that you can give it your all and there was always going to be someone better than you.

It was not afraid to tell you that yes, you have made mistakes, in fact – you will continue to make mistakes. You’re going to try so hard and you will still fail. It is up to you to find the correct path for your own journey, but you have to keep trying. The day you stop trying is the day you have lost your way.

The show was never afraid to be beautiful while telling stories.

I don’t fault people for thinking AI is an easy way out of a problem. The world surely has been pushing that idea down everyone’s necks. It’s not easy to learn to code – let alone learning to code within AO3’s parameters.

But fanworks are a labour of love – using AI to make “art” isn’t labour and AI isn’t able to make anything with love.

I fully believe that if you wanted to, you can learn how to code art for AO3 reasons. In fact, here are some links to get you started:

You are going to make mistakes and AO3 might spit out error codes at you. You are going to forget to close your div and suddenly your whole fic is multicolour. AO3 will add random empty divs and ps into your work. Don’t let that stop you.

I believe that you can make beautiful things – even if it's just for fanfiction or other fanworks. You just have to keep trying.

Notes:

woah that was a word dump yike, i am a certified yapper

i'm also on tumblr.Sometimes I post CSS art that won't make it to AO3 and other HTML shenanigans.

If you like HTML works or want to see what works, you can check out my HTML works or other works on the HTML Tryhard tag (one day,,, one day we will get our own official ao3 tag so i can filter the works,,, please ao3 gods,,, im askin real nicely).

yip yip,
mack 🧚

Series this work belongs to: