Treehouse: Grow your CSS skills. Land your dream job.

Article Archives

In Search of the Perfect Radius

A bunch of research from Rakesh on the correct values for nested border radii. The conventional wisdom is Inner Radius = Outer Radius – Border Width. This holds true here, but what if that yield a negative value. Also see this tool by Joshua Hibbert.…

All You Need to Know About CSS Transitions

Alex Maccaw with a bunchload of up to date information on CSS transitions. Includes some clever stuff like a trick to avoid transitioning width (not very performant) by instead moving the element and exposing more of it underneath.

I also learned from this that apparently there is an entire new spec for Web Animations.…

Progressive JPGs: A New Best Practice

There are two kinds of JPGs in this world: baseline and progressive. Progressive is just better. Ann Robson shows us why.

Experimenting locally with a throttled bandwidth, an 80K progressive jpeg beats a 5K baseline jpeg (the same image, downsized) to the page in Firefox on Windows. This should blow your mind. Sure, the progressive jpeg’s first pass is low-resolution, but it contains as much information, or more, as the small image. And if you are zoomed out, perhaps on …

Sass and Scattered Media Queries: “It Doesn’t Matter”

Many of us using Sass are writing our media queries "inline" one way or another. There is a fairly common concern that doing this "scatters" media queries throughout our compiled CSS rather than in a combined block as we would likely hand-author it. Isn't that inefficient? SassCast digs in and rounds up all the thinking and research.…

The Bookshelf Updated

These are all books that I own, read, liked, were helpful, and that I recommend.…

The Design Lesson

I like these thoughts by Andy Rutledge:

In graphic design, nothing is what it actually is. Everything other than content is representative of something else.

A line isn't a line, it's a boundary. Don't need a boundary? Or is that boundary already clear by some other means? Don't use a line.

Same goes for boxes, gradients, white space, scale, font, and any other design element there is.…

69 comments

Thank You (2012 Edition)

The annual report: statistics, milestones, old goals and new, and a hearty thanks from me as we head into 2013.
37 comments

5 Use Cases for Icon Fonts

Tim Pietrusky shares some ideas on how to use icon fonts as well as debuts his own new free service for icon font hosting.
40 comments

How To Deal With Vendor Prefixes

There are plenty of different ways to deal with vendor prefixes in CSS as part of your workflow. It depends on if you hand-author CSS or preprocess, and even then there are choices.

ShopTalk Episode 48

#CROSSOVER time with Jen Simmons from The Web Ahead! Jen, Dave and I talk about The Web Behind, the Instagram debacle, getting better, being critical of yourself, and more. Thanks to Lynda.com and InControl for sponsoring.…

Dive Into Flexbox

Greg Smith with a deep look at new/final flexbox (display: flex).…

CodePen PRO

Big day for me and the CodePen team! Many, many months of development have given birth to CodePen PRO, a set of eight brand new features. Things like Collab Mode, where you can literally write code and chat with other people in real time.…

CSS Hypenation

PPK: Hyphenation works!

Eric Meyer on places to avoid it.

In my own experience in the CSS-Tricks v10 redesign, at one point I had hyphenation turned on everywhere and got loads of complaints of certain versions of Firefox over-hyphenating things. Nearly every other sentence had a hyphenated word where it really didn't need to be.…

44 comments

So You’re Going To Start A Huge New Web Project

I was asked this past week to consult for a company embarking on a huge new website redesign. I thought I'd write up some thoughts that I would share with anyone in that position.…

Fastbook

Zuck was all like "HTML5 is too slow" and Sencha is all like "Whatever child take a peep at this."…

17 comments

CSS-Tricks Chronicle IX

A tribunal on the happenings of the the passing approximate fortnight.
34 comments

Slides From Recent Presentations

As you know, slides alone pale in comparison to being there to see a talk, but I still feel they are worth sharing. I've just gotten to posting up my last three prepared talks on SpeakerDeck.…

32 comments

BERG Cloud Buttons

The buttons at BERG Cloud are pretty sweet looking. It's not a hugely big deal, but the way they have created them uses two separate images (not sprited) and two internal spans. In this tutorial we will recreate them with some modern tricks. We'll use no images (more efficient), less markup (more semantic), and function smoother (no javascript controlling states).…

CSS Next

Divya Manian runs through many of the latest stuff coming in CSS. Including several things I'm hearing about for the first time, like specifying unicode range for an @font-face and canvas-as-background.

