I’ve recently fielded a lot of questions about Ribbons and Folds done with pure CSS. It’s a lot more than just a few lines of CSS, though. A lot more. Understanding how borders and pseudo-elements work is not only a good nugget of knowledge to have, but also necessary to understanding CSS folds. To kick off this article, I’m going to walk you through how borders work in CSS. Then we’ll talk about pseudo elements. Finally, I’ll talk about how to use borders and pseudo elements to create stunning effects like folds!

Borders

To understand folds, you should first understand how borders work in CSS. Basically, where each border meets, there is a diagonal line. I’ve built a pen to exemplify that.

See the Pen CSS Borders by Nate Northway (@the_Northway) on CodePen.

As you can see in the demo, each border is just a triangle. This is how CSS triangles are made. An element with 3 transparent (or white) borders, and one colored border. Now, we can take this a step further.

Pseudo Elements

Pseudo Elements are very cool. They can do all sorts of cool, useful, entertaining, and handy stuff. One really useful example is tooltips. A pseudo-class is basically a phantom state or specific characteristic of an HTML element that can be targeted with CSS. Common pseudo classes include :link, :visited, :hover, and :nth-child. But there are a lot more.

A few things to note: pseudo-classes are always preceded by a colon (:). After the colon is the pseudo-class’ name, then, perhaps, a value in parentheses, like in :nth-child(1).

Pseudo-elements are like bonus elements for every HTML element on the page. Though they can be manipulated with CSS, they aren’t a part of the document tree, nor the DOM. So, they are only accessible with CSS.

Single Colon vs. Double Colon

I’ve seen a little debate over single vs. double colon. I use both, just to be safe, but some people who are more careful about their byte usage might bite my head off for suggesting that. But, a more honest answer might be: it doesn’t matter.

The double colon is a part of CSS3. It differentiates pseudo-elements like ::before and ::after from pseudo-classes like :hover and :active. All browsers support the double colon syntax except IE8 and below. But it is good to know that some, like ::backdrop, only accept the double colon syntax.

Personally, I use both, like this:

button:active,
button::active {
  -webkit-outline: none;
  -moz-outline: none;
  outline: none;
}

I think this keeps me honest.

CSS Generated Content

Content can be generated through CSS by using the content: ""; property with a pseudo-element. The content might be plain text or it might be a glyph, but usually, it it just a container, used to create a nice looking ‘thing’ (like a ribbon or page fold).

Keep a few things in mind when using CSS generated content, though. CSS generated content will not be accessible to screen readers, and, it will not be selectable. CSS Generated content should only be used for non-vital stuff, like a ribbon or page fold.

What we’ll be using CSS pseudo-elements and classes for

Since we can manipulate the boxes created by pseudo-elements, we can use them to create ribbons, tooltips, and page folds. Basically, it’s another div we get to work with without adding to the HTML markup. We’re going to be working with ::before and ::after for this snippet.

Using :before

I really like this snippet. Having documentation, a blog, or a page about coding means that you’ll have a lot of code samples on your pages. It’d be really nice to be able to label the languages being used, wouldn’t it? With :before, you can! Here’s the HTML markup.

<code rel='html'>
  <h1>Hello, World!</h1>
</code>

And the CSS:

code {
  display: block;
  background: #efefef;
  color: #292929;
  padding: 10px;
  font-family: monospace;
}
code:before {
  content: attr(rel);
  display: block;
  width: 100%;
  height: 20px;
  font-family: 'Sans-serif';
  background: #292929;
  color: #efefef;
}

Put it all together in a demo:

See the Pen Styling Code Blocks by Nate Northway (@the_Northway) on CodePen.

Cool! So now, you can see pseudo-elements taking up space in the real world. Groovy!

Creating A Page Fold

Creating a page fold, ribbon, and a myriad of other effects comes naturally, now. What we have to do is combine our knowledge of borders and psuedo-elements to create the fold. So, imagine you have an element that needs a page fold. You know the its width, its height, and background color of its parent element. Groovy! You can create a fold.

What we have to think of is the anatomy of a fold. Two triangles of different colors, pushed into a corner of an element. The triangle furthest from the center of the parent element has the color of it’s parent element’s parent element – probably white, but maybe not. The triangle closest to the center of the parent element has a darker (or lighter) shade of its parent element’s background color.

We’ll use borders to create the triangles. Remember earlier, when we discussed how borders meet at angles and how two colored borders form a triangle? Well we’re going to use that property to create our ‘fold’. We’ll start by defining our parent element, then, the borders and position of our pseudo-element.

div {
    background: green;
    width: 100px;
    height: 100px;
    margin: 0 auto;
    position: relative;
    top: 20px;
}

div:after,
div::after {
    width: 0px;
    height: 0px;
    position: absolute;
    margin-top: 80px; //parent container height - pseudo-element border width
    margin-left: 80px; //parent container width - pseudo-element border width
    content: "";
    border: 10px solid white;
    border-top-color: #004d00;
    border-left-color: #004d00;
}

Depending on where you want your fold (top left, top right, bottom right, bottom left), you may need to change up the border declarations and positioning a bit. Here’s the code for that:

//top right fold
div:after,
div::after {
    width: 0px;
    height: 0px;
    position: absolute;
    margin-top: 0;
    margin-left: 80px; //parent container width - pseudo-element border width
    content: "";
    border: 10px solid white;
    border-left-color: #004d00;
    border-bottom-color: #004d00;
}

//top left fold
div:after,
div::after {
    width: 0px;
    height: 0px;
    position: absolute;
    margin-top: 0;
    margin-left: 0;
    content: "";
    border: 10px solid white;
    border-right-color: #004d00;
    border-bottom-color: #004d00;
}

//bottom left fold
div:after,
div::after {
    width: 0px;
    height: 0px;
    position: absolute;
    margin-top: 80px; //parent container width - pseudo-element border width
    margin-left: 0;
    content: "";
    border: 10px solid white;
    border-top-color: #004d00;
    border-right-color: #004d00;
}

See the Pen Untitled by Nate Northway (@the_Northway) on CodePen.

I got inspiration to write this post from this Reddit thread. I used a lot of resources to supplement my lack of word-juggling capabilities, mostly this CSS-Tricks article and a wonderful article on Smashing Mag. I also look at this other CSS-Tricks article a lot, just because it’s good inspiration juice.

No Comments...yet