#button html tutorial
Explore tagged Tumblr posts
Text
Dark Neumorphism Button UI
#codenewbies#html css#html5 css3#frontenddevelopment#webdesign#dark neumorphism ui#neumorphism button css#pure css effects#css#code#html css tutorial#css snippets
5 notes
·
View notes
Text

CSS Neon Buttons
#css neon buttons#html css buttons#css buttons#css animation tutorial#html css#divinector#css#html#css3#learn to code#frontenddevelopment#css animation examples#css animation snippets#neon effect css
2 notes
·
View notes
Text

CSS Button Hover Animation
#css button hover animation#html css buttons#css buttons#html css#css#html#learn to code#css3#frontend#code#css animation#css animation examples#css animation snippets#css animation tutorial#frontenddevelopment
2 notes
·
View notes
Text
Just watched a video on open source and sharing your knowledge when possible so I wanted to reblog this to boost it again! Please please please make ur own website it would make Cursor very happy
A short beginner's guide to HTML! You can get this as a zine on my ko-fi and itch.io!
Forgot to put how to add a link, but you do it <a href="[link]"> like this! </a>
795 notes
·
View notes
Text
youtube
Learn how to add an email link in WordPress with this easy step-by-step guide. Increase communication with your audience by making it easy for them to reach out to you via email.
#how to add email link in wordpress#call with phone link#call on smartphone button#add a call button#call button html code#click to call with button#elementor add phone number#elementor phone number#elementor#elementor tutorial#make phone number clickable in wordpress#phone number clickable wordpress#Youtube
1 note
·
View note
Text
Interactive Toggle Button with HTML & CSS 🔥✨
youtube
#toggle button#htmlcss#toggle button css#toggle switch#switcher#switch#toggle button html css#webdesign#webdevelopment#tutorials#youtube#website#programmer#coding#code#how to code#how to#Youtube
0 notes
Text
A Brief Guide on Uploading ChoiceScript Demos to Itch.io
Since Dashingdon is shutting down, and there will be a lot of folks wanting to host their ChoiceScript demos elsewhere, I thought it'd be a good idea to provide a brief guide on how to do so for itch.io.
This is for Windows in the folder actions, but it shouldn't be too difficult for folks to translate for Mac. This also assumes you haven't changed any of the files within your game folder other than those found under 'scenes'.
Within your game folder, locate the 'web' subfolder, right click it and select 'Send to' then 'Compressed (zipped) folder. Name your newly compressed file something sensible, and I recommend moving it to a new folder outside of your game files, just to keep everything neat and tidy.
2. Assuming you already have an itch.io account, navigate to your dashboard, and click the 'Create New Project' button.
3. Name your project as you like, and under 'Kind of project', select the 'HTML' option.
4. Set the 'Pricing' to 'No Payments', you cannot use ChoiceScript for profit unless it is with the Choice of Games or Hosted Games publishing labels. No one wants to get in trouble unnecessarily here.
5. In the Uploads section, upload your newly zipped file we made in step one. After it's finished uploading, you'll be given one drop down and two tick boxes. You need to tick the 'This file will be played in the browser' option.
6. I've found so far that 'Viewport dimensions' work quite well for desktop at 1080 x 640. Either use these numbers or experiment and find what works best for you.
7. You must tick the 'Enable scrollbars' option for your game to display properly, otherwise options, text and buttons can be clipped off the bottom of the viewport.
8. Continue filling out the rest of the form, or skip it for now and scroll all the way to the bottom to the 'Visibility & access' section. Here make sure you have 'Draft' selected. This prevents others from finding your game until you're ready, and I always recommend play testing things before you make your work public.
9. Finally, hit the 'Save' button, then go and have a look at your creation by hitting the 'View page' link. And there you go! When you're ready for public release, just change the option in section 8 to 'Public'.
---
A few things to bear in mind about hosting on itch.io:
There isn't currently any way for your readers to save their game. I'm sure someone could write in a plugin similar to Dashingdon's at some point, but as for right now, this isn't available. See addition/edit below.
Make sure you properly tag your game with the 'choicescript' and 'interactive-fiction' tags. There are an awful lot of games on itch.io and it's easy to get lost in the crowd. Make sure folks can find you by having the right tags.
I hope this brief guide was useful to folks.
Best of luck to you with your writing!
---
Addition/Edit:
Thanks to @hpowellsmith for bringing this to my attention. You can add save functionality to your game by using this addon:
The ChoiceScript Save Plugin
Just tried it out on my own game and it works perfectly.
Rather than run through the addon author's own tutorial here, I'll just forward you to the Readme on their Github page.
One small note I would add is when it asks you to make the two small additions to your index file, make sure you right click the file and open it with your coding program, don't double-click it as this will just open it in an internet browser, and it won't give you the access to what you need to change.
715 notes
·
View notes
Text
========================================================
[tutorial: build your own neocities/nekoweb page]
========================================================
a beginner's guide for making your very own home on the indie web—retro, personal, weird, and 100% yours.
this ain’t an average wix, squarespace, or tiktok aesthetic.
we’re talking full html/css with soul and attitude.
[ prerequisites ]
------------------
> an idea
> basic text editor (vscode, notepad++, or even notepad)
> account on https://neocities.org or https://nekoweb.org
> some gifs or tiles you love (dig deep or make your own)
> optional: image host or gif repo (or self-host everything)
[ feeling overwhelmed? read this. ]
-----------------------------------
you do *not* need to know everything.
html is not a mountain. it's a garden.
you plant one tag. then another. then a style. then a button.
you can build your site piece by piece.
and every piece is a portal to somewhere personal.
you are allowed to make broken pages.
you are allowed to use templates.
you are allowed to start over as many times as you want.
this is *your* world. you control the weird.
[ step 1: create an account ]
-----------------------------
> neocities: https://neocities.org
> nekoweb: https://nekoweb.org
register a name, log in, and enter your file manager.
this is where you upload your files and see your site live.
[ step 2: your first file - index.html ]
----------------------------------------
make a new file: `index.html`
basic starter:
<html>
<head>
<title>my weird little corner</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>welcome to the void</h1>
<p>this is my page. it’s strange. like me.</p>
<img src="mygif.gif">
</body>
</html>
> upload to the dashboard
> boom. you’re live at
https://yoursite.neocities.org
or https://nekoweb.org/u/yoursite
[ step 3: add a style sheet - style.css ]
-----------------------------------------
create a file called `style.css` and upload it.
here’s some nostalgic magic:
body {
background: url('tile.gif');
color: lime;
font-family: "Courier New", monospace;
text-shadow: 1px 1px 0 black;
}
img {
image-rendering: pixelated;
}
marquee {
font-size: 20px;
color: magenta;
}
link it in your html and the vibes activate.
[ step 4: decorate it like a haunted usb ]
------------------------------------------
> use <marquee> for chaos scrolls
> embed gifs from https://gifcities.org/
> steal buttons from https://cyber.dabamos.de/88x31/
> set up a guestbook at https://www.smartgb.com/
> loop audio with <audio autoplay loop>
> add fake errors, 90s web lore, random link lists
[ step 5: resources, themes, and comfort ]
------------------------------------------
> templates & layouts: https://numbpilled-themes.tumblr.com
> glitchy gifs & buttons: https://glitchcat.neocities.org/resources
> layout builder: https://sadgrl.online/projects/layout-builder/
> free tiled backgrounds: https://backgrounds.neocities.org/
> beginner html intro: https://www.w3schools.com/html/
> pixel fonts & cyber assets: https://fontstruct.com/
remember:
you don't need to know js. you don't need to be a coder.
you just need a mood, a direction, a dream.
the html will follow.
[ bonus concept: shrine pages ]
-------------------------------
> a page just for one character you love
> a room to house digital fragments of your identity
> embed quotes, music, images like altars
> call it shrine.html and link it from your homepage
[ closing mantra ]
------------------
you are not here to be optimized.
you are not a brand.
you are a ghost inside the machine,
carving your initials into the silicon void.
welcome to Your website.
========================================================
#webcore#old web graphics#neocities#web graphics#carrd graphics#carrd resources#rentry decor#rentry graphics#carrd moodboard#carrd inspo#neopets#indie#indie web#early web#webdevelopment#web development#web resources#web design#old internet#old web#oldweb#nekoweb#transparent gif#tiny pixels#pixel gif#moodboard#tutorial#html page#html theme#htmlcoding
432 notes
·
View notes
Text

