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

Fun with line-height!

The line-height property in CSS controls the space between lines of text. It is often set in a unitless value (e.g. line-height: 1.4;) so that it is proportional to the font-size. It's a vital property for typographic control. Too low and lines are awkwardly squished together; too high and lines are awkwardly far apart. Both inhibit readability. But you probably already know that.

In this article we'll focus on some trickery. If you know (or can figure out) the …

Read Article →

“The Escalator” 

Patrick Stirling of The Guardian shows off some new ads formats they are using. The first two look like they are just using some @media queries to shuffle things around and resize them. I wasn't able to find a live one to look under the hood at though. It would be really neat to see SVG be used for these because 1) you could make it nicely accessible with real text 2) The scale-and-maintain-proportions ability (even text) would seem appealing. 3) SVG-as-<img> has its own viewport, so contained @media queries work could be based on how wide the ad is, not how wide the screen is.

The third, "The Escalator", is a clever one where the whole ad is revealed only as you scroll. Looks like probably some background-attachment: fixed; action.

I always dig it when companies write about their thinking behind new design. Here's another good example of that from this week.

“Of” vs “On” the Web 

Jeremy Keith attempts to make this distinction, using Angular and the concept of "enterprise" software as the catalyst.

"Of the web": Built of fundamental principles of the web. Universal access.

"On the web": The web as a delivery mechanism. The owners dictate use.

Jeremy, who has been banging the progressive enhancement drum since forever, is predictably an "of the web" kinda guy. He only takes issue with the fact that other folks might be forced into working against their principals because of an above-their-head software choice.

I'm slightly less concerned. It actually makes me feel better thinking of things in those terms. While I feel more aligned with the fundamental-principles thinking, I've never held it against any website for dictating how it can be used. There is also gray area here. Every website I've ever worked on had to make choices about what it can feasibly support, because business.

Tour of a Performant and Responsive CSS Only Site

The following is a guest post by Rajoshi Ghosh and Tanmai Gopal of 34 Cross. They emailed me to show me their new website and how performant it was despite having cool features, being visually rich, and responsive. I was like, hey, you should write about it! This is that. Bask in the math.

Read Article →

Official Responsive Images Plugin for WordPress 

Remember Tim Evko's guest post on responsive images in WordPress? Here's some news on that:

  • It's now the official WordPress plugin of the Responsive Images Community Group (RICG). It's on on GitHub here and in the Plugin Directory.
  • It now uses the more appropriate srcset attribute instead of <picture>, since it just does resolution switching.
  • It's endorsed by the WordPress core team, on track to be a "featured plugin" in the next release, and may ultimately end up in core itself.

Pretty cool!

Web Devvy Ways to Practice Gratitude and Empathy

Have you seen THIS IS WATER? It's great. It's about choosing to think differently, especially when frustrated. I think about it all the time. For instance, every time someone cuts me off on the road, I assume they are rushing someone to the hospital. It doesn't always work, but it's nice when it does. And it's not just a trick, it's learning to think differently. …

Read Article →

The CSS at…

There was a fun little trend toward the end of last year where companies were posting their approach to CSS. The tools involved, the methodologies, the thinking, and the data and numbers behind it. Mark Otto kicked it off, best I can tell. I mostly just wanted to post a list of them here, since that's perfect fodder for CSS-Tricks. I ended up slapping it into a table with a few bits of data that are easy to compare, …

Read Article →

Abusing CSS3’s nth-child selector to invent new ones 

Matt Mastracci on combining existing positional selectors in interesting ways to create logic you might not have thought possible. For instance, select all elements only if there are five of them, with:

span:first-child:nth-last-child(5),
span:first-child:nth-last-child(5) ~ span { 
  /* select the span if its BOTH first and 5th from the end, then all spans after it. */
}

The usefulness lies in applying special layout to accommodate unknown markup.

Reminds me of an old CSS parlor trick I saw Estelle Weyl did where she sized columns perfectly without knowing how many there would be.

#136: Moving Things to a CMS as Needed

In this video, I prattle on about a particular "real world" situation I was in involving how I handle the CodePen Meetups page.

At the very beginning days of CodePen Meetups, we just had a single one planned. It was to be the first ever CodePen Meetup in Austin, Texas. So I made a page for it as part of the main CodePen website (a Rails project) at the URL /meetups/. There, I got to design it however I wanted. …

Watch Video →

More Blog Posts →