CSS Nuggets in Scrunchup

By Anna Debenham

While building Scrunchup, I learnt a few little CSS tricks. Some of them are visual enhancements, others help make your code cleaner. While they’re not all compatible in some of the older or less capable browsers (*coughIEcough*), you should still be able to start using some of them today.

:first-of-type

For an example of this, have a look at the first paragraph of this article. I have set the font size of the first paragraph to be slightly larger than the paragraph text in the rest of the article to draw the reader in.

p {
  font-size:1em;
  }
p:first-of-type {
  font-size:1.2em;
  }

:last-of-type

The :last-of-type selector is useful if you want to take the bottom border out of a table. In this example I’m changing the bottom border from black to red so you can see it working.

tr {
  border-bottom:3px solid black;
  }
tr:last-of-type {
  border-bottom:
3px solid red;
  }
Rank Top Rated Films of the New Millennium (IMDB)
1 The Dark Knight (2008)
2 The Lord of the Rings: The Return of the King (2003)
3 City of God (2002)
4 The Lord of the Rings: The Fellowship of the Ring (2001)
5 Up (2009)

Remember this isn’t just restrained to tables, you can use it for other elements too.

nth-of-type

One of the things that CSS is not great at (at the moment) is grid layouts. Scrunchup’s homepage has grid blocks for each article, and getting them to line up vertically and horizontally was a bit of a challenge. I want to tell the block on the end of the row to clear, but none of the others, and the only way of doing this with CSS that I knew of was by adding a class to the last block on each row with, and targeting it with clear:left. Not only does this add extra markup, but the content I’m styling is dynamic – what is the last block in the row at one time may be the first at another. Our search results page is a good example of this.

Why you shouldn’t define heights

We could give each block a height of, say, 400px and that would solve the problem. But this is a really bad idea. If someone visiting your site wants to increase the text size, or you have just a little more text in the block than the block can hold, it will break the layout. This is one of the things that differentiates web design from print design – content on the web is dynamic.

Using a wrapper div

Having different sized boxes without setting the 1st one on each row to clear causes the layout to break. The most common way of fixing this is to put each row in a wrapper div. But this adds extra markup, and you still have the same problem if the grid blocks are not static.

Using nth-of-type

Here’s the code I used to solve this problem:

.block:nth-of-type(3n+1) {
  clear:both;
  }

It uses a little bit of maths that, very basically put, tells the 4th block in every row to fully clear the blocks above it. Being able to specifically target an element without giving it a different class is incredibly useful.

We can also use exactly the same technique to turn off the margins in the 3rd block of every row so it lines up flush to the left and the right.

.block:nth-of-type(3n+3) {
  margin-right:0;
  }

nth-of-type is an incredibly powerful selector, and can be used in some really creative ways.

Faux Randomness

For the tag cloud at the bottom of each page, I got the tags to rotate at different angles. It looks random, but it’s not really. Here’s the code:

.tag:nth-of-type(3n+1) {
  transform:rotate(2deg);
  }
.tag:nth-of-type(5n+1){
  transform:rotate(-2deg);
  }

Shadows

In case you didn’t know how to already, here’s how to use CSS to make shadows.

.block {
  box-shadow:1px 2px 3px #333333;
  }

I’m going to break this up to show you what does what. The first bit we define is how far we want the shadow to offset to the right, so 1px shifts the shadow 1px to the right. The next bit shifts it down, so in this example, it will be shifted 2px down. Where I’ve put 3px is the amount of blur the shadow will have. If I put 0px, it would be a solid shadow. Finally, I’ve given the shadow a colour of #333333 which is a dark grey.

Inset Shadows

You can also do inset shadows. These can look quite good on form labels, such as search boxes to make it look like it’s cut into the background. Here’s the code:

.block {
  box-shadow:inset 1px 2px 3px #333333;
  }

Each browser has its own proprietary way of understanding box-shadow because it’s quite new, so to make sure it shows up in previous versions of browsers, you’ll need to repeat the code like this:

-webkit-box-shadow:1px 2px 3px #333333; /* Safari */
-moz-box-shadow:1px 2px 3px #333333; /* Firefox */
box-shadow:1px 2px 3px #333333; /* Catch-all (I put this at the end of the list so it's the most specific) */

IE has it’s own unique way of doing shadows, so you’ll need to put this in your CSS too…

filter:shadow(color=gray, direction=100, strength=5);

Transform

If you have a look at the author photo at the top of the page, you should see it’s slightly tilted (depending on your browser version).

To achieve this effect, you can use the following code:

.img {
  transform:rotate(2deg);
  }

This rotates the element 2 degrees clockwise. If you put (-2deg), it turns it the opposite way.

To make it look like a polaroid photo, you can use this code:

.img {
  transform:rotate(2deg); /* tilts the photo */
  padding:3px; /* adds a border round the image */
  background-color:white; /* colours the border white */
  border:1px solid gray; /* makes the photo stand out against a white background */
  box-shadow:2px 2px 3px gray; /* gives the image a shadow */
  }

Icons

To automatically show a filetype icon on a link to a file, you can use something called an attribute selector. In this example, I’ve set all links to .pdf files to display a little pdf icon. The href$=’.pdf’ bit looks for anything that ends with the string .pdf.

a[href$='.pdf'],
a[href$='.PDF'] {
  background-image:url(../images/icons/pdf.gif);
  background-repeat:no-repeat;
  background-position:left 5px;
  padding:0.3em 0 0.4em 25px;
  }

You can also do the same thing with links. I’ve set all the links on this site that go to Flickr to display a little Flickr icon. The href*=”http://flickr.com” bit looks for anything that contains the string http://flickr.com.

a[href*=”http://flickr.com”],
a[href*=”http://www.flickr.com”] {
  background-image:url(../images/icons/flickr.gif);
  }

Browser Support

Most modern browsers support all of these CSS nuggets, with the exception of IE. I’d put a full browser support table for each of these selectors but it would date very quickly, so to find out which browsers currently support which selectors, head on down to www.quirksmode.org – it has a lovely compatability table and resources which I refer to extensively, and I really recommend it.

Anna Debenham

CSS Nuggets in Scrunchup

After finishing her A-Levels, Anna set up as a freelance front end developer. At the beginning of 2009, finished a 4-month internship at Clearleft.