Grow your CSS skills. Land your dream job.

Article Archives

Start/Stop Slider

A little while back I did a tutorial on a Featured Content Slider. It was neat, but a little limited in customization possibility. The two most requested features were being able to add/remove "panels" and a stop/start button.

I'm …

December 4, 200882 comments

Building an Animated Cartoon Robot with jQuery

Why?

Aside from being a fun exercise, what purpose does something like this have? None that's plainly obvious. Its about as useful as a miniature ship in a bottle. Yet it does have an underlying purpose. It could inspire someone …

December 3, 200855 comments

Links of Interest

Double Background Effect with CSS


Soh Tanaka tackles a CSS layout problem that probably many have you have run into. The idea is double backgrounds, that is, having a centered design where the left side has a repeating design …

December 2, 20087 comments

Creating Tabs That Behave

When creating navigational tabs that use real web text, some positioning issues may arise when that text is resized. The natural flow of a web page when text is resized is to push down. This can push your main content …

December 1, 20086 comments

Prevent iPhone Text Enlargement

The iPhone has a funny way of bumping up the text size on websites when viewing them fairly far "zoomed out". This can be wonderful, as it can help the text be readable while seeing more of the website. It …

November 28, 200811 comments

The Very First Steps After a Fresh WordPress Install

So you have WordPress installed! Congratulations! Now what? I find myself installing WordPress quite often, so I'll share with you my "first steps" after a fresh install to get WordPress set up to my liking. This involves changing settings, resetting …

November 26, 200894 comments

Links of Interest

This weeks Links of Interest post is WordPress-themed, like the rest of this week =)

Web Designer Wall Series

Nick La is in the midst of a series on working with WordPress. So far he has done Installing WordPress Locally

November 25, 20080 comments

What to Ask a New Client Wanting a WordPress Theme

[original photo]

With any new client, before you start choosing technologies, you should be finding out more about them. What they are all about, why they need a website, and what the goals of that site are. But …

November 24, 200832 comments

It’s WordPress Week!

I've been working with WordPress a lot lately. The redesign around has had me moving lots of stuff inside WordPress and using it more and more like a real CMS (video on this). At work lately we've been …

November 23, 200834 comments

Thoughts on IntenseDebate So Far

I've been using IntenseDebate on CSS-Tricks for a little over a week now and a lot of thoughts on it have been stirring around in my head so I thought I'd try to organize them and share.

What is IntenseDebate?

November 21, 200826 comments

Block a Website for Everyone But You

Quick little .htaccess trick today for ya'll. This snippet will redirect any visitor who is not at at one of the provided IP addresses. You can use as many or as few as you would like. This is just a …

November 19, 200817 comments

Jeff Croft on Web Design

I would say my biggest pet peeve related to the industry would be people focusing on technology instead of design, standards instead of users, and validation rather than innovation. Web standards and best practices are noble goals, but all too …

November 18, 200810 comments

Links of Interest

Served

I have no idea how long these "served" sites have been around, but I dig 'em. typographyserved, photographyserved, etc.

 

Intense Debate

Commenting is the best thing about blogs. Really makes a blog into a community rather …

November 18, 20084 comments

Old School Clock with CSS3 and jQuery

Hi everyone, my name is Toby Pitman and Chris has asked me to write a post about a recent experiment that I posted up on the forum a little while ago. It all started when I was looking at the …

November 17, 200820 comments

Guest Post on Writing Better HTML

I was flattered when the guys from Smashing Magazine asked me if I'd like to write an article for them. I thought I would stick to my best subject and write about CSS at first. So I started a draft …

November 13, 200818 comments

Color Fading Menu with jQuery

Editor's note: When I first pushed out this latest redesign for CSS-Tricks, it featured a simple color fading animation in the main navigation. Liam quickly noticed a flaw in the code I was using to do it, where if you…
November 12, 200841 comments

Links of Interest

wp-Hyphenate

Using justified text on the web has long been tricky, as lines could sometimes be rendered with god-awful word spacing. This is due in large part to the fact that rendering engines aren't smart enough by themselves to know …

November 11, 200813 comments

