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

Article Archives

32 comments

Email Domain Datalist Helper

What if someone signs up for your web app and they type in their email address as susan_smith@gmaoil.com? They don't notice, they never get their confirmation email, they never can log in again, the "forgot password" feature doesn't work, …

33 comments

Conditional Media Query Mixins

Using a @mixin in Sass for your media queries is useful for a variety of reasons. The most important of which is probably the cognitive ease of having the properties and values you are changing right next to the originals. But another reason is that you then gain the ability to "shut off" those media queries if you need to, and there are some perfectly valid reasons to want to do that.

Animating DOM transitions

Say you add some new element to the page and it pushes things around. That can happen instantly, but it helps your brain understand what just happened if the elements that were pushed away animate to their new position. Enter …

13 comments

Well Rounded: Compound Shapes in CSS

The following is a guest post by Parker Bennett. Parker is a bit of a regular around here, known for tackling common problems with unique solutions. This time he's back at it creating complex shapes that have image backgrounds,

Objects in Space

I'm a big fan of the front end architecture thinking here by Andrew Colclough.

I want my approach to solving this user problem to be re-usable, independent, and adaptable to different use cases.…

Flat UI and Forms

Jessica Enders:

The problem is that in the push for simplicity, flat UIs may have gone too far.

Important stuff about the actual usability of forms while the "flat design" trend is perhaps at its peak. I highly suspect that …

13 comments

New T-Shirts! New Store!

Hey hey everybody, I made some new shirts! I wanted some T-Shirts that were more of just the straight CSS-Tricks logo type. So I had some made up. While I was at it, I moved the entire store system (as …

148 comments

Thoughts on GoDaddy buying MediaTemple

Today it was announced that GoDaddy purchased MediaTemple. I've been a long time user of both of them. I thought I'd share my thoughts. Full disclosure: this site is on a free server they give me. I pay for other …

83 comments

Interview Questions and Exercises About CSS

If you're in the position of needing to interview someone about their skill and knowledge about CSS, it can be a little hard to think of things to ask on-the-fly. I thought I'd think up and round up some ideas …

Cargo cult analytics

There is a lot to quote in this great article by Stijn Debrouwere:

There’s nothing like a dashboard full of data and graphs and trend lines to make us feel like grown ups.

... metrics only make sense when you’re …

Introversion and UX

Angela Craven and SuAnne Hall with thoughts, interviews, and research into introversion can be an asset to the UX field. Like the majority of folks in the world of computers, I am introverted and a fairly full-tilt one at that. …

28 comments

Animated Media Queries

If you apply a transition on an element for a particular supported property, and that property ever changes, it will use that transition. If a class name on that element changes and the new class changes that property, it will …

115 comments

Creating a “Meet The Team” Page in WordPress

The following is a guest post by Kevin Leary. I was pretty stoked to get this guest post submission from Kevin because it's my favorite kind of tutorial: practical and detailed.

Almost every custom theme I develop with WordPress …

27 comments

Conical Gradients in CSS

The following is a guest post by Shankar Cabus. Shankar made a really rad color wheel on CodePen and showed it to me. I thought it was an image underneath, because gradients like this aren't something CSS can natively

Solved by Flexbox

Philip Walton looks at common CSS layout issues that were a pain in the butt before Flexbox.…

Focus transition

More cleverness by Nikita Vasilyev. The blue glow outline that surrounds focusable elements when they are in their :focus state "flies" (you have to see it) to the next focusable element. So when you tab around, it is very clear …

CSS Property Usage > Popularity

And the most-used CSS property is... (guess before you click through).

There are some funny ones at the bottom. Hopeful ones like kerning and not-enough-coffee ones like text-underline.…

106 comments

A Complete Guide to the Table Element

The <table></table> element in HTML is used for displaying tabular data. You can think of it as a way to describe and display data that would make sense in spreadsheet software. Essentially: columns and rows. In this article we're going …

Webstock Talks

Webstock is posting talks from this year (as they have in past years) including mine.…

Responsive Elements

Width based media queries are based on the entire browser window. If the browser window is narrower than 800px, do this. If the browser is window is wider than 400px, do this. But that's not always enough. Imagine a desktop …

Client-side full-text search in CSS

Clever idea by François Zaninotto. Add to the searchable element a data-index attribute which contains all the text content of its children smooshed together. Then you can find matches using the [data-index*=""] selector, which is fast. Essentially doubles the DOM …

BeeLine Reader

An attempt to make reading on screens easier though applying color gradients to lines of text. For example, one line of text will fade to red and the next line will start with red, making it easier for your eye …

34 comments

WordPress Fragment Caching Revisited

The following is a guest post by Ryan Burnette. As you'll read below, Ryan was working on a WordPress site that utilized a plugin that used the Instagram API to pull down photos. He was using it in a

110 comments

New Poll: Is There a Line Between Web Apps and Web Sites?

Every once in a while I'll hear people say something along the lines of "well that's for web sites, but it's not really relevant for web apps." That implies there is some kind of line that separates the two. Different …

41 comments

The HTML5 progress Element

The following is a guest post by Pankaj Parashar. Pankaj wrote to me about some pretty cool styled progress elements he created. I asked if he'd be interested in fleshing out the idea into an article about styling them

CSS Animate from/to “auto”

I have no doubt CSS will allow this one day, but right now, you can't animate the width or height of an element from a fixed value to auto. This is particularly useful when the desire is to animate from …