Grow your CSS skills. Land your dream job.

Article Archives

Fine Use for the Adjacent Sibling (“+”) Selector

My friend Richard came to me with an interesting problem yesterday. He was using some API of some kind that was returning to him a big list of companies. Each company had text, and most (but not all) also …

April 18, 200814 comments

New Poll: What is your Javascript library of choice?

I know I've been talking a lot about jQuery lately, but I promise I won't stray too far off the CSS path. I would like to find out what everyone else's favorite Javascript libraries, hence the new poll, "What is …

April 17, 200844 comments

Now With Archives!

There were pretty much no archives to speak of on CSS-Tricks before. You could browse by month and year (and I'll probably leave that alone for now), but that was a really crappy way to peruse the archives. Thanks to …

April 16, 20082 comments

Some Updated and Improved Examples

We are all learning and becoming better web designers and developers all the time. At least I hope we are, that is the whole point of this site! It is always a good idea to re-visit things from time to …

April 16, 200813 comments

Links of Interest

Clearing absolutely positioned elements fixes IE bug

The actual title of the article is "CSS - An Absolute Mess", but I retitled it here to something less linkbaity and more accurate. Nonetheless, a valid fix for something IE …

April 15, 20083 comments

Fade-in Spoiler Revealer

jQuery has some really simple built in features for "fading in" and "fading out" different page elements. I thought we could exploit some of those functions for a really simple Spoiler Revealer.

View DemoDownload Files

Between some …

April 14, 200825 comments

Indent CSS Changes You Are Unsure About

Sometimes the simplest little things can save you major headaches later. The kind of headache I am talking about here is when you make a change to a CSS file only to find out days later that it broke something …

April 11, 200835 comments

Learning jQuery: Fading Menu – Replacing Content

Update January 2013: Best practice for this kind of this is detailed here. Update May 2010: I'm considering this article deprecated. I have an updated article here, which covers this same type of material only with more…
April 9, 200833 comments

Links of Interest

The Amazing Color Label Wheel


Holy relative percentage positioning! This was built from asking people how they would describe thousands of colors.

 

CSS News


One of those headline aggregator style sites (like POPurls) only for just CSS stuff. …

April 8, 20082 comments

Poll Results: Is CSS Coding Part of Your Career?

At the time of this writing, the poll is showing that the largest percentage of you (34%) have careers in which CSS plays a huge part (75%-100% of it). I definitely fit into that category myself.

I really wasn't sure …

April 7, 20081 comment

CSS Off Entry

I mentioned CSS Off earlier in the week, but I wasn't sure if I was going to have time this weekend to participate. As fate would have it, I happened to be browsing my feeds late Friday night and saw …

April 6, 200812 comments

Designing the Digg Header: How To & Download

The design of Digg is full of smart ideas. The site identity is strong but doesn't take up too much valuable vertical space. Navigation is compacted with the use of simple drop-down menus. Important things like subscribing, searching and account …

April 4, 200840 comments

Multiple Backgrounds: Left Half and Right Half

The introduction of the brand-new CSS-Tricks forums the last few days has been great! It was worried it would take a while for it to catch on, but the last few days there have been about 150 posts in lots …

April 3, 200818 comments

Links of Interest

Just how many classes can you apply to a single element?

Kilian Valkhof finds out with some javascript. Opera and Safari, 4000ish. FF and IE7, 2000ish. So the answer:

Way more than we’ll ever need.

 

Web Design Rap…
April 2, 20084 comments

Forums, Downloads & Header – Oh My!

I rolled out a slightly different new header for the site last night, and with it came some new navigational tabs. Here is a little overview of what's going on:

Forums

There are forums now! They are brand-spankin' new, so …

April 1, 200810 comments

Learning jQuery: Revealing Photo Slider

So in my journey to to learn jQuery, I'm trying to learn to do some things that CSS can already do but that jQuery can do "sexier". Jonathan Snook has an article up "Content Overlay with CSS" in …

March 31, 200826 comments

Learning jQuery: A Roundup Roundup

I've been really getting into this jQuery phenomenon lately. jQuery is tightly tied to CSS, so if you are already comfortable with CSS and are looking for ways to expand your possibilities, jQuery is the place to be. You can …

March 30, 200819 comments

Javascript Page Slider Roundup

"Page Sliders" are a bit like Tabbed Boxes, only the content appears to slide by instead of be instantly replaced. This is a pretty nice effect and like tabbed boxes, it can help you get a lot of content …

March 27, 20089 comments

Links of Interest

960 Grid System


Nathan Smith has launched a CSS framework called the 960 Grid System. The theory is that 960 pixels is a great number for a fixed width site, because it fits nicely onto a 1024px screen and …

March 26, 200811 comments

Group Interview

I recently participated in a group interview about clients, design, and freelancing in general over on Vandelay Website Design.

READ THE INTERVIEW

The rest of the participants were:
Alen Grakalic of CSS Globe
John Phillips of Freelance Folder
David Airey

March 25, 20086 comments

Nine Techniques for CSS Image Replacement

CSS image replacement is a technique of replacing a text element (usually a header tag) with an image. An example of this would be including a logo on a page. You may want to use a <h1> tag and …

March 24, 200865 comments

Using CSS for Image Borders

The following is a Guest Post written by Volkan Görgülü. Thanks Volkan!

The picture used in this article, The Solitude of the Fisherman, is from Daniel Cheong. I have come across with this picture in an article

March 20, 200812 comments

Site News

Registration Now Available

For those of you who like to leave comments here on CSS-Tricks (Thanks, by the way!), I wanted to make it easier for you. You can now register for an account. Then when you are logged …

March 19, 200813 comments

Links of Interest

IzzyMenu


This is another one of those automatic menu builder sites. I think this one is pretty nice though. Lots of customizable features, you can save your menus there, you can download them and they come nicely packaged up with …

March 18, 20085 comments

New Poll: Is CSS Part of Your Career?

I am interested to know how many of you CSS-Tricks readers actually write CSS as part of their job or career.

  • 0% - You don't do anything CSS related at work
  • 1-25% - You use CSS a little bit but
March 17, 200811 comments

How To: Create a Tabbed Box with YUI Tabs

Tabbed boxes are all the rage these days. Check out the "Explore" section on MSNBC, or the Premium News Theme to see how they can be used in a blog setting. I think it's for a good reason. It …

March 16, 200826 comments

Rethinking CSS Image Replacement

When I say CSS image replacement, I mean taking a page element that isn't normally an image and turning it into an image. This is a very common trick and popular because of it's semantic meaningfulness and SEO …

March 13, 200836 comments

Starry Night: Incredible 3D Background Effect with Parallax

If you haven't seen the mysteriously cool Silverback app teaser page you should check it out. The Gorilla was designed by Jon Hicks (yep! the same site with the cool body-border technique). Make sure you resize your browser around …

March 12, 200828 comments

Links of Interest

Challenge: CSS Globe vs. CSS-Tricks


Someone started an XHTML Challenge between CSS-Tricks and CSS Globe. At the time it was started I was working on that new subscribe section and there was a screwed up tag causing the site …

March 11, 20084 comments

Quick Reminder About File Paths

Whenever I have a problem with an image "not showing up" on a web page, the first thing I do is take a close look at the file path that references that image. If that file path is relative (meaning …

March 10, 200812 comments

Trying OpenID… and My Other WordPress Plugins

I get the question from time to time what plugins I use on this blog. Since I just got through installing a brand new one (Open ID), I thought this might be a good time to run through the list.…

March 8, 200813 comments

Poll Results: What CSS Reset Do You Use?

As of late yesterday here are the results:

I wasn't surprised to see the Meyer's reset in the lead. It is very popular, thoughtful, and effective. I was surprised to "What's a CSS Reset?" at a narrow second place. In …

March 6, 200813 comments

The Different Techniques for Applying the PNG Hack

Alpha-transparent PNG's, ("PNG-24" for those of you saving out of Photoshop) are an amazing thing for web designers. We can make a button with a drop shadow on it and it will multiply that shadow onto whatever happens to be …

March 5, 200815 comments

Links of Interest

Photoshop Cryptoquote Challenge


This has nothing to do with CSS, but I thought it might be a fun little for any Photoshop gurus out there. Someone spraypainted a message on the side of one of my neighbor's houses. Before I …

March 4, 200813 comments

CSS-Tricks Finally Gets A Print Stylesheet

This is way past due...but it's finally here: a print stylesheet!

I'll start by showing you the entire stylesheet, then I'll explain a little bit about what I was thinking.

body { font-family: Georgia, serif; background: none; color: black; }
March 3, 200818 comments

Equidistant Objects with CSS

Creating a horizontal row of objects that are equidistant from each other is another one of those things in web design that is much more difficult than it should be. This can be a very useful thing to do, especially …

March 1, 200880 comments

Color Rendering Difference: Firefox vs. Safari

CSS-Tricks reader Norm writes in to ask me about a problem he is having with color on a new site he is designing:

I have a graphical question about my test site. The header and main page background are …

February 28, 200851 comments

Links of Interest

CSS Rand


I was kind of confused when I first went to CSS Rand, because it just looked like some random nice website (not a gallery) then I figured it out... It's a new kind of design gallery, where …

February 27, 20085 comments

CSS-Tricks Screencasts now on iTunes

It took a little while, but the CSS-Tricks Video Screencasts are now listed properly in the iTunes podcast directory.

Even cooler, you can just straight up search for "CSS" in the iTunes search area and it comes up as one …

February 23, 20088 comments

Techniques for Fighting Image Theft

There are a few.

1. Redirect links from external sites to your "DON'T STEAL" graphic

There are numerous tutorials on how to do this around the web, but I most recently read about it on David Airey's article "How

February 21, 200834 comments

New Poll: What Kind of CSS Reset Do You Use?

Different browsers have different default settings for page elements. In an effort to keep web pages looking as consistent as possible between browsers, many web designers use what is commonly referred to as a CSS reset to wipe away these …

February 20, 200822 comments

Links of Interest

C.S.I in XHTML and CSS coding.


Dor Dan has a nice article on keeping both your HTML and CSS clean with a consistent system of Comments, Spacing, and Indents. Now that's some beautiful code.

 

Detailed Look at…
February 19, 20089 comments

Using Weather Data to Change Your Website’s Appearance through PHP and CSS

This article is co-authored by David Walsh of
The David Walsh Blog :: PHP, CSS, MooTools, and Everything Else

UPDATE: This post was updated on April 30th, 2008 to account for a minor change in how Yahoo! was serving up …

February 16, 200892 comments

Poll Results: The Responsibility of Mobile Web Design

This is has been an interesting poll! It's almost a dead-heat. Through the course of it, it has actually gone back and forth for the lead a bit.

The winner by a nose: It is the MOBILE DEVICES job to

February 14, 20082 comments

Designing the DZone Cross-Promotional Footer

DZone has recently rolled out a footer on their new "Zones" that I designed/coded for them. If you want to check it out live, you can see it at any of the zones like the CSS Zone. I thought …

February 12, 20089 comments

CSS-Tricks Sporting a Freshened Up Design

Did a little pre-spring-cleaning around here today

  • Lightened up the whole feel with the lighter textured background.
  • Added a link to the new videos section.
  • Make the subscribe section more obvious, and included the new video feed.

Really, it's not …

February 10, 200812 comments

Links of Interest

Arial or Helvetica?


Once there was a typeface called Helvetica. It was extremely popular. Later came a software company called Microsoft. Can you tell the difference between the original and the rip-off in these ten examples?

 

Blind Text Generator…
February 9, 20084 comments

How To Set Up and Host A Publicly-Accessible File on Amazon S3 (Simple Storage Service)

One of the many good suggestions I got for hosting these video files was to use the Amazon S3 (Simple Storage Service). I had heard about this before, but didn't know much about it. Nothing like trial by fire to …

February 8, 200811 comments

CSS-Tricks Video Screencasts Now Available

Alright I'm just gonna publish the link and see how it goes...
CSS-Tricks Video Screencasts

DISCLAIMER: These are my very first screencasts ever, so the quality is sort of rough, folks. I am going to keep at it though

February 7, 200823 comments

Prevent Menu “Stepdown”

If you are familiar with the concepts of "floats", you know that if you float a page element to the left, that the next page element will move up next to that element on the right, if possible. But have …

February 6, 200814 comments

*May or may not contain any actual "CSS" or "Tricks".