Used to be a site for my unpublished userstyles, now has any CSS snippet I find useful. I feel like putting outright code snippets is really limiting how much I actually like maintaining this page, so here's a short list of things I'd like people on Neocities to know.
- You can avoid blurry images by setting
image-rendering: pixelated
on elements you want to stay crisp. There's other settings for it too, you should check out MDN or W3Schools to see them, but this one specifically applies to things like blinkies, or 88x31 buttons, and other things I've seen around. - If paragraphs get too wide, they're hard to read. Most people set the container width to set the paragraph width, but if you don't want to do that you can apply this very basic CSS to all your
p
tags:p {max-width: 80ch; margin: auto;}
This one gets to be a stand-alone! Anyone using AO3 on mobile has probably run into people who use hover text to convey additional information, but that doesn't work on mobile. Thanks to modern CSS, though, you can still use styles to insert the contents of the title
attribute in the :after
pseudo-element, like this:
#workskin [title]::after { content: " (" attr(title) ")"; }
What it does is selects every element that has a title
attribute, so long as it's in the #worksin
, or fanfic body. It grabs the pseudo-element ::after
the thing with the title
, and puts the attr(title)
(get attribute: title) in between round brackets. Because of limitations of CSS, you can't select the text that it inputs, because it's not technically part of the document or something? It's a weird thing that comes about because of the "separation of concerns" I think.