Article Archives

UPDATE: CSS-Tricks.com is now responsive, so no more separate mobile version of the site. Not that I’m against that, I’m just a fan of responsive for this site.

There is now a mobile version of CSS-Tricks, thanks to the …

The Website Change Request Form has been a running topic around here for a little while and I’m gonna run with that for a little while. We are not going to rehash all the HTML and JavaScript that makes the …

I’ve had articles in several recent issues of .net magazine. I thought I’d snap some pics for posterity.

• Issue 186: jQuery / Building Dynamic Forms (part 1)
• Issue 187: jQuery / Building Dynamic Forms (part 2)
• Issue 189:

…

If you only have a single word or a single line of text, there is a clever way to vertically center it in a block with CSS. You set the line-height of that text to be equal to the height…

At work I recently rolled out a new system for one of our clients, the Rick Wilcox Magic Theater. Their site is largely informational about them and their show, and a portal for selling tickets to their show online. …

I will be speaking at my first conference ever! I’m really looking forward to it and I have already started preparing my presentation. It’s going to be focused on jQuery and using it to accomplish things that CSS does poorly, …

This damn juicy CSS trick has been around for a while now, but I wanted to make a special post sharing it again to spread the good word.

Often we think of inline styles as a way to override styles …

I bet a lot of us around here use Firefox as our main browser. I really like Firefox. I think the interface is pretty nice, but what put its so far ahead of the other browsers for me is the …

Almost 7,000 people have weighed in on this poll so far, making it the biggest yet! The question was:

If CSS2 and CSS3 was fully supported in all browsers tomorrow, what would you be MOST excited about?

As always, very …

Last month I wrote about how I wished when clients had a change request for their site, they would treat me like a six-year-old. The point was, those change requests are often far too vague which leads to confusion …

I’ve been friends with Richard for years. In between sending funny links back and forth to each other, we’ve been able to kick out a few projects (Are My Sites Up, LyricSift). I design, he develops. I’ve …

In looking back through some emails, I found an email from Soh in October 2008. It was a very nice message introducing himself, saying he has enjoyed CSS-Tricks, and that he was just getting into blogging and if I had …

I first met Jeff when he emailed me in early March of this year introducing himself as a High School Web Design Teacher at Damascus High in Maryland. He told me he makes his advanced students subscribe to this blog! …

Collis Ta’eed is the kind of guy that every web designer with a little entrepreneurial spirit wants to be. He is a trend-setting designer who’s work is seen, used, and interacted with by millions of people a day on Envato’s…

If you are like me and commonly find yourself Googling around for JavaScript solutions to coding problems, there is a good chance you’ve come across James Padolsey’s Blog. James is a prolific blogger with a clear teaching style I …

I’ve gotten to be interviewed a few times, but I’ve always wanted to be the interviewer myself. I’ve finally made that happen. Next week on CSS-Tricks I’m going to be posting interviews all week long. Here’s the plan:

• Monday: a

…

David Berlow commenting on font rendering abilities in the browser:

…it’s not treated beyond a fourth-grader’s crayoning abilities; no shadows, in-lines, outlines, fill variety, twisting, perspective, set on a bouncing line, or opaque over another object, much less in motion. …

CSS has a property called vertical align. It can be a bit confusing when you first learn about it, so I thought we could go through it’s use a little bit. The basic usage is like this:

