Skip to main content
CSS is fun and cool and I like it.
Article

A Fresh Look for CSS-Tricks

Welcome to the new look for CSS-Tricks. I decided it was time to get down to it and give CSS-Tricks a brand new look. I hope you like it. I think it's far nicer in both form and function than the old site. Please, if you have any feedback, suggestions or comments let me know by using the contact form, emailing me, or just leaving a comment.… Read article

Article

A Non-Annoying a:visited Technique

Update: a few years after this was published, it was revealed that the :visited selector could be a security issue. It's now much more limited in what you can do with the selector:

color, background-color, border-*-color, and outline-color and the color parts of the (SVG) fill and stroke properties

I'll leave this article up for posterity though. You can still do use the selector and be non-annoying with it.

As you may know, you can define a style for a:visitedRead article

Article

Set up “Variables” for Colors in CSS

I say "variable" because CSS doesn't natively support real variables. The debate is somewhat heated on whether it should or not. I'm not going to take a stand on that one, but there is a clever little hack bouncing around on how to accomplish about the same thing with one little extra step. For colors, anyway. It is as simple as including a commented section in your CSS such as this:

/* 
   Light Blue: #afd2f0
   Dark Blue: #0f4574
   Bright Red: 
Read article
Article

The Best of CSS-Tricks Tutorials: Ten Free Downloadable Examples!

Welcome to CSS-Tricks! We've been busy trying to bring you tips, techniques, and tutorials about using Cascading Style Sheets. Along the way, we've written up a number of example pages showcasing various techniques. If you are new here, here is a look back at some of those examples:

Apple-Like CSS Menu

How To Set Up Alternate Style Sheets

Images in All Four Corners of a Webpage
Read article

Article

BlogRush: Hip or Hype?

It's a bit too early to tell, but as you may have noticed, I've installed it in the sidebar of this site. My hope is that it turns out to be an awesome service for both readers and webmasters alike.

Here is the deal:

  1. You provide them the name, location, and RSS feed for you blog.
  2. You install the BlogRush widget on your site. Just a bit of javascript like most other widgets
  3. The widget displays headlines from other blogs
Read article
Article

Single-Line vrs. Multi-Line CSS

Steve Smith over at Ordered List has an interesting article up about how he chooses to format his CSS. Basically there are two ways to go about it, Single-Line and Multi-Line, with Multi-Line being the classic approach:

#wrapper {
    width:800px; 
    margin:0 auto;
}

#header {
    height:100px; 
    position:relative;
}

#feature .post {
    width:490px;
    float:left;
}

This is the style that I use and like just fine. Steve's point is that on large CSS files, the selectors become a more difficult to … Read article

Article

An Exploding CSS Menu

By exploding, I sort of mean "the menu blocks appear to expand vertically", but you get the idea. The theory is that upon rollover, you can change the height and offset of an element (or width or any number of other things). If you set things up just right, you can actually have objects that grow and don't really change position. This is a bit like the Hoverbox Menu by Design Meme. This can be a surprising and interesting effect … Read article

Article

Apple iTunes-Like CSS Menu

Developer Mark Alldritt posted a pretty nice bit of code (XCode project) for making nice Apple-Like menus in applications. I thought I would try to replicate this same idea with CSS. It worked out fairly well, check out the screenshot:

The CSS just makes use of a couple of nested unordered lists. The nested list uses a li:hover psuedo class, but I image the same could be done with anchor elements set to display:block; to make it a bit more … Read article

Article

Tag Cloudish Crazy CSS Menu

OK, this is a little cheezy, but it's just intended to be an example of something you can do with CSS. Certainly this could be adapted in any number of different ways to achieve cooler effects. The theory here is to set up a flexible width box with your menu inside. Each menu item is given a unique class. The classes are then defined with font styles and positioning information. Vertical positioning is non-flexible, but horizontal position is by way … Read article