Grow your CSS skills. Land your dream job.

Article Archives

The Shapes of CSS

I made a page with the shapes you can make with a single HTML element and CSS. Here is an example:

View Demo   Download Files

The CSS you see on the page is the real CSS rendering that shape, …

February 8, 201160 comments

WebKit Adjacent/General Sibling & Pseudo Class Bug

Good news everyone! This is fixed in both stable releases of the WebKit browser Safari (5.1) and Chrome (13)

It's not every day you come across a solid bug in WebKit, which it seems to me leads the pack in …

February 4, 201117 comments

The New Bulletproof @Font-Face Syntax

I bet a lot of you are using @font-face in your designs. It's probably worth updating to this new syntax, which deals with IE9 and Android better than previous popular methods.…

February 3, 2011

Different Transitions for Hover On / Hover Off

In other words, "Different transitions on mouseenter and mouseleave" as those are the DOM events that happen, but we're not using JavaScript here, we're talking about CSS :hover state and CSS3 transitions. Hover on, some CSS property animates itself …

February 3, 201135 comments

Lessons with Media Queries

Sam Collins with a big writeup on his experience using media queries and comparing them against other mobile optimization techniques. There are lots of good practical tips to use inside your media queries like:

  • Remove all CSS and JavaScript animations
February 1, 2011

Implied Block

Jeff Starr tweeted a simple tip the other day:

If you're floating an inline element, it's treated as block, so no need to include "display: block;" in your stylesheet.

Indeed that is exactly what happens. The spec:

The values …

February 1, 201129 comments

Equal Height Blocks in Rows

A jQuery based solution for equalizing the heights of boxes across the horizontal row they are in. Different rows can have different heights. Originally by Stephen Akins.
January 31, 201179 comments

Ajax Load Container Contents

Use jQuery to replace a section of the page with that same section of the page from a different URL. The trick is to grab the contents of the section, not the section itself.
January 28, 201151 comments

CSS properties that affect type rendering

Tim Brown reminds us that:

When it comes to type rendering on the web, there’s not much web designers can do.

He's talking about literally how well type renders on the screen. There are a handful of properties that have …

January 27, 2011

Five Questions with Zoe Mickley Gillenwater

Zoe is a hero of the modern web. I first heard of her from her book Flexible Web Design, which is a super comprehensive and sensible look at building fluid width websites (and other techniques to make websites take …

January 27, 20118 comments

Unmatched Style Site Review

My buddies at Unmatched Style reviewed this here very site. Make sure to check out the video at the top where Gene and I talk about some of the design decisions and behind the scenes tech. …

January 26, 2011

humans.txt

I kinda like this idea:

It's a TXT file [at the root of your site] that contains information about the different people who have contributed to building the website.

A lot of websites should just have an about page where …

January 25, 2011

Native CSS Variables Closer To Reality

Tab Atkins Jr:

...the time until this starts showing up in nightly builds of Webkit is measurable in months.

and

...this is one of those things that you'll have to wait a decade for before you can reliably use in …

January 25, 2011

Animated Knockout Letters

I was watching some commercial the other day and they had these letters fly in over a black screen and reveal an image beneath them. It was a pretty cool looking effect and it reminded me how WebKit has that …

January 24, 201134 comments

The Shadow DOM

You know the little blue knobby on WebKit range inputs? And all those fancy <video> controls? That stuff is all built with regular ol' (styled) HTML elements, only they are behind a bit of a glass wall. You can see, …

January 20, 2011

Five Questions with Trent Walton

Trent is an easy guy to admire. He works at a cool design agency (they have a triforce for a logo and pull it off). He's got a cool blog that shows off his clean design style with art directed …

January 18, 201111 comments

Rotating Feature Boxes

Three boxes: a main feature box and two sub features. Click on the sub feature boxes and the whole shebang rotates to make that the main feature. The animations happen via CSS3 (the future) and the clicks and class shuffling is done by JavaScript (its forte).
January 17, 201152 comments

The Dark Side of Usability

There is some actual data supporting a counter-intuitive idea I postulated about a while back:

People using the more difficult interfaces tended to perform better, were less fazed by distractions and were found more likely to transfer their skills to …

January 15, 2011

WebKit Gradient Syntax

... is now the same as the Mozilla / Official spec version, which is great because 1) it's easier to write and technically more powerful and 2) yay standards!

It's only in the WebKit nightlies, but I'm sure will be …

January 15, 2011

Five Questions with Nicolas Gallagher

Nicolas has one of those web design blogs that everybody should subscribe to. He explains things with a thoroughness and understanding that we all should strive for. I caught up with Nicolas to ask him some questions about the future …

January 12, 201114 comments

Google Dropping H.264

Google Chrome is dropping support for the video codec H.264. Kinda feels like an Apple vs. Google pissing match as H.264 is so heavily used by Apple and WebM was developed by Google.

For HTML5 video, this is how it …

January 11, 2011

What’s the Difference?

Reader Paul writes in:

What's the difference between .container div { } and div.container { }?

It's great you are asking questions like this Paul. The answer is very important to understanding CSS, because these two selectors select very …

January 10, 201126 comments

Moving Highlight

I recently noticed a subtle and nice effect in the Google Chrome UI. As you mouse over inactive tabs, they light up a bit, but also have a gradient highlight that follows your mouse as you move around on them. …

January 9, 201144 comments

Mother Effing HSL

From the source code:

this site is by Paul Irish
i made it cuz hsla is wayyyy cooler than rgba and more sensible too!

HSL is better than RGB. The reason it isn't used as much (according to me) is …

January 5, 2011

Absolutely Position Element Within a Table Cell

Have you ever wanted to absolutely or relatively position a table cell? Well, I can't help you there. Table cell elements just won't take those position values. And thus, you also can't absolutely position elements within the context of those …

