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

CSS Page Loader Example

Reader Delang was having trouble with the CSS Page Loader concept I posted a while ago. So I went and made up an example page. It's very simple, and it just "fakes" actually loading something. As in, it's not actually loading anything. You will have to refresh the page to reset it.

If you missed it before, the point is that you can make a DIV that covers the entire screen in white with an animated page loader in … Read article

Article

Resizing YouTube Videos with a simple URL hack

Someone over at Digital Inspiration asked the question:

"How can I send a YouTube Video so that when the person receives it there will not be any other videos in the sidebars that can be opened."

There is an awesome solution to this problem. You can link to YouTube videos in such a way that the video will take up the entire browser window with nothing else on it. This is also a nice alternative to the viewing videos in … Read article

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