Grow your CSS skills. Land your dream job.

Article Archives

Group Design Project: List with Functions

Hey folks, let's design something together! I think it will be interesting and fun to try and tackle a simple design pattern as a group.

The Premise

The design pattern we are going to tackle is a list with functions

September 20, 2010248 comments

Transparent Borders with background-clip

Have you ever seen an element on a page with transparent borders? I think Facebook originally popularized it giving birth to lightbox plugins like Facebox. I don't think Facebook sports the look anymore, but it's still rather neat.

You …

September 17, 201059 comments

Tuts+ Marketplace

You already know that Envato runs marketplace sites like ThemeForest, GraphicRiver, and CodeCanyon that help designers and developers get a jumpstart on projects through buying themes, graphics, and code to help out. You also already know that Envato runs tutorial …

September 16, 201032 comments

HTML5 Pack for Illustrator CS5

Via Real World Illustrator:

You can designate certain attributes (i.e., fill, stroke, opacity) as variables right from the Appearance panel in Illustrator. When saved as SVG, developers can easily change the variable definition to "reskin" or modify the art…

September 13, 2010

Need a Font Identified?

Stephen Coles of Typographica has a new Twitter account:

Rapid, human, independent type research. Send an image, get the font name and link. Alternatives too.

WhatTheFont! is cool, but you can't beat professional human identification. Like the story of John …

September 13, 2010

Adding Stroke to Web Text

Fonts on the web are essentially vector based graphics. That's why you can display them at 12px or 120px and they remain crisp and relatively sharp-edged. Vector means that their shape is determined by points and mathematics to describe the …

September 12, 201038 comments

Box Sizing

The "box model" in CSS works like this:

width + padding + border = actual visible/rendered width of box
height + padding + border = actual visible/rendered height of box

It's a little weird, but you get used to it. …

September 10, 201059 comments

Missing Documentation for matrix3d Transforms

Documentation from Sebastian Deutsch on using -webkit-transform with matrix3d, which is rather complicated but can do cool stuff. Also, he used CoffeeScript for the demo (first I'm hearing of it) which looks kinda like SASS for JavaScript.…

September 8, 2010

Ordering CSS3 Properties

When writing CSS3 properties, the modern wisdom is to list the "real" property last and the vendor prefixes first:

.not-a-square { -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; }

Why is this method of ordering properties so commonly taught? Here …

September 7, 201049 comments

How Long Should We Ban IPs?

There are all kinds of reasons IPs get banned. A forums manager might ban an IP because the user at it is spamming. An admin of an email server might also ban IPs for spamming. A web service might ban …

September 3, 201041 comments

BonBon Buttons

These are way above and beyond the level of any other "CSS3 buttons" I've seen. Multiple backgrounds combining gradients and images, uneven border-radius, pseudo elements, HSL coloring, @font-face icons, transitions, box shadows, text shadows, hover and active states... the list …

September 2, 2010

HTML, CSS, and Javascript from the Ground Up

I've done my own The VERY Basics screencast, but this full series from Google, targeted at just-starting-out beginners, would be a good place to go directly after my intro, to take things further along. …

September 1, 2010

Digging Into WordPress, The Book, Version 3

When we first released the book Digging Into WordPress, we thought of some reasons why people might not want to buy it. A big reason is because tech books can go out of date quickly, especially when the subject …

September 1, 201044 comments

Percentage Bugs in WebKit

Using percentage values for certain things can have slightly unexpected results in WebKit based browsers. For instance, if you have a series of columns set in percentage widths with percentage padding, WebKit can calculate their sizing rather strangely.

Update: WebKit…
August 30, 201033 comments

More on CSS Selector Performance

This is a direct link to a PowerPoint file by Steve Souders (in April 2009). Of particular interest is pages 19-33 with all the information on CSS selectors. Evidence points to yes, there are efficiency differences in how you write …

August 29, 2010

CSS is to HTML as a CMS is to… HTML

From the desk of important beginner concepts:

You have a website with 100 pages on it. All 100 pages use the same style.css file. You'd like to change the background color of every single page. You make one adjustment in …

August 28, 201052 comments

WebKit HTML5 Search Inputs

One of the new types of inputs in HTML5 is search.

<input type=search name=s>

It does absolutely nothing in most browsers. It just behaves like a text input. This isn't a problem. The spec doesn't require it to do …

August 25, 201050 comments

Stylebot

Chrome users and CSS wranglers, check this out. It's an extension which adds a "css" link on the right in your URL bar. Click it to open a CSS Edit-like pane on any website where you can click elements and …

August 25, 2010

.net Magazine Awards

The Oscars of web nerdery. I'm nominated for a flatteringly high number of categories! Web personality of the year? You know it.…

August 24, 2010

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 …

August 24, 201054 comments

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 …

August 23, 2010

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 …

August 23, 201038 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
August 22, 201015 comments

Fixing Background “Bleed”

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

August 21, 2010

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 …

August 21, 201037 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 …

August 20, 201097 comments

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 …

August 19, 2010

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 …

August 18, 201044 comments

Touch “slide to unlock” in Mobile Safari

Evan Black took my "slide to unlock" demo and made the actual finger-slider work with Mobile Safari using JavaScript touch events. I updated the demo on this site as well, making it work both on desktop browsers and Mobile Safari …

August 17, 2010

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 …

August 17, 201042 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 …

August 16, 2010232 comments

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

August 15, 2010

HTML5 Templates

Papa bear: HTML5 Boilerplate
Mama bear: HTML5 Reset
Baby bear: HTML5 site template

August 14, 201029 comments

iPhone “slide to unlock” Text in WebKit/CSS3

There are a couple of WebKit specific properties that make giving text a gradient background possible:

-webkit-background-clip: text; -webkit-text-fill-color: transparent;

Those will allow the background of the parent element to become the background of the text inside. I gots to …

August 13, 201052 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.

  1. Ignore sprites entirely. Make every background image its own separate image and reference them as such
August 12, 201037 comments

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 …

August 11, 2010

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

August 11, 201020 comments

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 …

August 10, 2010

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 …

August 10, 2010

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 …

August 10, 201019 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 …

August 9, 201045 comments

Fix Inserted HTML5 Content with HTML5 innerShiv

When working with HTML5 today, many of you know that you'll need to include the "HTML5 shiv" to ensure that CSS will recognize and be able to style those elements in browsers that aren't yet hip to HTML5.

<!--[if IE]>
August 5, 201044 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 …

August 3, 201057 comments

Guidelines for URI Design

This is a guest post by Jacob Gillespie who started an interesting thread on Forrst about this topic. I invited him to post it here, to which he graciously accepted.

Over the past several years, I have taken an interest …

August 2, 2010111 comments

Guest on jQuery Podcast

I had the honor of being on the jQuery Podcast #30 with Ralph Whitbeck and Doug Neiner. We talk about some of the different parts of CSS-Tricks, the jQuery conference, and the difference between designer and developers. We also …

July 30, 20109 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 …

July 29, 201041 comments

Interviewed on Unmatched Style Podcast

The crew from Unmatched Style are the folks that run ConvergeSE which I was lucky enough to attend this year. They are really great folks! While I was down there, I was interviewed by Gene for their podcast.

Thanks to …

July 28, 201018 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?…

July 26, 2010199 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 …

July 21, 201033 comments

Local Previews of Images from File Inputs (fail)

A little while back there was a guest post about Ajax image previews. It's a nice technique but it left myself and a few other commenters thinking: wouldn't it be cool if you didn't have to upload the image …

July 19, 201023 comments

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