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

Article Archives

27 comments

CSS Pie Timer

Hugo Giraudel shares how he made a "pie timer" in CSS. In his words: It's basically a piece of pie getting bigger and bigger to become a whole circle.
39 comments

Squarespace 6

Squarespace 6 is freshly out. It's really nice and the start of what I hope is a revolution in what building content websites is like.

Prism

A code syntax highlighter by Lea Verou. Small, fast, and designed to work on front end languages. And my favorite, class names that make sense. …

Responsive Email Design

A guide from Campaign Monitor on making emails better on small screens. Some downloadable code at the end.…

63 comments

Use Cases for Multiple Pseudo Elements

I used to do an entire talk on pseudo elements. One of the things I mentioned was that there used to be a CSS3 spec that included "multiple" pseudo elements, but it was removed. That was kind of a bummer, because sometimes just ::before and ::after aren't enough. Why the seemingly arbitrary limitation? …

ShopTalk Episode 26

Dave and I do a RAPIDFIRE show this week where we try and get through as many listener questions as we can in one show. Thanks very much to Crafting Type (a 5 day workshop on building your own typeface in Canada) and Environments for Humans (next upcoming confererence is the online CSS Summit) for sponsoring.…

18 comments

Upcoming Speaking

I'm speaking at a number of events through the end of the year. Come one, come all!…

Seamless iframes Today

I didn't even know there was such a thing as "seamless" iframes. But there is and they are coming (literally an attribute on the iframe element). Essentially they inherit some styles from outside of them, but are otherwise sandboxed. Perfect for something like Disqus eh? Front end engineer Ben Vinegar from Disqus introduces them and shows some smart ways for emulating them now. …

52 comments

Crazy Town Selectors

I recently used this selector as an example in a blog post:

.article #comments ul > li > a.button { /* Crazy town */ }

There was a few comments to the effect that this seemed perfectly reasonable. I think if we step through it backwards the craziness comes out more clearly.…

Sprites and Retina Displays

CSS sprites are often used for small icons. That is exactly what looks bad on retina displays. Maykel Loomans has a way to deal with that that doesn't make our CSS twice as complicated: 1) Make sprite exactly twice as big 2) Swap out background in media query 3) Shrink background-size in half so coordinates are still correct.…

ShopTalk Episode 25

Dave and I were joined by Dan Cederholm and we talk about retrofitting existing sites responsively, getting back into the game, charging for fonts and lots about Dribbble. Thanks to Harvest and Environments for Humans for sponsoring.…

100 comments

Judging CSS / Spotting Bad Code

In a recent Q&A article on Smashing Magazine, a question was asked about how to tell if a developer has written bad CSS. Specifically:

What are the signs that the CSS is sub-optimal, or that the developer hasn’t done a good job? What do you look for in CSS to determine how good or bad it is?

I thought that was an interesting question and I'd expound upon my answer a bit. …

Some things beginners might not know about Sublime Text

Some quick hits from Alain Meier on some of the cool stuff Sublime Text 2 can do. I've been using and loving Sublime as my primary code editor for a while now. His list of A. through G. are my favorite features too.…

Smashing Mag CSS Q&A #2

In this one I answer questions about HTML email, baseline grids, resets, opacity issues, and more.…

6 comments

UI Pattern Ideas: Email Settings

Last week I asked people to participate in some group design thinking around a specific design pattern: email settings. This was the premise:

Imagine there are three events that can happen in a web app that could trigger an email. We want to allow the user to decide whether or not they receive emails when those events happen.

I looked through all the responses and these are the ones I thought were the most interesting and effective. …

37 comments

Beefing Up Dull Text in WebKit

While doing a bit of cross-browser poking around on CodePen, I noticed that the font for the code editors was notably duller and weaker in WebKit browsers (Safari and Chrome) than it was in Firefox or Opera. I quite like Chrome and it was sad to me knowing that I would be spending a lot of time looking at inferior looking text, so I set about looking for solutions.…

51 comments

Set Text on a Circle

There isn't any super simple standardized way to set web type on a circle (or any kind of curve). But it can be done! We'll explore one way to do it here. But be forewarned, we're going to use some CSS3 and JavaScript and not give two hoots about older browsers that don't support some of the required tech. If you're interested in this for a real project, this kind of thing is probably still best served by and image …

ShopTalk Episode 24

