Article Archives

.wishing {
you: happy-holidays !important;
}

Have a lovely day everyone! It’s definitely a white Christmas here in Portland. I plan to do a recap of the year next week and tell everyone just how thankful I am for this …

As always, fascinating results. I am part of the very smallest segment, in that I use an image-based social bookmarking service, ScrnShots, to keep track of a lot of my design inspiration. I’m not a nut about it though, …

jQuery 1.3 Beta

If you want to help test, all the details are here. Many rewrites of core areas like the selector engine and DOM Manipulation (append/prepend/before/after).

Absolute Columns

Dan Rubin hits the nail on the head with …

When setting a background image on a page element with CSS, you can control its position with “background-position”, but an often-forgotten trick is that you can control its position behavior with “background-attachment”.

Utilizing two images, we can pull off a …

Few quick announcements!

iPhone/iPod Version of Screencast

Many, many people asked for this. I resisted a long time mostly since I thought seeing them on such a small screen would be useless. But I concede that listening and sort-of seeing …

When I reference images, I almost always do something like this:

<img src="http://cdn.css-tricks.com/images/logo.png" alt="logo" />

That is a relative file path, but it begins at the root public directory of the site. That way it always references the same location, …

Here’s another new site from me. I love reading books about design, so I’ve made a little site to help immortalize the great little quotes I come across. There aren’t a ton of them up there yet, but I plan …

Best Presentations from Web Design Conferences in 2008

Chris Spooner has put together a little roundup of videos from some of the best web design conferences this soon-to-be-past year. Makes me jealous! I’ve never once been to a web conference. …

I was working with a client eCommerce site the other day, and a really concerning problem popped up. On the very last step of checkout, when you press the very final button to submit the order, the browser would pop …

There are a number of Lorem Ipsum sites that I like. I even have a dashboard widget for generating it. But none of them does what I REALLY want, which is to give me the Latin text already in HTML …

DD_belatedPNG

Yet another PNG fix for IE 6, but this time with all our dreams come true. Positioning, repeating, and none of the link-blocking z-index madness. How does it work? Apparently the proprietary Microsoft VML language does a much …

Ian Pitts sent me this trick a while back and I’m just getting around to publishing it. Thank Ian!

Google Analytics (intro video here) is powerful stuff, but one notable lacking feature is data on outgoing clicks. …

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 …

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 …

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 …

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 …

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 …

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 …

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…

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

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 …

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

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 …

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 …

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 …

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 …

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 …

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 …

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 …

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 …

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 …

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

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 …

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 …

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 …

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 …

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 …

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 …

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 …

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 …

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

Aaron Bazinet originally posted this question in the forums.

I’m going to go ahead and say right away I’m not an expert on this subject, but I do find it quite interesting. The first line of every page we design …

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 …

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 …

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

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 …

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 …

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 …

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 …

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 …