CSS Button Animation
#css button border animation#css buttons#codenewbies#html css#html5 css3#frontenddevelopment#css#css animation examples#pure css animation#css animation tutorial#code#css tricks#css snippets#html5#frontend
3 notes
·
View notes
Text

Social Media Icon Hover
#social media icon hover#css animation examples#html css#css#frontenddevelopment#html#css3#divinectorweb#animated social media buttons#html css animation#code#css animation tutorial
0 notes
Text

CSS Gradient Button Animation
#CSS Gradient Button Animation#css gradient#css animation examples#css animation tutorial#css animation snippets#html css#css#frontend#css buttons#neduzone
1 note
·
View note
Text
GRADIENT TEXT TUTORIAL
HOW TO GET OMBRÉ STYLED TEXT ON TUMBLR
𝜗℘ I got a request on TikTok asking to do a tutorial on gradient text — tumblr doesn’t have an in-app option on doing gradient texts. This is how.
𝜗℘ Sites you can use: image color picker / stuffbydavid (gradient text).
𝜗℘ People say that you have to use a computer for this, which isn’t true. I am able to make gradient text on my phone, but you can use a computer if you want.
color picking from an image is optional, but highly recommended.



one: put the text you want to color for your tumblr post.
two: change the color of the text to whatever color you want. there are several options on how you want it. pick whatever option you want. the text will automatically generate for you.