About the CSS-Tricks Redesign

In case you haven't noticed, I've done a bit of a design overhaul around here. I thought I'd take the opportunity to go over some points and features of the new design.

Why?

Because it was fun. Because I'm a …

November 10, 200872 comments

Campana Ceramics on Etsy

Perhaps slightly off-topic today, but I thought you guys might appreciate this. My lifelong friend and college roommate Jeff Campana has recently gotten his MFA in Ceramics and moved to Kentucky to teach it at the University of Louisville. I've …

November 7, 200818 comments

New Poll: How do you keep track of design inspiration?

There is a new poll in the sidebar folks. If you are reading via RSS you'll have to make the jump over to see it. This time I'm asking about how you manage design inspiration you find around the web, …

November 5, 200847 comments

Links of Interest

Prototyping with XHTML

Anders Ramsay and Leah Buley write about how prototyping web projects can be just as (or more) efficient by going straight to XHTML instead of sketching. This might feel like "jumping the gun" to some people, but …

November 4, 20084 comments

High DPI Monitors, Resolution Independance, The Web, and You

We all use 72 DPI as a defacto standard when creating web graphics (actually, "PPI" is the more appropriate acronym but rarely used). This used to be the actual resolution of monitors, but slowly over the years this has ceased …

November 3, 20087 comments

404 Page on a Static Site

Here's a very quick, but very useful trick. You can catch 404 errors (page not found) on a static site and serve up a custom 404 page with a one-liner in your .htaccess file:

ErrorDocument 404 /404.php

The "/404.php" part …

October 29, 200812 comments

Links of Interest

Let's talk about text

Dan Kaufman on online text readability.

