Archive of Our Own

have you ever wanted to do a fade-to-black effect in your works, only to realize it looks terrible and/or illegible on other site skins because you hard-coded the color values into your work skin?

it's hard work making work skins look nice with every site skin here, mostly because the site's style sheets don't make use of css variables we skin coders can then leverage in our works. but through the power of css filters and the keyword currentColor, we can make some magic happen.

you can use the site footer to switch to the reversi or default skin (whichever you aren't using at the moment) to admire the way this flashback background will actually change to contrast whatever your current background color is.

the css

#workskin .fade::before, #workskin .fade-brief::before, #workskin .fade::after, #workskin .fade-brief::after {
	display: block;
	content: "";
	min-height: 400px;
	height: 67vh; /* the vh unit, for those of you unfamiliar, refers to the current window's vertical height (meaning it will be dynamic across devices) */
	filter: contrast(75%);
}
#workskin .fade::before, #workskin .fade-brief::before {
	background-image: linear-gradient(rgba(0, 0, 0, 0), currentColor 95%); /* you can actually swap out this 95% number for any % point along the thing to edit how much space you get to sit in the new color before the text starts up again */
}
#workskin .fade::after, #workskin .fade-brief::after {
	background-image: linear-gradient(currentColor, rgba(0, 0, 0, 0) 95%);
}
#workskin .fade-brief::before, #workskin .fade-brief::after {
	/* this part is just redeclaring some of the properties declared in .fade and .fade-brief above */
	min-height: 100px;
	height: 25vh;
}
#workskin .flashback {
	background-color: currentColor; /* this is the bit which swaps out the background color. */
	padding: 0 2em;
	filter: contrast(75%); /* the contrast is toned down a bit so that the text doesn't look so searing on the eyes */
}
#workskin .flashback p {
	/* this is the really key part of the flashback class; it's what makes the text *legible* after making the background color the same as whatever the text color had originally been by inverting it */
	filter: invert(100%);
}
/* these next two rules make it so that there's not a gap btwn the fade and the flashback block as a result of paragraph margins */
#workskin .flashback > p:first-child {
	margin-top: 0;
}
#workskin .flashback > p:last-child {
	margin-bottom: 0;
}
#workskin .flashback em,
#workskin .flashback strong {
	filter: contrast(1250%); /* this bit just makes bold and italics pop a bit if you use their semantic 'em' and 'strong' versions. */
}

you could easily extend the .fade class into something like .fade-bottom or .fade-top by then adding new rules that set their ::before or ::after heights to 0.

the html

(notice how i formatted it nicely with a new indent for every new block element and used semantic coloring. this is because i love you.)

<div class="fade-brief">
	<div class="flashback">
		<p><em>wheeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee!</em></p>
		<p>(um, probably don't put images in here too unless you want their colors to be inverted too.)</p>
	</div>
</div>

this css isn't perfect or anything. you'll probably end up with some bugs if you, say, open up with a <blockquote> and then nest a <p> in there because the deletion of the top/bottom margins to close the gaps btwn the fade and the flashback only works if those first <p> are the direct descendants of the flashback <div>.