This is some wacky stuff, but I needed it for this blog so I didn't have to work super duper hard to reduce the front page size.

Basically, I have images in blog posts, and removing them so you don't have to load 30MB of images when you go to the main page is imperative. I was accomplishing this using an ugly regex, but it was buggy and didn't let me to arbitrary processing on each image node.

So I did what any sane person does, and wrote a processing function to traverse the post DOM. I author all of my posts in markdown and the upside is that it's easy to read the source, and it gets turned into super clean HTML. The blog software does the heavy lifting of normalizing each post into pure HTML for me, and I can run code on the output.

For this, I used the PHP DOMDocument stuff which is horrible, don't get me wrong, but it's significantly better than any other path I found.

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);
}