audio business charging coding Design Development education interview programming semantics starting out twitter poll university web standards webucation

CSS Nuggets in Scrunchup

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

A graphic of a perfectly aligned gridOne 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

A graphic of a poorly aligned gridWe 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

A graphic of a perfectly aligned grid with a wrapper for each rowHaving 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.

A graphic of blocks without margins on the edge blocks

.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.

Got your own CSS Nuggets? Share them in the comments.

About Anna Debenham

Anna Debenham

Anna is a Front End Developer and has been building websites since she was 14. After finishing her A-Levels, she set up as a freelancer. She's the technician for the Boagworld podcast, and at the beginning of 2009, finished a 4-month internship at Clearleft.

Tags

Related Stuff

  1. The Evolution of a jQuery Plugin

Comments

Richard

To get the effect for the first paragraph, I usually use the adjacency selector to pick up the first paragraph below a h1.

p {font-size: 100%}

h1 + p {font-size: 150%}

This isn’t too foolproof, though – for example, if you have an image between the h1 and p, you need:

h1 + img + p {…}

but it’s a fairly nice alternate way to achieve that effect!

Reply

Simon Hamp

Great article Anna! I like these practical examples. Definitely stuff I will be putting to good use in my designs.

It’s hard trying to be a developer, designer, entrepreneur and doing it all satisfactorily! Maybe I just lack vision?

Keep up the good work :)

Reply

gordee

Really useful tips Anna – thanks!

I’m playing around with the transform:rotate; with images and I think it adds a nice touch to a page but do you have any advice about flowing text around a rotated image? At the moment I’m losing some text ‘behind’ the image once it has been rotated…

scrunchup is great by the way – I will be keeping an eye on it from now on :)

Reply

Andy

Superb article. You have truly inspired me to investigate some of these more obscure CSS properties. The grid issue in particular had me thrown recently. I ended up resolving it with some php and complex div nesting, but wasnt perfect. Wished I’d known about nth-of-type.

Reply

Anton Palitsyn

Great article, Anna. But the lack of IE support is a real deal-breaker for most of the clients we work with.

We (where I work) recently had an internal discussion about rounded corners, for example. Safari, Firefox and Chrome support rounded corners introduced in CSS3, but IE doesn’t… of course. So we thought that for IE we could just use a javascript solution. We don’t want people with REAL browsers downloading extra images and it really is a waste of time creating nested divs just for rounded corners. In worst case scenario, IE users with JS disabled would get regular corners.

But the aim should always be to create a similar experience for the majority of the audience.

Reply

Phil

I’m on my phone so I haven’t been
able to test anything yet.

Do you know if

transform:rotate()

can be used on text elements?

Reply

Anna Debenham

Phil – yes, transform:rotate() can be used on text elements. Take a look at our tag cloud at the top of the page. We’ve got a small clockwise rotation on some of the links, small anticlockwise on others, and nothing on the rest.

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

Reply

shelia

i found your site to be a wealth of relevant information to the subject i have been searching for?
thankyou for you effort and time in prividing this great information..
great site and info
thanks

Reply

Leave a Reply