If you can't get enough, this talk by Tab Atkins (only works in Chrome) covers even more upcoming stuff, including more I'd never heard of. Things like image-interpolation (determines how images scale, like keeping sharp pixel boundaries), setting font-size with ex which is based on x-height (will be awesome …

ShopTalk Episode 46

Another RAPIDFIRE episode where Dave and I just do as many questions as possible. Including: why does Prototype still exist? What is good UX for target="_blank"? and the semantics of <cite>.…

Sauce Mac App

I quite like Browserstack, but Sauce has some pretty compelling features as well, like video recording of your testing sessions. Now Sauce has a native Mac app, which means you can do your old browser / cross platform / device emulation testing right from a dedicated app. …

GitHub’s CSS Performance

Interesting stuff by Jon Rohan on how simplifying HTML (just a little) and simplifying selectors (just a little) made huge impacts on page performance.…

12 comments

Rebuilding CSSLoad.net

In which Timur Gafforov explains how he rebuilt his one-page website for building loading animations in pure CSS.

Bootleg.css

Ryan Seddon recreates most of the Bootstrap JavaScript plugins without JavaScript. The :checked selector is the workhorse, like we've covered here, but Ryan is the OG of checkbox hacks. These things might get more powerful and more semantic if this goes well.…

ShopTalk Episode 45

This week Dave and I were joined by Harry Roberts and where we continue the discussion on IDs, how preprocessors help Harry's framework Inuit.css, visualizing how CSS transforms work, and more. Big thanks to InControl 2013 for sponsoring.…

17 comments

Eye Tracking CSS-Tricks.com

Back in early October, I was at ConvergeFL to give a talk. JD Graffam of Simple Focus and his team were also going to be there giving a workshop on eye tracking. We managed to work it out to do a real eye tracking session for CSS-Tricks.com while we were there.…

13 comments

Fly in Newly Added Content to a Page

Say that for any reason, a new module of content needs to appear on a page. By simply appending that new module into the DOM it will instantly appear. That might be enough of an "entrance" - or it might be too subtle. I'd think when you add new content to a page, you want people to see it. Animation might be the ticket. It technically slows down the entrance of the new content, but the visual effect will certainly …

Viewport Resizer

There are many like it, but this one by Malte Wassermann is a really good one. It goes the extra mile, for example, by injecting the correct meta tags, sending the right user agent, and refreshing the page in its newly resized viewport.…

61 comments

“Bad Code”, Dogmatism, etc.

A wrapup of some recent discussion in the community about the use of classes, descendant selectors, whether using IDs is bad or not, how that relates to OOCSS, and all that jazz.

ShopTalk Episode 44

This week Dave and I were joined by Jeffrey Zeldman for another #CROSSOVER show! (Jeffrey hosts The Big Web Show). We talk about dogmatism in code, web design in isolation, and how A List Apart was maybe the first website ever to use floats for layout. Big thanks to Lynda.com and InControl 2013 for sponsoring. …

14 comments

Writing More Autonomous JavaScript

In which Matt Holt discusses how jQuery plugins can be more adaptable to their environment. He showcases his liveAddress plugin that works with Smarty Streets to do proper address validation as an example. A proper autonomous plugin being: plug-and-play and event-based. He finished up with a call out to simplify address fields.

Women & Tech

We will ask a group of clever women out for coffees to pick their brains and share our conversations. We're not endorsing the obvious; we want to get under the surface of what it's like to be a woman working in tech.

By a cracking team.…

13 comments

CSS-Tricks Chronicle VIII

In which explanations of recent phenomena are laid to bear and the veil of unknown unknowns lifts magnificently.

ShopTalk Episode #43

This week Dave and I were joined by the fellas from the Bizcraft show, Gene Crawford and Carl Smith. #CROSSOVER. We talk about working remotely, client overages, local vs. international SEO, learning as it relates to design, and much more.

Thanks much to InControl 2013 (use SHOPTALKSHOW for $100 off) and Lynda.com (use that link for a free week) for sponsoring.…

46 comments

Responsive Menu Concepts

Tim Pietrusky shares a number of different techniques for handling menus on smaller screens when the large screen version, unaltered, is untenable on the small screen.

ShopTalk Episode #42

Sadly we had some issues recording with Matthew Smith again (our fault). So Dave and I regrouped and did another RAPIDFIRE to catch up. We talk about @extend, image replacement and Google, organizing CSS properties with CSSComb, learning Backbone.js, and lots more. Thanks a bunch to Environments for Humans and Mijingo for sponsoring.…

54 comments

Stairway Navigation (A jQuery Plugin?)

On a whim the other day I thought I'd build out an idea for navigation I had. It's nothing but a visual effect in which the hovered (or active) navigation item becomes the tallest "stair" and other items before and after it step down. It's simple, but it's not something you see very often. Probably for one major reason: you can't select "previous" elements in CSS.…

Ratchet

From the Twitter Bootstrap clan:

Prototype iPhone apps with simple HTML, CSS and JS components.

I wonder if they can make a business out projects like these.…

76 comments

Why Ems?

I've long sized text only in px. Even when it was patently uncool to do so - the days in which smart people cared about the fact that text set in px couldn't be resized in IE 6-8. I've switched over to using ems now. I haven't moved every single project over yet, but my mind has switched. Why? I finally found some compelling reasons that I now grok. …

44 comments

Off Canvas Menu with CSS :target

"Off Canvas" patterns are different ways to approach layout where content on the web isn't just laid out in a vertical column. For instance, navigation could be positioned hidden off the left edge of the "canvas" (visible browser window) and slid in on demand. Anthony Colangelo created jPanelMenu to do just that. Hakim El Hattab's Meny is fancier but similar in what it accomplishes.

They both use JavaScript. I thought it would be fun to try and recreate Anthony's jPanelMenu …