January 4, 201116 comments

Links

Got a couple of slightly-oldie-but-goodies for you:

  • A jQuery plugin by Manos Malihutsakis which allows you do to create custom scrollbars for content areas that do some neat things like move their position and size, style them differently, and use
January 3, 201119 comments

Why use Classes or IDs on the HTML element?

Reader Nicolas writes in:

I'm frequently seeing ID and class specifications to <body> and <html> elements. I'm curious as to why one would do this? If it is unique to either element, then why not specify body or html in …

January 2, 201150 comments

The MoveUp Menu

I got an email quite a while back from Dirk Tucholski who showed me a site called FLOWmarket. He was wondering about how the menu system worked. I thought it looked neat and so set out to build it …

December 30, 201037 comments

Thank You (2010 Edition)

It's been a tradition for years now around here for me to do a year-end wrap-up. It's a great way of reflecting on the year, sharing some random interesting statistics, and most importantly, saying thank you to everyone who comes …

December 25, 201072 comments

Striped and Checkerboard Backgrounds Without Images

Lea Verou with a clever idea on using CSS3 gradients that repeat (by setting background size) to create striped and checkboard backgrounds with no images.…

December 22, 2010

Poll Results: HTML5 on New Projects

Several folks pointed out that this last poll question was worded a bit strangely:

Would you start a new web project today and not use HTML5?

I worded it that way to elicit comments on why a person or organization …

December 22, 201068 comments

Body Borders without Markup

Harry Roberts  with a nice technique on using pseudo elements to create the body border effect without extraneous markup (same idea with extra markup gets you older browser support). Read the comments for some other good suggestions. …

December 21, 2010

Load More Sidebar Content When There Is Room

One classic layout conundrum is how much stuff to put in a sidebar. Ideally the height of the main content area and the sidebar are about the same, to avoid either area having a large blank area which can be …

December 21, 201044 comments

WebKit Image Wipes

It's not "spec," but WebKit browsers support image masks. If you are familiar with Photoshop, they work like that. You declare an image to use as as mask. The black parts of that image hide what it is over, …

December 18, 201041 comments

The Hacktastic Zoom Fix

Nicole Sullivan on forcing elements to create new formatting contexts with display: table-cell and a string of X's as pseudo content to force it full width. …

December 16, 2010

The lean, mean, CSS-reset machine.

There are all kinds of CSS resets, from the ever-popular Meyer reset, to the newfangled HTML5 reset. Do you know what the difference between the different ones are? It's a bit hard to picture, even when looking at and comparing …

December 14, 2010

Using CSS without HTML

Big thanks to Mathias Bynens for the guest post today! I'd call this a bonafide CSS trick!

A few days ago, Chris tweeted:

If we could stack pseudo elements (e.g. :after:after) we could build a whole website with …

December 14, 201080 comments

The Kick Awesome Show

Nate Croft and Jon Longnecker (remember Jon?) from FortySeven Media have a new video podcast they are producing called The Kick Awesome Show. CSS-Tricks was happy to sponsor Episode 13.

These guys sure look like they …

December 12, 201028 comments

CSS Transition Timing

Nice little article with visual demos on the different timing functions for CSS transitions. The progress bar is neat. Also notice the scaling transform on the table of contents. Not sure I love that exact implementation but I like the …

December 9, 2010

New Poll: Would you start a new web project today and not use HTML5?

What do you think folks? I'll hold off on any opinions until we wrap it up. Poll is over in the sidebar.…

December 8, 2010190 comments

The Fifth Position Value

Peter-Paul Koch:

If mobile browsers were to implement position: fixed exactly as the desktop browsers do, many sites with fixed elements would become unusable on mobile.

... I believe it’s time for position: device-fixed.…

December 7, 2010

Text Fade Out / Read More Link

A section of text that fades into the nothingness. But wait, a beacon. A "read more" link shines through the darkness. Click upon it and all text is revealed! CSS3 gradients are used for the text fading and jQuery is used to handle the animated reveal.
December 7, 201036 comments

Three-Sided Border

There are many ways to skin a cat. Also, there are many ways to accomplish the same thing in CSS. The three sided border is one of those things, so we'll look at four different examples that all do it. I would think this kind of thing is a bit confusing as a beginner, so hopefully seeing these different bits of code isolated will make it clearer.
December 6, 201036 comments

Poll Results: Does Your Degree Relate To Your Job?

There is a bit of an idea in our little web design world that "nobody who works on the web went to school for it." At least, I get that feeling. Especially from little stories like these:

I have …

December 2, 201039 comments

You Must Learn JavaScript

It's really unavoidable these days, and that's good because it's awesome. Here are some choice quotes from Kenny Meyers:

Not every company is a Ruby shop. Not every company is a .NET shop. It’s my belief that 99% of the …

December 2, 2010

CSS3 Walking Man

The illustrated backgrounds that slide by with faded edges are the best part.…

December 2, 2010

Design v8

I had some extra time over Thanksgiving so I decided to spend it doing some recreational designing of this site. Here's a few quick notes (I need to get back to content!):

  • Colorful! I think bold colors are fun and
December 2, 2010276 comments

Formatting CSS3

With all the vendor prefixes and all the new complex properties like animations and gradients, it's nice to format them so they are nicely readable. I agree with David DeSandro here that lining up the values makes for nice lookin' …

December 1, 2010

24 Ways 2010

Twenty four great blog posts by top industry peeps in twenty four days. This year it's going print as well.…

December 1, 2010

ImageOptim

Maybe you've heard of things like Pngcrush before which supposedly does an amazing job at optimizing png files, but then when you go check it out it turns out it's this nerdy command line tool with crappy documentation and it …

November 30, 2010

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