img {
…

When it comes to setting the size of type in CSS, you have lots of options. You can apply a “keyword”, like p { font-size: small; } or a numerical value. When using a value, you need to declare a …

Hey everybody, I have some news. I’ve alluded to it a few times in the past, but now I’m officially saying it: I’m writing a book. I am not going to share too much detail about it now, but here …

I mused on Twitter recently:

CSS is like chess. You can learn the basics in a day and spend a lifetime mastering it.

I quickly thought it would be fun to collect other people’s ideas on what CSS is like. …

Getting better at anything takes considerable time and effort. Feel like you are in a rut with progressing your web design skill? Try this:

1. Find a web site you really love the design of. Maybe browse a design gallery.

…

I am not an SEO expert. I said not long ago that I believe it’s mostly just a matter of common sense. However, I do find the subject interesting. Being the #1 result for a search term is a …

A while back I did a little demo on parallax backgrounds. As a quick review, parallax is that effect where there are different layers of backgrounds that all move at a different rate creating a very unique 3D effect (think …

I used to work in pre-press before I got into web design. I worked at three different somewhat large printing shops. Pre-press is the department that is in between clients (designers) files and actually getting those files to press. It …

One of our eCommerce clients at work had a number of products they wanted to put on special to promote on the web. Each product has a different “reason” why it’s on special. Perhaps it’s discontinued, perhaps its special pricing, …

We’ve been chugging along over at Are My Sites Up keeping things running smoothly and working on new features for ya’ll. First and foremost, we were closed for new registrations for a while there while we worked out some growth …

I had a unique programming challenge the other day that I thought I’d share here. It’s rather specific and probably won’t be of huge general use, but hey, it might be interesting.

The idea was to have 160 characters become …

It was time for another design refresh! The best part about this one, for me, was that all the work I did last time made this one very easy to do.

As usual, it’s not extremely drastic. Evolutionary, not …

I had to build a quiz for a client a little while ago. A few multiple choice questions, submit button, and it grades the quiz and tells you how you did. It’s kinda dorky and really really simple PHP, but …

I thought I would take a crack at a couple of common multi-column fluid-width layout styles that are notoriously quirky with CSS.

One way to accomplish a multi-column fluid layout is to set the columns with percentages. For example, floating …

…is now up on Smashing Magazine. I answer questions about equidistant spacing on elements, CSS image/font replacement, “max sides” on images, and a bunch of “quickfire questions”.…

Devthought had a little CSS tip the other day that is definitely worth repeating. It’s not new, it’s just an important little trick to know.

And here it is:

img { -ms-interpolation-mode: bicubic; }

If you use width or …

I received a question the other day from someone who was curious how I handle multiple different page styles and layouts across one site with CSS. It’s a very common scenario I think. For example, you have a homepage that …

…and you think it’s a bad idea

You think it’s a bad business move on their part. It’s going to cost them a lot of money and you don’t think it has a snowballs chance in hell of making any …

It’s a fact of CSS life that the ‘border’ of any block level element gets factored into it’s final box size for layout. That means that if you add a border on a hover to an element that didn’t already …

Tabbed areas are lovely, but when you start getting to more than 3 or 4 different tabs, they start to get a little crowded and it makes sense to provide alternative navigation of them. I think it makes sense to …

For the last two book giveaways I did, I promised I would pick a winner totally at random from the comments. There were hundreds of comments, so I wasn’t about to write the numbers on little bits of paper and …

Congratulations to itaniumdesign, the randomly selected winner of the Joomla! Template Design book contest. These last few book giveaways have been fun. Next time I do it I’ll try to get more stuff to give away so everyone has …

Links of Interest aren’t “back”, but I have some cool ones I really wanted to share, I’ll probably do this from time to time, but just not on a planned schedule like they were.

LyricSift

Richard had a neat little …

Remote Linking is what I call it when a single anchor link has multiple clickable areas in different locations. It can be used for pretty neat effects and requires nothing but CSS.

It’s not a brand new idea and in …

So we have Forums here on CSS-Tricks which are a lovely place to get and give help about web design. Now that I’ve posted almost 500 posts there, I think I have a pretty good feel for what kind of …

There are lots of dropdown menus already out there. I’m not really trying to reinvent the wheel here, but I wanted to try to do something slightly different by making them as dead simple as possible. Very stripped down code …

I get asked from time to time to do more stuff about Joomla. Joomla just happens to be one of those things I know very little about. I’ve never worked with it and I haven’t run across the need …

DISCLAIMER: I don’t “really” know anything about SEO. What I do know is the folks at Google and other big search engines are just human beings like us who have created and constantly tweak the search algorithms. Their goal is …

I didn’t get anything prepared for today, but my latest installment of “Ask Smashing Magazine” just went out, and it’s full of good stuff!

• Same-page smooth scrolling links
• Dynamic Width List Images
• DIVs of Equal Height
• Aggregating RSS

…

UPDATE: Script & Style is closed. David and I just moved on to other things.
The New:

The Old:

(I forgot to take a screenshot before I changed it! So, this is the old Photoshop document)…

More Reason to Visit

Eric Meyer said today in “Wanted: Layout System“:

Turning a bunch of divs or list items or whatever into table-role boxes is no better than just using table markup in the first place, and it’s arguably worse. Using …

The full questions is:

If CSS2 and CSS3 was fully supported in all browsers tomorrow, what would you be MOST excited about?

It’s so tough to decide, since we want it all and we want it now! RSS readers will …

We’ve been down the jQuery “sliders” path a few times before. Once for the Auto-Playing Featured Content Slider and again for the Start/Stop slider.

Many of the concepts presented in those tutorials are the same with this slider, so …