Scrunchup » practical http://scrunchup.com The Web Magazine for Young Designers and Developers Mon, 30 Jan 2012 16:23:37 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 CSS Nuggets in Scrunchup http://scrunchup.com/article/css-nuggets/ http://scrunchup.com/article/css-nuggets/#comments Sun, 01 Nov 2009 00:03:48 +0000 anna http://scrunchup.com/?p=484
  • The Evolution of a jQuery Plugin
    • ]]>     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.

    Related posts:

    1. The Evolution of a jQuery Plugin

    ]]>     http://scrunchup.com/article/css-nuggets/feed/ 17