Grow your CSS skills. Land your dream job.

Article Archives

54 comments

New Poll: Multiple JavaScript Libraries

Have you ever tried to debug a site where a beginner web designer has loaded the page with scripts? There's a couple copies of jQuery in various versions, maybe a little Prototype or MooTools thrown in. We can laugh a …

FireQuery

This is a very cool extension for Firebug (add-on for an add-on?) that expands Firebug's capabilities with jQuery. For instance, a built in jQueryify button, showing attached event handlers in the Content / DOM tree view, and highlighting all elements …

38 comments

Intentional Difficulty

Here's some food for thought.

When designing something that you are reasonably certain the user is willing (or forced) to invest time in learning to use proficiently, is it beneficial to intentionally make some tasks just slightly more difficult than …

15 comments

Poll Results: Action Verb Clarity

The latest poll was all about picking the best sentence for a user to perform a specific action on a website. The choices are listed below, sorted from most popular to least:

  • 39% - Select a user and then click

Fixing Background “Bleed”

Mike Harding with a desperately needed fix for when backgrounds "leak" out of elements with borders and border-radius.…

37 comments

Forums Downtime

Quick public service announcement: The CSS-Tricks forums will be unavailable starting now as the undergo awesomeness upgrades. I'll update this post when they are back!

And they are back! Might be a bug here and there. Definitely let me know …

97 comments

Browser Jumping

If you asked me right now, Hey Chris, what's your favorite browser? I wouldn't know what to tell you! I've been a Firefox user primarily over the past few years, but over the last several months my allegiance is no …

Blogging is Still Awesome & Yours Can Kick-Ass

That's the title of my proposed talk for SXSW. I'm rather excited about it. I'm going to be talking a lot about this blog and how I've done things over the years and what has and hasn't been successful for …

44 comments

Getting Started with CakePHP: An Event Manager

The following is a guest post by r0mk1n. I was able to easily follow along and have the demo app up and running on my machine in just a few minutes. It's pretty cool how easy it has become …

42 comments

Show Markup in CSS Comments

Let's say you are creating a CSS file for a modular bit of a webpage. Perhaps you are the type that separates your CSS files into bits like header.css, sidebar.css, footer.css, etc. I just ran across an idea I thought …

232 comments

Design v7

I rolled out a new design this weekend! As usual it's a bit of an aesthetic overhaul (blue!). I'm going to cover the why, the new aspects, and some of the new technology involved. RSS readers, you'll have to …

BetterSource for Safari 5

One of the major bummers about Safari is that the "View Source" view is totally lackluster. No code highlighting, no live links, no line numbers, no refresh. Boooo. The BetterSource extension solves every one of those problems. I do wish

37 comments

CSS Sprites Workflow

When you are coding up a brand new site, I think this is a pretty efficient workflow for how to handle CSS Sprites.…

Wufoo API Contest

We're giving away a friggin' Battle Axe (and $3,000) to the winner of the Wufoo API contest. Cash prizes and Wufoo accounts for life to the second and third place winners as well. Developers, you have until the end of …

20 comments

Double Click in CSS

With the recent proliferation of touch devices, the web designers of the world are losing our beloved mouse pointer. There has been some interesting talk about how we essentially lose the :hover pseudo class in CSS as well as mouseenter, …

Performance of CSS Selectors

The idea here was to compare different styles of writing CSS and see how they affect the page rendering. So using all ID's, using all classes, using OOCSS techniques, etc. I gave some best practices advice on this a little …

Cross-Browser HTML5 Video and Audio

MediaElement.js is a jQuery-based package for allowing us to:

  1. Use the HTML5 elements <videoand <audioand have them work cross-browser (including mobile WebKit)
  2. Deliver a consistent UI for controls
  3. Using only a single format

I'll be using it in …

19 comments

Linkage Returns

Way back when I used to do "Links of Interest" style posts. I'm happy to announce now that 1) There is a new design of this site coming within the next few weeks and 2) Linkage is coming back. I'm …

45 comments

Expanding Images using HTML5’s contenteditable tabindex

HTML5 has a new attribute, contenteditable, which can be applied to any element which allows it to be edited directly in the browser window. Think of text input with a predefined value, but it can literally be any element. Form …

57 comments

Inset Border Effect jQuery Plugin

This is a guest post by Robin Thrift who wrote to me with some demo code for creating this effect. Together we turned it into a jQuery plugin. Enjoy!