three: copy the entire code then press “copy”.
four: go over to tumblr (website, not the app) and click “edit post” (the pencil) or create a new post.
five: click the settings button and change it from “rich text” to “HTML.”
six: paste the code from the gradient text website in the HTML where you want it to go. (I paste it then just save the post to my drafts then edit the text on the app)
#jasper’s tutorials#tutorial#gradient text#ombré text#text#tumblr text#text post#colored text#text tutorial#tumblr blog#tumblr tutorial
426 notes
·
View notes
Text
!!! my tag system is below all of this,,, I moved it under a cut because people reblog this post for the links :P
edit: thx for the love on this post. im going to try and continually update this!
⇩ ⠀sites FULL of web graphics ⇩
blinkie maker : make your own blinkies!
DOLLZ REVIVAL : a revival of pixel dolls where you can create and share your own. very cute!
GlowTxt : create glowing transparent text gifs that say whatever u want
HOARDER'S PILE : contains blinkies, buttons, stamps, and teddies
plasticdino.neocities.org : blinkies
Glitter Graphics : contains gifs, blinkies, dividers, and just sooo many web graphics
Cute Kawaii Resources : contains gifs, blinkies, stamps, favicons, dividers, buttons, fonts, literally everything you need. its an insane resource
Adrian's blinkie collection : collection of blinkies, stamps, and buttons
☆ (supplies.ju.mp) : blinkies, stamps, buttons, & favicons
twigbranch.carrd.co : blinkies
lallys.carrd.co : blinkies, stamps, dividers, and other resources
Bugleeblinkie.carrd.co : blinkies, and 3 very special gifs at the end ;)
unshinesblinkies.carrd.co : blinkies
The 88x31 GIF Collection : buttons. there are 5 parts! huge collection!
Bonnibel's Graphic Collection : blinkies
WELCOME TO GIFCITY : blinkies, dividers, favicons, stamps
cass-tastrophe.carrd.co : blinkies, stamps
kotatsuOS : blinkies
Cute web graphics : blinkies, stamps, dividers, and a LOT of other graphics, all very cute
⇩ some html tools! + tags below cut ⇩
MDN (mozilla.org) : if you're just starting out like me this is super helpful HTML Tutorial (w3schools.com): same here! (offers other programming languages as well!) Accessibility Checker(Free Scan) : a site you can use to check accessibility/ADA compliance when making your website! it will point out what needs to be changed. it is free, but they also offer paid services if you need more help imagecolorpicker.com : hex code picker. i use this one because you can upload an image, paste clipboard, OR type in the website and it'll grab a screenshot for you! something simple that was made really well. cssgradient.io : helps you make css gradients for backgrounds or whatever else you need them for smartgb.com : a free guestbook service FC2 Counter! : free "site visits" and "online now" counters. fully customizable Unclosed Tag Checker by Alicia Ramirez : does as it says, checks for unclosed tags (although I recommend using a program that does this as you write anyways. I use Visual Studio Code. Status Cafe : an updateable and embeddable status that you can stick anywhere on your site! it is mostly customizable with CSS but I have noticed a few small quirks with it
my tagging system :))
#graphics
#blinkies
#stamps
#buttons
#dividers
#html/css
#resources
#code
e10's web (neocities.org) <- shameless site plug. show it some love :P
#blinkies#stamps#favicons#gifs#old web graphics#old web aesthetic#old web stamps#old internet#old web#old webcore#2000s web#90s web#html#html css#html5#css#htmlcoding#web design#web resources#early web#early internet#neocities graphics#neocities#geocities#gifcities#web graphics#webcore
541 notes
·
View notes
Text
Needle Lace Resources
This is a very long post, so I'm including a cut.
Tutorial-like Things, Others' Work
An overview of the stages of needle lace (specifically learning from Alençon, I believe. They link to a documentary type of video on Alençon lace): https://www.taixtile.com/needle-lace-first-steps/. This blog has links to other resources (one link is broken, if I recall correctly).
A very approachable first project, I think. From a lace maker who has done very cool illustrations with lace, Maggie Hensel-Brown: https://youtu.be/OLuRpJ96p4Q?si=gqBWqYxa755gFozr
This channel has videos of the stages of needle lace making. They specifically demonstrate Irish lace, I believe. But the stages are very similar to or the same as the stages in Alençon lace. https://youtu.be/dZVagIFCnLc?si=d8lRnPsmz5iTM0Z_
Pierre Fouché has a video about making dense filling stitches and even doing short rows to makes curves (something I tried but did not yet succeed at): https://youtu.be/DK5cMQND3b8?si=qySmT9yaoTcpsUV9 He also does really cool bobbin lace illustrations by constructing patterns in cell-like units.
An embroiderer tries needle lace in two videos. In one of them she tries different styles from different places: https://youtu.be/eTO7dA4oyl4?si=VInx35kql115bIIo https://www.youtube.com/watch?v=A9Wa6-Qf5xw
Example of a different style of needle lace. Unsure what it is exactly. Some sort of cut work or reticella, idk: https://youtube.com/shorts/7DFogWC3tDI?si=uju74sPFbRj3_wrn
Sampler directions: https://youtu.be/oDKBfjDYBnU?si=shQYvaT4kAZD7BgV
Again, a more geometric style of needle lace. I don’t know the particulars of this style (styles?), since I’ve mostly been looking into styles similar to Alençon because I’m aiming for more illustration-like lace. This channel has multiple videos demoing and explaining that process: https://youtu.be/gJd6mkrsUCQ?si=AfVIiwljHvfismrX https://www.youtube.com/watch?v=R6dk721UwW4
Not so much instructions but video of a very skilled lacemaker working on a project: https://youtu.be/01H2GdEXLrs?si=2suFHSG4Kwa6Yl2m
Another lacemaker's work on their blog. I don’t know if they do as much lace making as they do other needle arts https://www.robesdecoeur.com/blog/needlelace-my-work-so-far
A lacemaker's work... the site is older and kind of tricky to navigate. Like. there's no home button, as far as I can tell. Album of their work: https://www.lacemakerslace.oddquine.co.uk/album/index.html Home page, I think: https://www.lacemakerslace.oddquine.co.uk/
Useful/Interesting Things to Know
Alençon lace -- specific French style from the Alençon region, which has a history of point lace and a current institution dedicated to preserving the skills and producing lace. This is the style that I was looking at examples of to try and learn from.
Search terms like different styles of lace that I’m not qualified to talk about but you can look into and do research on: Battenburg, point de gaze (very very fine work, like gauze)… More to be added as I learn about them.
The terms "needle lace" and "point lace" are both used to refer to lace made with a needle. I'm unclear on if there are subtle distinctions between them or if it's simply a matter of location. But having versions of a search query for both terms should help find more results than just using one.
Encyclopedia of Needlework by Therese De Dillmont is an excellent resource to learn how to do different stitches. It seems these stitches mostly come from Irish lace, according to the book. HTML copy of book available on Project Gutenberg here: https://www.gutenberg.org/files/20776/20776-h/20776-h.htm I recommend using ctrl+f to search for "lace stitch" on the page. The end of each chapter in the HTML version seems to have a link to the Table of Contents that is at the end of the entire document. It has chapters for plenty of other needle arts, so it's a good resource all around.
If you want to find examples of needle lace, look on Wikimedia Commons! Using a variety of search terms will help you find more material for inspiration/observation than otherwise
If you want to design your own needle lace depicting objects, it might be worth looking at stained glass to see how larger shapes are broken up into smaller shapes that still feel complete.
You can use multiple colors! Let yourself use multiple colors, like stained glass!
Thoughts from the Learning Process So Far (some terminology used here, look them up so you know what the actual definitions are, but I’ll define what I mean by them)
Tacking vs Couching... I'm unsure about the actual definitions so I may be using them wrong here. In the videos I’ve seen tacking seems to be making a stitch that runs along the way the cordonnet will run. Couching seems to be just when the thread that secures the cordonnet comes up through the backing and goes down through the backing at the same point. With these definitions… Tacking went faster for me than doing couching, but it feels a lot less secure and precise for the form of lace I’m making. Unless I made the tacking stitches perpendicular to the cordonnet's path, the outline cord moved too much due to tension. If it's perpendicular and not a very short stitch, it might get in the way of your filling stitches or binding off stitches. Which might be fine, since you pull them out anyways. But it would also mean more holes in the backing, and at some point the holes are too close together and might tear the backing and pattern. I don't like that. Couching—much, MUCH more tedious for me because I’m not practiced at making the needle come up in exactly the right spot. but it feels more secure to me. The outline seems to be less affected by tension as you work. And I took some shortcuts for couching that helped. I don’t couch the doubled cord, instead I whip stitch back over the already-secured cord. I might make a post to demonstrate what I mean. It kind of messes with the shape/placement of my cordonnet, but for the sake of my impatience I’m willing to sacrifice the precise shape.
Backing material... To use fabric in backing like the instructions usually say, or not? Idk. For me, it’s hard to find the right hole for the couching stitches when I can't see my pattern from the back. It took a lot of trial and error until I got a feel for how to predict where my needle would come up. I don't like the way the poke-and-check method of stitching the cordonnet down tends to rip the pattern up (at least, with my easy-to-access materials. Probably better with better materials and more practice. Using my thumb to find approximately the right spot helped, but not enough). So I just used a sandwich of tape/paper/tape as my backing. If you're willing to fuss around with fabric in your backing, it might make it easier to remove the couching threads after you're done, and when I tried. The directions I've seen usually say to use a backing of doubled-up fabric, clay paper (I'm unsure what this is. might be a thicker paper than cardstock, or it might be paper made to contain clay particles. Probably more like the first option), and contact paper. My last attempt at making a backing used notebook paper (or other type of paper) with packaging tape on both sides to provide a smooth surface and structure. I think it worked fairly well, and I didn't have to figure out where to buy contact paper (or figure out exactly what contact paper was).
#lace making#fiber arts#needle lace#instructions#tutorials#information#resources#my post#i will make this cleaner/easier to read later
125 notes
·
View notes
Note
how do you get your text that soft pink shade? tutorial?
BABY PINK TEXT TUTORIAL !
hi babe!! here's a short and hopefully easy to understand tutorial for the text i use in my posts ᥫ᭡
also, just a little disclaimer: the images on this post might not be visible because they exceed the limit of 10 images per post on mobile app. should be fine on a laptop or pc though!!
okay firstly, make sure you're using a laptop and open your post in one tab and in a seperate tab open jsfiddle.
you should be able to see this coding somewhere on your screen:

