Actions

Work Header

Rating:
Archive Warning:
Fandom:
Additional Tags:
Language:
English
Stats:
Published:
2026-06-23
Updated:
2026-07-24
Words:
3,435
Chapters:
7/?
Comments:
11
Kudos:
6
Bookmarks:
1
Hits:
106

Spibz's CSS testing❤

Summary:

Pretty much just a playground for CSS testing, with a couple of questionable explanations I'm bad at explanations to help me learn what's going on.
Currently working at re-orginizing this for myself, so the HTML/simple things come before the CSS heavy complicated things.
Well... I say simple, but audio is HTML and that was a mess to deal with.
Simpler.

Chapter 1: The room where it happened...

Summary:

This isn't really going to have any explanations, it's just some experimentation with code. If you want the code, you can always inspect the page where the code you want is located.
Usually.

Reference/Helpful Works

How to target specific parts of your work
Coding Encyclopedia
A Beginner's Guide to HTML and CSS on AO3

P̶e̶r̶s̶o̶n̶a̶l̶ Experiment with HTML and CSS

Notes:

Can you believe all of this started with the idea to write a scene, but format it like

House of Leaves? Yeah me neither. Now it's just HTML/CSS for the sake of learning something new.
It's kinda fun!
When I'm not BREAKING it, that is.

I lost the code for it some time ago, but maybe I'll go back and remake the text box spiral again at some point...

This is the end of the notes.


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

Chapter Text

I'm a little teapot

Some basic HTML stuff.

I'm Header 1!

Header 2

Header 3

header 4

header 5
header 6

I'm a blockquote

abbr

I'm a quote

This text is italicized

This text is bold

This text is deleted

This text is struck through

I know there's a difference, but I'm gonna be honest... I have no idea why it matters to me, as a reader, yet.

This text is strong

This text is emphasized. You can also use strong or bold with emphasis

These are also different from bold and italics. I think this has to do with priority? I don't really get it.

This text is superscript

This text is subscript

This text is
preformatted.     It preserves spaces and
line breaks, without the need for 
<br> 

Workskin ids

preformatted, unordered list Can be used to "jump to" specific areas at the start and end of the fic if you add #IDname to the end of your link.
  • workskin- Starts at very top of the fic, right below the stats
  • chapters
  • summary
  • notes- the notes at the top of the fic
  • work- located right after the notes end
  • demonstration Html for above link note the url <a href="https://archiveofourown.org/works/87266341/chapters/231139836#work">
  • chapter_X_endnotes- the “end notes” link

♡Blog layout♡


The triangle above me is actually a button. Kind of. If you hover over the right spot, you'll have the option to click!

I will probably break on most screens, but I glow on hover!
Love me some funky highlights...

Maybe I should just call this chapter "Spibz goes to town and adds hover effects to everything."
I just think it's neat.

Oh wait... I hid the chapter title didn't I?

This text has a slight blue gradient effect

Top down text

Check it out, I'm glowing blue

veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

I'm rotated a little bitI'm rotated more.

taken from archive.org, use the direct download or link of the audio.

Moving this here, because this is actually html. I'll probably have to make a dedicated index for different types of html code eventually.


Notes:

CSS heavy stuff has now been moved to chapter 5