Grow your CSS skills. Land your dream job.

Article Archives

29 comments

Smashing Sitemap

I wrote up an article for Smashing Magazine on creating a colorful sitemap with jQuery. It covers all kinds of things, like semantic markup, enhancing with CSS3, building a quick jQuery plugin to avoid repetitive code, and more. Links …

12 comments

Quick Notes

...and the winner of the Learning jQuery book giveaway is:

Nick from Crealities. I'll be in touch, Nick, to get your mailing address. Thanks to everyone who commented to win. Next time I'll try and get more stuff so …

159 comments

Save Money on SSL Certificates with SSLmatic

If any of you have built an eCommerce site for a client, you have probably dealt with buying and installing an SSL certificate for the site. While this isn't required, it's kind of stupid not to. I sure as heck …

31 comments

Using jQuery in Magento

At work we are developing a site for a client using the Magento eCommerce software. This is my first time using it and I'm finding it fairly badass (and it's free!). There is a lot to like about it, which …

38 comments

Select Cuts Off Options In IE (Fix)

I think the problem is fairly obvious here. If you set a static width on the <select> element and the width of the text in the <option> are wider than that, the text gets cut off in IE 6-8. There …

19 comments

How the Quotes On Design JavaScript API Works

I keep hesitating to call it an "API", because I'm pretty sure this isn't quite what "API" has come to mean. But, it is programming that interfaces with an application, so whatever. Last week I introduced the bit of JavaScript …

24 comments

Typographic Grid

This is not a "framework" or anything, I was just screwing around with typography and getting things to line up according to a strict horizontal and vertical grid. It is inspired by the Compose to a Vertical Rhythm article by …

164 comments

PHP for Beginners: Building Your First Simple CMS

The Magic of PHP + MySQL

It's safe to say that nearly every website that's up-to-date these days is using some form of content management system (CMS). While there are a ton of great free options that provide us with …

93 comments

Launch: Are My Sites Up?

Hey folks! Me and Richard have just launched a new site I think many of you will find useful. It's called Are My Sites Up? - I bet you can guess what it does =)

Monitor ALL your sites

The …

41 comments

Thank You (2008 Edition)

Happy New Years Eve everyone! Just taking the opportunity to say thanks to everyone (again) for visiting and being a part of CSS-Tricks. This site has came a long way in one short year, and now is a great time …

3 comments

Links of Interest

Creative Advent Series...

...was pretty cool on Positive Space this year. Twenty-four creatives share their best career advice.

 

Merb and Rails Merging

David Heinemeier Hansson writes:

It’s christmas, baby, and do we have a present for you. …

41 comments

New Poll: What is your CSS framework of choice?

Just tossed a new poll up. This time covering CSS frameworks, which we have never polled before. Kind of curious to see which of them is the most popular, among the people that actually use them. I've only included six …

28 comments

Ho Ho Ho!

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

70 comments

Blurry Background Effect

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 …

15 comments

Site News: iPhone/iPod Stuff

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 …

42 comments

PHP Include from Root

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

<img src="/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, …

20 comments

New Site: Quotes on Design

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 …

9 comments

Links of Interest

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

16 comments

Force Secure Form Submission

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 …

92 comments

New Site: HTML Ipsum

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

7 comments

Links of Interest

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 …

82 comments

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 …

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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