you're gonna replace the two hex-codes (highlighted text) with whichever colours you'd like. to do a gradient, like this, the two codes will be different, but i like to do a solid colour like this so my codes will be the same.
the hex code i use for the baby pink is D2A3BE, or you can use your own. if you don't have a hex code you like yet, you can use the colour picker on this site to find one!
just copy and paste the hex codes into the code so it looks like this:
make sure it looks exactly like this. you still need all the spaces, quotations and other code. only change the hex codes.
in the top left of your screen, there should be a "run" button, and when you press it, the colours in the bottom right should change from the default ones to the ones you chose.
next, you're going to open your tumblr post in your first tab.

your post will start like this. you'll go to the settings button in the top right (circled) and change the post from rich text to HTML
this will enable coding on the post. you'll still have 'preview' where it will look normal and you can still type and edit the post as you usually would.
once you've typed something it will show it in the HTML option just in a different way:
you want to go to the preview page and make sure you've got the text looking exactly as you want it (bold, italic, small, etc.). also note that colours look especially good and show up well when the text is bold. i set mine to bold as an example.
when you switch to HTML it will look something like it does above.
next, you'll copy the text between all the coding prompts (e.g. <p><b> and <b><p>). only copy the text you want to be pink or another colour!! don't highlight any of the coding. then paste it this top box on jsfiddle so it looks like this:
press "run" on the right, and it will spit out a line of code in the second box that will look something like this:
you're gonna copy that line of code and switch over to your tumblr tab. on your HTML version of your post, find the text you're changing and highlight it. then paste the code into that spot. make sure not to highlight any of the surrounding code - only the text you've written and want to change.
it will look super weird and long because it's colouring each symbol and letter, if you look closely, each letter of "example text" is separated and surrounded by code. when you switch to preview it will look like this:
for gradient, the process is the exact same, but on jsfiddle, when you're replacing the default hex codes with yours, the second hex code you plug in will be different to the one you start with. for example:
this second colour is C45494 btw!!
to do specific text in a paragraph as if bolding it (which i do in a lot of my posts), you just want to find that text in your HTML post, and copy and paste the specific word/s into your top box on jsfiddle, and then proceed as normal. example:
hopefully this helped!! let me know if you have any questions or need me to go over anything ( ˘³˘)
#coloured text tutorial#colored text tutorial#tumblr tutor#text tutorial#text tut#coloured text tut#colored text tut#colored text#coloured text#aesthetic#theme#aesthetic theme#pinterest#pink#hex codes#coding#jsfiddle#dodgesgirl helps#dodgesgirl answers#art donaldson#challengers#mike faist#challengers 2024#challengers movie#mike faist imagines#art donaldson fic#art donaldson smut#challengers smut#mike faist renaissance
230 notes
·
View notes
Text
Ao3 HTML/Coding Resources Part II
This is the HTML/Coding for Website mimicking resources in Archive of our Own (Ao3). To find Part I where I go over the Basics, General Text HTML and some Fancy Formatting (images, dividers, columns, photos, tabs etc. CLICK HERE!
Other Websites:
Texting
-How to make iOS Text Messages on Ao3 by CodenameCarrot, La_Temperanza
-A Quick Generator for Embeddable iOS Text Messages by 221b_ee
-imessage Skin by Adzaema
-Retro imessage by Adzaema
-Basic Text Message Work Skin by ProfessorMotz
- Bubble platform [workskin] by Khashana
-Chat Log HTML by deathbymistletoe
-LINE Messenger/Chat by imperiousmarshmellow
-IDOLish Rabbit Chat Workskin by associate
-Replika workskin by FaeriMagic
-Texting Workskin to match light/dark mode by irrationalpie
Tumblr
-Tumblr style CSS Tweaks by Aposiopesis
-Ao3 Workskin Testing and Tutorials by junietuesday25 tumblr DM
-How to make Tumblr Posts on Ao3 by phyyripo
-Plain Text Social Media Platforms by anubisms
-Tumblr Post Work Skin by tsukinosaugi
Twitter
-Repository - Twitter by gadaursan
- How to mimic Social Media in an Ao3 work by aerynevenstar
-Twitter Work Skin Template by etc e tal
-Twitter Workskin: Tweets and Profile by starskin
-Twitter Mock-Up by TheBrookesNook
Ao3/Fandom
-How to mimic Authors notes and Kudos/Comment Buttons by La_Temperanza
-How to mimic AO3 Comments by bittermoons
-How to add mobile Ao3 in your fic by DemigodofAgni
-How to make a fanfic style header Ao3 style by ElectricAlice
-Template for adding post chapter content by SpookyTesting
-CSS based full Ao3 fic integration (Header/Overview, Comments, Title, Summary & Buttons) by deciMae
-How to Mimic LiveJournal Posts and Comments by cursedcuriosities
-Dreamwidth Entries & Comments Work Skin by folk_melody
Facebook/Instagram/Whatsapp
-Whatsapp Group Chat builder by FestiveFerret
-How to make Facebook Messenger Chat on Ao3 by ran_a_dom
-Whatsapp Work Skin Template Revamped by etc e tal
-Whatsapp group chat skin by ovely
-Instagram DMs for Ao3 by monarch_rhapsodies
-How to make Instagram DM mockup by xslytherclawx
-Penstagram chats on ao3 by deciMae
Snapchat
-Snapchat skin by Azdaema
-Snapchat Template for Ao3 by starskin
Reddit/Forum
-UPDATED Reddit Skin by diamine
-2020 Reddit Work Skin by timstokerlovebot
-Reddit Work Skin CSS & HTML by knave_of_swords
-How to mimic Social Media in an Ao3 work by aerynevenstar
-template Reddit Skin by spookedcroon
-template:Subreddit page by ireseen
-Ao3 workskin for Forum Thread by fencesit
-Ao3 workskin for Forum Thread [Expansion Pack] by AMereDream
-How to mimic 4chan posts without just taking screenshots of 4chan
Twitch/Youtube
-Mimicking Twitch Chat for fics by Ultraviollett
-Twitch Chat Work Skin by cherrari
-Workskin testing by tohmas [Youtube comments]
-Youtube Work Skin by 1864s
-Youtube Comment Section Workskin by LupaMoe
Discord/Slack/Zoom
-2023 Discord Theme Workskin by TrojanTeapot
-Discord Work Skin by unpredictableArtist
-Discord (Dark Theme) Workskin by Heterochromia_Mars
-Skin for Recreating Discord’s Server Member List by SpookyTesting
-Ao3 Workskin Testing and Tutorials by junietuesday25
-Slack Workskin by Khashana
-Zoom inspired Ao3 skin by mystyrust
Wikipedia
-Fake Wikipedia article about a TV show: Work Skin by Anonymous
-Wikipedia article work skin by styletests
-SCP Wiki Style Workskin by thesnager
Working Games in Ao3 Tutorials
Logic Grid Puzzle Work Skin & Tutorial by BookKeep
The Case Of The Clickable Murdle by VThinksOn
Review Sites:
Yelp Reviews by kiwiana
Amazon Reviews by kiwiana
Rate My Professor Work Skin by BookKeep
Video Game Dialog Mimics
-Dialog [workskin] by Clover_Zero
-Dialogue Workskin (with parallax BG effect) by mystyrust
-My S Ranks--System Windows by unpredictableArtist [computer dialog workskin]
-Tutorial: Ace Attorney Work Skin by QuailFence
-Among Us Ao3 skin by mystyrust
-How to Mimic Undertale Fonts on Ao3 by La_Temperanza
-Tutorial:Rain Code Work Skin by faish
-Balder's Gate 3 Documents Work Skin by Professor_Rye
-SpookyTesting has SOO many Nintendo based ones
–Mimicking Minecraft for some fics by Ultraviollett
Runescape Right Click Menu Formatting by fennfics
How to put Z skits in your Tales fics by wingedcatgirl
How to make Honkai: Star Rail Messages by html_hell (jihnari)
Hold-hands inspired Texting skin by cursedcuriocities(SetsuntaMew)
Simple Linkshell Ao3 Work Skin by Pent – Final Fantasy XIV mimic
Homestuck Chat Clients by 77angel-skins
Workskin: Slay the Princess by ASpooky
Slay the Princess: Updated Workskin by Lilto
Misc. Sites
--How to mimic Deadpool Thinking boxes by La_Temperanza
--FetLife Skin [Work Skin] by Khashana
--Disco Elysium workskin by SarunoHadaki
--StarTrek PADD workskin by duskyspirit
--MDZS-themed letters by allollipoppins
--A Newbie's Guide to Podficcing by Adzaema [skin for podfics]
--Skin for making Character Intro Cards by SpookyTesting
--Kpop Photocards by legonerd
–OVR System Workskin by unpredictableArtist
-How to make Stylized CSS Card Links for your fics by buttertartz
-vroom vroom kachow: Formula1 Race Results Workskin by mackerel_cheese
Bonus: Ever wanted to see how crazy HTML can be on AO3? Try playing But can it run Doom? or Tropémon by gifbot
Happy Creating!
Last updated: Feb 8 2025 (Have a resource that you want to share? My inbox is open!)
View Part I with HTML Basics HERE!
#archive of our own#html coding#fanfiction#fanfic#fanfic writing#fic writing#fanfic help#ao3 fanfic#ao3 author#ao3 writer#ao3fic#ao3#ao3 link#ao3feed#fanfics#fanfic coding#fanfiction writer#fanfiction author#fanfiction crossover
58 notes
·
View notes