Fun with pseudo-elements

This is totally a hack. But it works, and without modifying the markup output by the plugin.

Aesop Story Engine is really nice. It’s what allows my WordPress theme, Cover, to break the content out of the single column, for things like full-width images and the like. One of those components is Chapter; you can see its use on Namine’s page.

The drawback of the component (up until last night) was that the image used as the background for the chapter title might have light colors, rendering the chapter title itself unreadable.

Like this. You can make it out, but you have to strain your eyes a bit.

Another place where Cover uses large images with overlaid text? You guessed it: the post featured image. And featured posts, on the front page. And the “next post” in the post navigation at the bottom of each blog post. Yep, Cover uses this design pattern quite a bit.

I get around the whole light-text-on-light-image problem by making the background color dark gray, then decreasing the opacity of the image itself. The markup Cover uses for large images with overlaid text is this (and since it’s modular, it’s the same — and it works — everywhere):

<div class="cover">
  <div class="cover-background"></div>
  <header class="cover-header">
    <!-- content goes here -->
  </header>
</div>

And here’s the SCSS. (Obviously this is not the whole class definition. I’m only the relevant bits.)

.cover {
  background-color: #2b2b2b;

  &-background {
    background-image: url('...'); // actually set inline
    opacity: .6; // dims the image
  }
}

I can decrease the opacity of the background without it affecting the content shown because the elements are siblings. If it were a parent-child relationship, it would decrease the content’s opacity as well.

Now compare that with ASE’s chapter markup:

<div class="aesop-article-chapter-wrap">
  <div class="aesop-article-chapter"> <!-- background set inline here -->
    <h2 class="aesop-cover-title">
      <span>2013</span>
    </h2>
  </div>
</div>

See the problem? That background is parent to the content. I can give the background element’s parent a dark background (easy enough to do with Sass variables, leaving only one place to change, if ever I wanted to). But I can’t decrease the chapter background’s opacity (thereby dimming the image) without it also affecting the chapter content as well.

I got around it with a pseudo-element:

.aesop-article-chapter:after {
  background-color: #2b2b2b;
  bottom: 0;
  content: '';
  left: 0;
  opacity: 0.4;
  position: absolute;
  right: 0;
  top: 0;
}

Instead of making the image transparent over dark gray, I am creating a new element (with decreased opacity) via CSS, set to that same dark gray, and overlaying it on top of the image.

Of course, this element, being absolutely positioned, will lay on top of the chapter content as well. Setting z-index will pop the content back on top of our new pseudo-element, but it won’t work on a statically positioned element. Since every element defaults to position: static, we also have to fix that.

.aesop-cover-title {
  position: relative;
  z-index: 1;
}

And now we have nice, readable white text, no matter what color or shade the image behind it is.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Related