CSS-only Bookmarks

Just wanted to share an easy way to make “bookmarks” using CSS. I’m guessing others have written about this before, but it took me less time to write this up than to search for it and get sidetracked by other stuff. So here you go.

Here’s what it’ll look like:

It’s really, really easy.

First, in your HTML, you need a DOM element that’ll act as the bookmark. You could just go with a <b></b>, but most folks will want something a little more semantically-rich. So let’s go with <div class="bookmark"></div>. Also, it’ll need to be sitting inside a <div> or other parent element that A) has a set background color (in this case, #eee), and B) that has a declared position. (You’ll probably have either position:absolute or position:relative. “Fixed” probably works as well.)

So here’s the HTML:

<div>
  <div class="bookmark"></div>
  <h3>Title of section or whatever</h3>
</div>

And then we’ll have some CSS. (I haven’t included the parent div’s CSS; just the CSS for the bookmark.) Here’s what I used:

.bookmark{
  background: #b00;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b00), color-stop(100%,#900));
  background-image: -webkit-linear-gradient(top, #b00 0%, #900 100%);
  background-image: -moz-linear-gradient(top, #b00 0%, #900 100%);
  background-image: -o-linear-gradient(top, #b00 0%, #900 100%);
  background-image: -ms-linear-gradient(top, #b00 0%, #b00 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b00', endColorstr='#900',GradientType=0 );
  background-image: linear-gradient(top, #b00 0%, #900 100%);
  
  height:30px;
  position:absolute;top:0;right:20px;
  width:20px;
}

.bookmark:after{content:'';display:block;border:10px solid transparent;border-bottom-color:#eee;position:absolute;bottom:0;}

Feel free to lift my CSS and use it for your own projects.

You can use whatever gradient you want to, of course. (Or no gradient.) Mine runs from a light-deep red (#b00) to a medium-deep red (#900). And you’ll want the bottom-border color on that :after element to be the same color as the parent div (again, in this case, #eee). If you want the bookmark to stick above the parent element (that is, as though it were “folding over the page”), make the “top” value “-1px” on the .bookmark CSS.

Have fun, and if you use it, let me know what you make with it.