I was browsing through a few Flash templates on ActiveDen when …

41 comments

CSS Run-in Display Value

CSS has a value for the display attribute called run-in. It's like this:

h3 { display: run-in; }

The point is to allow a header to run into text below it, without sacrificing semantics or running into the problems you …

199 comments

Dude, you browse with JavaScript on?

Dude, you browse with JavaScript on?

Uhm, yeah, why wouldn't I?

It's totally insecure. Hackers could destroy your computer.

Hackers? What is this 1995? And, no they can't.

They can definitely steal information about you without you knowing.

Like what?…

32 comments

Understanding border-image

The new CSS3 property border-image is a little tricky, but it can allow you to create flexible boxes with custom borders (or drop shadows, if that's your thing) with a single div and a single image. In this article I …

88 comments

Textarea Tricks

Oh, <textarea>'s. How many quirks you posses. Here is a collection of nine things you might want to do related to textareas. Enjoy.…

24 comments

Tips for Web Design that Crosses Cultures

The internet has the potential to put a global audience at your fingertips, but there's far more to reaching across cultural divides than simply putting your website out there and waiting for people to visit it. There are issues to …

55 comments

Google Maps Slider

Google Maps has a JavaScript API now in it's third version. I remember playing with some version of the API back in v2 and thought it was kinda cool but a bit obtuse. For one thing, v3 no longer requires …

79 comments

CSS Content

CSS has a property called content. It can only be used with the pseudo elements :after and :before. It is written like a pseudo selector (with the colon), but it's called a pseudo element because it's not actually selecting anything …

46 comments

Happy Fourth!

Today is America's birthday and also (more importantly) the birthday of CSS-Tricks, which turns 3 today. If it was a human being, that means it would be starting to string together sentences of five words or more, socializing well with …

17 comments

Five Questions with Jeff Starr

I first knew of Jeff through his website Perishable Press, which has long been a fantastic web design resource blog focusing on CSS, WordPress, and a lot of hard-to-find-elsewhere .htaccess stuff along with a good amount of Jeff's personality …

44 comments

Illustrators I Like

If there is one (non-superpower) skill I wish I could acquire without having to spend thousands of hours practicing, it's illustration. I took a bunch of drawing in college but I was never that great and I've let myself go …

61 comments

New Poll: Action Verb Clarity

Let's say you were writing some text-only documentation describing how to do something on a website. The idea was that you came to a point where someone was presented with a list of users and their job was to select …

27 comments

Poll Results: How Many Websites Do You Launch Per Year?

  • 20+ (14%)
  • 10-20 (12%)
  • 5-10 (24%)
  • 2-4 (31%)
  • 1 (13%)
  • 0 (6%)

I'm probably in the 2-4 camp myself, which is the winning choice. I don't freelance, but I do do sites for family and friends once in a while. …

12 comments

On Boagworld

In more podcast news, I got to be on Boagworld as well! I was interviewed by Paul Boag himself in the final interview ever on Boagworld. Bittersweet, isn't it? We talk about CSS-Tricks, CSS3, Flash, and you know, just some …

27 comments

CSS for Blockin’ Stuff

I am not a big proponent of ad blockers. Besides than the fact that this site has ads on it, I generally just don't mind it. I am a big proponent of you doing whatever you want to on your

34 comments

Feature Table Design

I ran into the feature table design from Shopify over on Pattern Tap and I was like DAMN SHOPIFY, that is one sexy table. I was inspired to try and replicate it. First in Photoshop, then in HTML/CSS. Recreating cool …

109 comments

Should you use a template?

I absolutely think that beginner web designers should use templates. And by templates, I mean something that you might buy off ThemeForest or other template selling service. Here are a few reasons why:

  • Tweaking = learning. Templates need to be
54 comments

Photography and CSS

It sure seems like a heck of a lot of web designers are also photographers, doesn't it? And by "photographer", I mean they own a DSLR and heavily consider aesthetics when taking a picture. Why the overlap of interests? Well …

41 comments

Yay for HSLa

Huge sogging longbottoms? High strength low alloy steel? NOPE, we're talking Hue Saturation Lightness (and alpha) and it's a way of declaring color in CSS. It looks like this:

#some-element { background-color: hsla(170, 50%, 45%, 1); }

It is similar …

79 comments

To Wufoo

When I decided to leave my last job, I decided I was going to leave at the beginning of the Summer. I was going to bum around the Summer not doing much, maybe even extend that for a whole year. …

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