Dave and I were joined by David DeSandro where we talk about working in this industry, JavaScript versus CSS3, accessibility, David's various projects, and more. Thanks to Harvest (use code SHOPTALK for 50% off first month) and Environments for Humans for sponsoring. …

43 comments

Media Queries, Sass 3.2, and CodeKit

Media queries are already awesome. Media queries in Sass are already awesome. Media queries in Sass 3.2 are going to be really awesome. This is how you can get CodeKit to start using it.…

59 comments

The Fifth Fourth

Half a decade. That's how old CSS-Tricks turns today. That means it's time for the annual state of the union as we've done on it's 1st, 2nd, 3rd, and 4th birthdays. That reminds me. Obligatory stock art fireworks: …

Kickstarter Funding Closing

As I type, 36 hours left on the Kickstarter project for redesigning this website. Backing the project will get you the least expensive access ever offered to the video library of it all.…

Reader Survey

I'd love to gather some statistical data from ya'll if you have a few seconds. It will help with the big redesign.…

ShopTalk Episode 23

Dave and I are joined by Rogie King where we talk about illustration software, Dribbble, gettin' good and more. This weeks show was sponsored by the Incontrol Conference coming up in Hawaii. (…

37 comments

Podcasts I Like

I do this podcast called ShopTalk Show with Dave Rupert. If you like this blog you'll probably like that show. We bring on guests but it's mostly a listener Q&A show. I've had a few folks ask me what podcasts I listen to, so I thought I'd make a list and attempt to keep it updated.…

ShopTalk Episode 22

This week Dave and I were joined by Jessica Hische and talk a bunch about typography, clients, pricing, fun side projects, and more. Don't miss her new unreal wedding website.…

CSS Regions and Shadow DOM

One of my issues with CSS regions (we explored them a bit here) was the use of empty container divs for layout options. Razvan Caliman talks about fixing that by building out your own Shadow DOM tree. Clever, cutting edge stuff. You can see it work in Chrome Canary.…

18 comments

Transition Delay Delays

A while ago we covered a cool "hover" technique by Doug Neiner where an informational popup was displayed when you hovered over a picture. The first time you hovered over, there was a delay. This was to prevent accidental or fly-by mouse overs, as opposed to intentionally focusing on a particular picture. Subsequent hovers showed the popup immediately. The idea being that you're already in that exploratory mode.

Doug used jQuery for the animations and some fancy dancing to keep …

SouthStreet

A collection of tools by Filament Group to assist with building cross-device websites. For example AjaxInclude which provides a pattern for including non-essential bits of content when the conditions are right. …

57 comments

CodePen Beta

More big news this week: We've launched CodePen into a public beta! It's a site for building stuff from HTML, CSS and JavaScript. Perhaps for yourself to remember later, perhaps to suss out a bug or make a reduced test case, or to show off some cool idea you have. It's all about education and inspiration.…

ShopTalk Episode 21

This week Dave and I were joined by Nicole Sullivan where we talk trolls, OOCSS, tools, and more. Thanks to the CSS Summit for sponsoring (of which all three of us will be presenting). …

Photon

An (incredible) CSS 3D Lighting Engine by Tom Giannattasio. …

28 comments

Notes to an Agency Starting Their First Responsive Web Project

This past week I talked with a design agency who was about to embark upon their first responsive web design project. It sounded rather app-like. They were interested in hearing about my experiences, what to expect, what the process is like or could be like, what the deliverables should be, things to watch out for, and things like that.

This is what we talked about:…

First Sighting: CSS Variables

The very first native browser implementation of CSS variables are here. Stoyan Stefanov shows them off. It will be a long while until we can use them in production but hey, onward and upward!…

Smashing Mag CSS Q&A

My Q&A series on Smashing Magazine lives again! This time monthly-ish and focusing on CSS.…

59 comments

One, Two, or Three

That's how many CSS files should be loaded on any website.…

Just Build Websites

The most common question on ShopTalk Show is "what should I learn next?" to which we always answer "Just build websites!" Now that phrase has a home thanks to some nice folks from the Front End Design Conference. And seriously: learn what you need to build things, not what you think you "should."…

Principles of writing consistent, idiomatic CSS

Nicolas Gallagher shares some advice for formatting, organization, and general choice-making for crafting good CSS (and SCSS).

You are not a human code compiler/compressor, so don't try to be one.…