First, the more distinguishable each character is from another, the easier it is to read. This is why typefaces with serifs (the little lines on the end of letter …

October 28, 20087 comments

Typeface.js – A sIFR Alternative

My last screencast was on how to use sIFR3, a long proven technique for using non web standard fonts on the web (like we'll be doing until @font-face has wider spread support). I like sIFR, it has been around …

October 27, 200830 comments

Question & Answer Wrap-Up: Quickies

Mackinley Drummond

What's the deal with the "cardboard cutout" CSS-Tricks look?

Nothing metaphorical or especially significant. I just like texture in general. I also wanted to make the site look unique and not fall into any preconceived mold of what …

October 24, 200815 comments

Should You Host Your Clients Websites?

This question was sent in by jamie y.

I have been asked before when talking to potential customers if I could host their site. Right now I have been referring them to a hosting company. But I was wondering …

October 23, 200835 comments

What Are The Benefits of Using a CSS Framework?

Vin Thomas sent in this question through Twitter:

What are the benefits of using a CSS framework? And would you suggest that over starting from scratch?

I was kind of dreading this one. I feel like the proper answer …

October 22, 200832 comments

How Much Should You Charge for a Website?

This question was sent in by Tom Nowell.

Tom said he was a university student and has been building websites for people lately. He says that he does it on his own time so it doesn't cost him anything, …

October 21, 200875 comments

XHTML 1.1 or HTML 4.01?

NOTE: This article is super old. As I write this warning in mid-2013, there is only one DOCTYPE that should be used, the HTML5 <!DOCTYPE html>

Aaron Bazinet originally posted this question in the forums.

I'm going to go ahead …

October 20, 200830 comments

How Would You Recommend a Novice Get Started Using CSS?

This question was sent in by Nikita James.

I get this one a lot and it's surprisingly difficult to answer. The problem is that the question doesn't include the persons background, which will in many ways determine the best …

October 17, 200829 comments

Do You Need To Be a Good Designer AND Coder?

This question was sent in by Greg Arndt.

Is being proficient in both design and coding fairly common in web design or is a person usually better in one rather than the other. I find my trouble is that …

October 16, 200840 comments

Is There Any Dedicated CSS Hacks For Safari or Opera?

This question was sent in by Marcin Lachowski.

Back in the day, there used to be a hack for Safari using the pound (#) sign. Safari didn't like that symbol, so you could declare something like this:

p {
October 15, 200828 comments

Absolute, Relative, Fixed Positioning: How Do They Differ?

Finsta left a question in the forums:

I am fairly new to web design and I could never master the differences in positioning of elements. I know there are absolute, fixed, and relative. Is there any others? Also do they …

October 14, 200839 comments

What Do You Think is the Best Online WYSIWYG Editor?

This question was sent in by Edwin.

To clarify, I believe Edwin is asking about these JavaScript scripts you can use on website which turn regular <textarea>s into more robust editing environments. You'll recognize one in use right here …

October 13, 200828 comments

Next 10 Days: Your Questions, Answered!

For the next two weeks, I'm going to change up the regular programming! I'll be back home in Wisconsin for a friends wedding and to visit family and friends, catch some football games, and have fun! So to makes things …

October 11, 20085 comments

CSS Wishlist: 21 Designer/Developers Sound Off

I asked a bunch of designers what they thought needed to change in CSS.

Wolfgang Bartelme

Designer at Bartelme Design

I'd love to see cross-browser support for gradients, shadows, opacity masks and rounded corners. I guess that would not just …

October 10, 200880 comments

Poll Results: How do you back up your websites?

It's nice to hear so many people have a backup plan! It's probably a much rarer situation that your web host loses your data than it is that your own computer fails. But still... backups can save your ass in …

October 8, 20089 comments

Links of Interest

Automatic Numbering with CSS Counters

The CSS 2.1 spec makes inserting counters into content possible. This has always been possible with ordered lists, but this counter system is much more robust allowing you to insert counters on any type of …

October 7, 20088 comments

Your Go-To Hex Code Color

A few days ago I mused on Twitter:

When I need to pick a hex code color out of thin air, I always pick #ccc

Turns out, lots of folks have their own favorites! It's little mini conversations like this …

October 6, 200837 comments

Modal Login Pages

Wikipedia has a succinct opening sentence about modal windows:

In user interface design, a modal window is a child window which requires the user to interact with it before they can return to operating the parent application, thus preventing …

October 3, 200825 comments

The Usability Problems of useit.com

Jakob Nielsen has written some damn smart things about usability, and his work has probably done great things for the web in general. You hate to beat up on a guy like that, but c'mon, it is beyond ridiculous to …

October 1, 200835 comments

Links of Interest

Browser Differences I Can Live With

For a beautiful web has a nice article on acceptable cross-browser differences. Essentially, progressive enhancement typography stuff and then things like border-radius. I completely agree. I guess that answers this question.

 …

September 30, 20085 comments

Styling Scrollable Areas

The scrollbars on browser windows are not styled by the website itself, or even generally by the browser. They come from the operating system itself.

The desire to customize the style of these scrollbars is strong. When you are starting …

September 28, 200829 comments

Lifestream Website with Sweetcron

I wrote a tutorial for NETTUTS that has been published:

Sweetcron is "The Automated Lifestream Blog Software". It is still in public beta, but is already a very nice blog software package. The beauty of Sweetcron is that new posts …

September 25, 200810 comments

Body Border 2: Fade In with Gradient

A while back I showed you how to create a Body Border with CSS. Basically, we used four fixed position DIV's to ensure all edges of the screen got a border and that the border would sit on top of …

September 24, 200838 comments

Links of Interest

Test Your Color IQ

I would think designers would be better at this than most folks. You can test your color IQ by arranging blocks of color into hue order. There are 20 blocks per row and the hue change …

September 23, 20088 comments

Drag ‘n Drop Cards

In the next week or so we are launching refreshed site for one of our clients at Chatman Design. The client is Beacon Athletics, a company that sells equipment for athletic fields. The homepage is of course of particular importance. …

September 22, 200829 comments

A Business Card Microformats Site

All microformats are are standardized ID and Class names to wrap data in. Really. That's it.

Say you are having a birthday party next week and you are posting about it on the web. That event has a name (Birthday …

September 19, 200818 comments

Will Font Embedding Ever Become A Reality?

I have to admit I don't have my head fully wrapped around this whole font-embedding controversy. At it's root, it comes from us web designers being frustrated by the lack of options font options for our web pages. We want …

September 17, 200815 comments

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