Grow your CSS skills. Land your dream job.

Article Archives

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

13 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 …

15 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 …

13 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 …

18 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; }
80 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 …

51 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 …

5 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 …

8 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 …

34 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

22 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 …

2 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

9 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 …

12 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 …

4 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…
14 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 …

15 comments

Advice on Videos Needed

That's just a little teaser graphic there for ya'll =)

Here is the scoop. I'm all set up to start doing some Video Screencasts for CSS-Tricks. I actually already sort of shot the first one. I am on a Mac, …

9 comments

A Few Quick Weekend Notes

Hide an image in your text!

Reader Erik left a comment linking to an amazing example of what can be done with the CSS3 selection color technique I just posted about. You have to see it to believe it.

A…
47 comments

Overriding The Default Text Selection Color With CSS

One of those cool CSS3 declarations that you can use today is ::selection, which overrides your browser-level or system-level text highlight color with a color of your choosing. At the time of this writing, only Safari and Firefox are

22 comments

Resizeable Images (At Full Resolution!)

Most web browsers make resizing text an easy thing to do*, but not all web browsers will resize images along with that text**. Good web designers know this and go to great lengths to make sure their web layouts don't …

3 comments

Links of Interest

Sub Pixel Problems in CSS


John Resig has an interesting writeup of how different browsers deal with sub-pixel problems. By sub pixel problems he is referring to the rounding of pixels when widths are defined with percentages and the …

10 comments

Links Inside of Larger Clickable Areas

Imagine the common scenario of a large header containing a horizontal menu. You want the entire header area to be clickable as a "home" button, but obviously you need your menu items to be clickable as well.

Let's write the …

7 comments

2007 Thank You’s & Wrap Up

January is coming to a close already so I thought I'd better get this out! I want to do a little wrap up of 2007 and give my thanks where thanks is due.

Thanks to all you readers, subscribers, and…
52 comments

Better Email Links: Featuring CSS Attribute Selectors

What is an CSS Attribute Selector?

CSS provides a way to style elements based specifically on attributes of the link, rather than the type of element alone. For example, you already know that you can style a header element:

h1
4 comments

GridControl: The Bookmarklet

Reader Sansan generously worked up my little GridControl idea into a javascript snippet that was very simple to make into a bookmarklet.

Just drag the link button below up into your bookmark bar, and then click to activate on any …

21 comments

GridControl: A Grid Overlay System for Design Development.

Designing by grid is as old as design itself.

Grids are a fundamental concept to design that transcend trends. Long after the shiny, sans-serify, reflective shadows of web 2.0 are gone, grids will still be here. When we access digital …

7 comments

Results of the “What do you use to write your CSS?” Poll

Wow.

That sums up my reaction to all the responses from this article. You guys really had something to say on this subject!

As of Wednesday evening, there have been 430 votes on the poll and a whopping 123 comments …

5 comments

Links of Interest

Seasonal CSS

I enjoyed this idea by John Leschinski over on Blogging Tips on how to use a little PHP and CSS to make "seasonal CSS". You simply spit out the date right inside the class name of …

18 comments

Roundup of Design Galleries

I have a Happy New Year's gift for all you CSS-Tricks readers! It's a big roundup of all those web design galleries that are so popular these days. I've been wanting do a round of these for a while, and …

9 comments

CSS Skill Level Survey RESULTS

....and the results are in!

As of this morning, 735 people responded to the CSS Skill Level survey. This was really interesting for me because until now I really had no idea what kind of skill level the readers of …

12 comments

Using The Best Ampersand Available

I really like one of the typographic tricks Mark Boulton makes in his "Better Typography" presentation. (Slideshow of the presentation here. Around slide #109) He suggests "using the best ampersand available". This just means that on some typefaces, the …

27 comments

Misconceptions about PNG

1. PNG is great, but I can't use them because they don't work in Internet Explorer.

This is one is almost entirely false. PNGs of any flavor will display in Internet Explorer, even back to some pretty old versions. The …

6 comments

Web Typography Study: The Design Canopy

Web design studio The Design Canopy (update October 2012: Design Canopy link is dead) is a beautifully designed site that makes use of a variety of beautiful web typography techniques. Here are some screen shots from different areas of the …

4 comments

Links of Interest

Table Cloth


Alen Grakalic of CSS Globe has released Tablecloth, a really nice table framework.

 

The Glass Wall


I know I'm almost 6 years late on this one, but I just read "The Glass Wall" for …

15 comments

A Quick and Dirty Way To Randomize an Image

Here is a little trick for randomizing banners on your website. A bit quick and dirty. It needs to be on a PHP page to work.

First off we need to setup a folder on your server where the pictures …

12 comments

Have you ever seen this?

Read Kevin writes in:

A css file will have something like...

background:url(../images/topheader.htm) top left no-repeat;

...where topheader.htm is just an empty file. In this same directory is a jpg named topheader.jpg. How does this work? Why is it done this …

13 comments

Super Simple Two Column Layout

Reader Blake writes in:

What I'm trying to do is a fairly standard 3 section layout. The header needs to be 75 pixels in height and 100% in width. Below that, I need a sidebar section 160px wide and a …

58 comments

ID Your Body For Greater CSS Control and Specificity

Let's say you want to change the color of your links on just your contact page to red. They are blue on every other page, but it just makes sense for them to be red on your contact page (for …

1 comment

Links of Interest

Link Value Factors


Wiep.net has a really interesting and comprehensive look at how the value of links are determined. Of course there is now way to really know, so each factor is valued by a "wisdom of the crowds" approach. …

29 comments

Listless Navigation – Using CSS To Do More With Less

The best part about CSS is that it allows web developers to achieve more with less. What exactly does that mean? Well, for a start, CSS allows developers to:

  • Code much, much less XHTML
  • Separate website formatting from content
  • Control
27 comments

Group Input Needed: Rating Your Level of CSS Skill

Reader Patrick, an IT Software Architect, wrote in with a question I though was really interesting:

For my company, I am developing a scheme where our developers can check which level for a specific knowledge area they are on. For …

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