A cool trick I learned when starting work on my blog is that you can do tooltips entirely with CSS and attributes inside your HTML.

For the uninitiated, when I write "tooltip" I mean the little black dialog box that provides additional information about something on hover. For example, the "discord" and "twitter" buttons on this website use tooltips.

[Image: A "tooltip" in action.]

Typically, these are done in Javascript. However, thanks to the CSS attr() function and wide support for psuedo-elements (::before and specifically) you can fairly trivially do it all with clever CSS.

I was doing some hacky stuff with a psuedo-element to make posts "fade" into the background, but that had the downside of requiring a solid background color to fade it into, and didn't let you highlight text on the post body when faded.

With the mask-image property, I can cleanly fade out posts on the front page with whatever kind of background I want. To demonstrate, I made the background kinda wacky.

The downside here is that it doesn't work on IE, but since I use CSS vars anyway, I don't really care. IE is dead.

I added a nifty little style to the tags on every post. Now they're all cool looking.

I did this with a little bit of CSS wizardry. Here's how you can achieve the same results!

The theory of this trick is to use a psuedo-element, fit it to the tag element's size, style the psuedo-element instead of the tag itself, and drop it behind the tag.

Assuming the tags have a class of "articleTag"...

.articleTag {
  position:relative;
  color:#000;
}

.articleTag::before {
  content: '';
  position:absolute;
  background:#f00;
  z-index:-1;
  top:0;
  right:0;
  bottom:0;
  left:0;
  transform:skew(25deg);
}