Skip to content
ThreadOut
Izzy@the_tamed_poet · Sep 14, 2026

Okay, fic coding people / AO3 formatting enjoyers, I know how to do this! Very long thread 🧵 HTML: <div…

12 tweets1 min read♥ 4.1Koriginal

Summary

A tutorial on creating an echo/reverb text effect for AO3 fanfiction using HTML and CSS, where repeated text elements are layered with decreasing opacity and slight positioning offsets to create visual depth and emphasis.

Summarized by ThreadOut AI from the full thread. May miss nuance — read the thread below.

  1. #1

    Okay, fic coding people / AO3 formatting enjoyers, I know how to do this! Very long thread 🧵 HTML: <div class="thought-collapse"><div class="thought"><span class="echo echo-1">Text content here. Text content here. Text content here. Text content here.</span>

    salt ✦@saltwatersweets · Sep 13, 2026

    ooo this html is really cool

  2. #2

    <span class="echo echo-2">Text content here. Text content here. Text content here. Text content here.</span><span class="echo echo-3">Text content here. Text content here. Text content here.</span><span class="main-thought">Text content here.</span></div><div class="thought">

  3. #3

    <span class="echo echo-1">Blah blah blah. Blah blah blah. Blah blah blah. Blah blah blah.</span><span class="echo echo-2">Blah blah blah. Blah blah blah. Blah blah blah.</span><span class="echo echo-3">Blah blah blah. Blah blah blah. Blah blah blah.</span>

  4. #4

    <span class="main-thought">Blah blah blah.</span></div><div class="thought"><span class="echo echo-1">More text here. More text here. More text here. More text here.</span><span class="echo echo-2">More text here. More text here. More text here.</span>

  5. #5

    <span class="echo echo-3">More text here. More text here. More text here.</span><span class="main-thought">More text here.</span></div></div> And then the CSS: #workskin { background-color: #303030; color: #f5f5f5; } #workskin .thought-collapse { position: relative;

  6. #6

    max-width: 34em; margin: 0 auto; padding: 1em; background-color: #303030; color: #f5f5f5; overflow: hidden; font-family: Arial, Helvetica, sans-serif; font-size: 1.1em; line-height: 1.15; box-sizing: border-box; } #workskin .thought { position: relative; min-height: 3.5em;

  7. #7

    margin-bottom: 0.2em; } #workskin .main-thought { position: relative; display: block; color: #f5f5f5; opacity: 1; } #workskin .echo { position: absolute; display: block; width: 145%; color: #eeeeee; line-height: 1.05; } #workskin .echo-1 { top: -0.8em; left: 0; opacity: 0.25;

  8. #8

    } #workskin .echo-2 { top: 0.1em; left: 0.8em; opacity: 0.18; } #workskin .echo-3 { top: 1em; left: -0.5em; opacity: 0.13; } #workskin .thought-collapse br { display: none !important; } #workskin .thought-collapse p { margin: 0; padding: 0; }

  9. #9

    The .main-thought is the readable sentence. The .echo spans are copies sitting behind it. Because the parent .thought has position: relative, the absolutely positioned echoes are placed relative to that thought instead of flying off somewhere else on the page.

  10. #10

    Then you just offset each copy slightly with top and left and lower the opacity. Want it barely noticeable? opacity: 0.08. Want the thoughts getting louder? Increase it. Want them drifting sideways? Change left.

  11. #11

    Want them collapsing downward into the next sentence? Increase top. Want everything at the end to become almost unreadable except for one foreground line? Add more echoes and let them overlap.

  12. #12

    For anyone new here from this thread: hi! 💞 I have a beginner-friendly AO3 HTML/CSS tutorial that covers everything from the basics to cool formatting experiments. archiveofourown.org/works/83532626