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

Article Archives

42 comments

When users leave the search box empty…

The following is a guest post by Brin Wilson of WinningWP. Brin wrote to me wanting to do a little advertising for his site. I of course would happily accept that, but even better, since Brin is a tech writer anyway, why not write a guest post. That's always a win-win, and since he had a good idea anyway... take it away Brin!

If you're reading this, my guess is you're someone who cares about user experience. …

10 comments

The Most Common Questions Asked on ShopTalk

As I type this, Dave Rupert and I have recorded 137 episodes of ShopTalk. ShopTalk is primarily a question-and-answer style show. Dave's early idea was to have it be loosely modeled after the most popular NPR show of all time, Car Talk, which is mostly Q&A. We have guests, and we talk a bit about the guest so people have a sense of who they are, but it's not exactly an interview show.

We solicit people's questions on …

52 comments

Responsive Images: If you’re just changing resolutions, use srcset.

If you're implementing responsive images (different images in HTML for different situations) and all you are doing is switching between different versions of the same image (the vast majority of usage), all you need is the srcset attribute on the <img />. Gaze upon this easy syntax:…

28 comments

Thoughts on Pagination

I've had some disparate thoughts regarding pagination lately, so I thought I'd attempt to organize them in a post. That's how blogging works right? …

24 comments

The Game of Life

It's not really a "game" - but more like a set of rules by mathematician John Horton Conway. Imagine a grid of cells, like a spreadsheet or a <table></table>. Each cell is either alive or dead. "Rounds" pass one by one. In each round, there are rules on whether a live cell should continue to live or die, and if a dead cell should continue to be dead or become alive.…

Don’t use `picture` (most of the time)

Jason Grigsby:

Unless you're solving for art direction, you don't need to the element. In fact, you're likely doing your users a disservice by using the <picture> element.

I'd wager that the majority of "responsive images" use is serving appropriately sized images for the situation. The situation = the size the image will be displayed at, screen pixel density, and bandwidth. That's exactly what <img sizes="" srcset=""> is best at. It does magical stuff that the browser can optimize for, …

59 comments

Build Web Layouts Easily with Susy

I've been coming around to the idea of using Susy (a Sass add-on for grids) lately. I like the idea of grids-on-demand, rather than a strict framework (no matter how simple). We even added support to CodePen. Last week I ran into Eric Suzanne, the creator of Susy, and I told him Zell Liew was working on a guest post for this site. He was "Oh, Zell! Yeah he's awesome, he's like the unofficial promoter and trainer for Susy." And

The Bézier Game

A game to help you master the pen tool.

By Mark MacKay.

Early in my career I had a job where a good half of it was cutting detailed clipping paths on photos (using the Pen Tool in Photoshop). We had an in-house photography department that shot furniture and electronics and the like, and I had to cut outlines around everything so designers could easily isolate things as needed. I'm sure I did thousands of photos. I'm still not a …

Getting Started with CSS Shapes

I just watched Jen Simmons give a talk Modern Layouts: Getting Out Of Our Ruts and she had some great examples of how easy CSS shapes are to use, even with safe progressive enhancement. If you haven't heard of them, essentially it's a way to wrap content (typically text) around custom SVG-like paths.

As serendipity would have it, here's Razvan Caliman with a megapost on how it all works and how to use it with real examples. …

25 comments

Scroll-Then-Fix Content

A reader sent me in a GIF showing off a cool effect they saw on Google on mobile. (Presumably the homepage you see when you launch Chrome on Android?) There is a search input in the middle of the page that scrolls with the page, but as it's about to scroll off the page, it becomes affixed to the header. Let's cover that, because, you know...

OH: I'm a mobile web developer, so I basically spend all day getting requests …

13 comments

A Look at SVG Light Source Filters

The following is a guest post by Joni Trythall. Joni recently finished a Pocket Guide to Writing SVG. I've been excited about SVG for a while now, working with it, learning about it, writing about it... but there is so much to know. It really is another whole universe of the web. So I reached out to Joni to see if she would like to write something for CSS-Tricks on SVG and she agreed! Here's Joni on lighting in

Sponsor: Hack Reactor – New Remote Beta Classes

With the success of their first online cohort, Hack Reactor is happy to announce two new Remote Beta classes. Aspiring engineers no longer need to relocate to San Francisco in order to attend their 12-week immersive JavaScript coding school. Take Hack Reactor’s program from home and gain the skills and confidence needed to build amazing products.

Remote Beta Classes begin October 27th & December 8th with recommended application deadlines of September 29th and November 10th, respectively. Apply today and take …

AMCSS

"Attribute Modules for CSS"

An idea by Glen Maddern for moving styling with attributes rather than classes. Not an entirely new concept, but it's interesting to give it a name and explain a system based around it. Thoughts:

  • It avoids namespacing. Using modifiers like "large" is often a tempting naming convention, but too generic for a class name on its own. "Large" would be fine as an attribute value e.g. am-Button="large"
  • Cleaner on the HTML side, messier on the CSS
41 comments

Give Designers Tools To Get You What You Need

Let's say you're having a healthy back-and-forth between you (a front end developer) and a designer. All the best work comes through collaboration and iteration, right? I believe that. But I also believe there are time traps in there. If you feel you're wasting time by getting peppered with tiny design tweaks, there might be salvation in giving designers tools to do the tweaks and then give you exactly what you need.

Let's see some simple examples.…

40 comments

Glitch Effect on Text / Images / SVG

Lucas Bebber's Glitch is a super cool effect. It's like you're looking at some text displayed on a progressive scan monitor that has been dropped on the ground one too many times and so the alignment of the pixels is off in weirdly un-even amounts time and space.

It's bonafide CSS trick if there ever was one! It took me a bit to figure out how it was working, so I thought I'd explain. Then I ended up making it …

Sponsor: Frontend Masters – Expert Web Development Training

Frontend Masters produces quality video training by industry leaders like Kyle Simpson, Douglas Crockford and Estelle Weyl. I like how these courses are targeted at intermediate and advanced developers:

You've got the basics down and don't want to learn from teachers who just spoon feed you their google results - you want to learn from the masters! Here, you get experts as teachers - people who are actively shaping the industry

Upgrade your JavaScript, CSS and front-end skills with Frontend …

58 comments

Centering in CSS: A Complete Guide

Centering things in CSS is the poster child of CSS complaining. Why does it have to be so hard? They jeer. I think the issue isn't that it's difficult to do, but in that there so many different ways of doing it, depending on the situation, it's hard to know which to reach for.

So let's make it a decision tree and hopefully make it easier.…

Advantages to Native CSS Variables

I tend to think variables are best left to a preprocessing step, but there are some distinct things that having them directly in CSS can do:

  1. Daniel Imms:

    [they] can change at runtime, allowing the implementation of things like theming to be done more elegantly.

    i.e. change the value of a variable on a live, rendered web page and see the changes reflected everywhere that uses that variable.

  2. Peter Gasston:

    you can set the value through the setProperty() method on

21 comments

Poll Results for “How much do you value your keyboard typing skills?”

Nearly 22,000 CSS-Tricks visitors voted in this one. A majority (72%) voted that they can type well. Only very few (6%) said they had limited typing ability. The rest in the "OK" range. The voting was broken up in a 1-10 scale. See the complete results in the sidebar of the site.

Here's the full results:…

Sponsored: Hack Reactor – The Original JavaScript Coding School

Hack Reactor is a 3-month immersive coding school focused on computer science fundamentals and JavaScript. With a twofold mission, Hack Reactor works to empower people and transform education through rapid-iteration teaching. Hack Reactor grads work at companies like Google, Adobe, OpenTable, Amazon, and numerous startups with a average starting salary of $105K and a 99% graduate hiring rate.

I personally know someone who went to a coding school and changed careers and changed their life, so I'm a believer. Apply …

7 comments

Design For Community, 13 Years Later

I had heard several people say Design for Community by Derek Powazek is a great book and was published well "before it's time." As someone who works on several sites that I very much think of as community sites, I picked it up and gave it a read. Published in 2001, the book is just over 13 years old now. Ancient history for a typical tech book. It is a tech book in that it talks about specific websites and …

Sponsored: An RSS Reader for Developers

rssheap is a web-based reader for software developers. You subscribe to tags of interest (CSS, JavaScript, PHP, Ruby, etc.), and we find great articles for you to read. Articles are sorted by how many votes they have to ensure you always read high-quality content.

I think this is a clever idea. It's easier than a typical RSS reader because there is content there the second you sign up and you find things socially. It's also better than a typical news …

CSS Guidelines

High-level advice and guidelines for writing sane, manageable, scalable CSS

Feels like a nice culmination of Harry Roberts work the last several years.…

15 comments

Starting CSS Animations Mid-Way

Say you have a @keyframe animation that animates an element all the way across the screen. From off the left edge to off the right edge. You apply it to multiple elements. But you don't want all the elements to start at the same exact position.

You can change the animation-delay so that they start at different times, but they will still all start at the same place.

Fortunately, there is a way.…

90 comments

Favicons, Touch Icons, Tile Icons, etc. Which Do You Need?

The following is a guest post by Philippe Bernard. Philippe has done research on what it takes to make a favicon (and all the related graphics and markup) such that you are covered with the best quality output everywhere. Spoiler alert: it's a lot of different graphics and markup. Also full disclosure: Philippe has built a tool to help with it he showcases in the article.

Effortless Style

Some clever stuff in here regarding styling content that is just regular HTML (perhaps as produced from Markdown). No classes or attributes of any kind, no extra HTML, no JavaScript, no nothin'. Content like that is 1) easier for anyone to produce 2) going to last.…

28 comments

How To Add Page Transitions with CSS and smoothState.js

The following is a guest post by Miguel Ángel Pérez. Miguel has been working at Weblinc on ways to transition pages on websites more gracefully. On single-page applications, we have more opportunity for this since we aren't fighting the page reload. But traditional sites with page reloads, you can still be quite graceful with some help from CSS and JS. In this article Miguel focuses on setting up the CSS to do this and making it work with his

Sponsor: New Creative Market Bundle! $39 for loads of design resources

Creative Market sells loads of design resources. From high quality stock photography and vector art, to print design and web templates, to really fancy stuff like Photoshop actions for getting awesome effects easily.

Once in a while, they put together a bundle of resources you can buy and then have access to download forever from your account. They are packed with all the great stuff I mentioned. Purchased individually, everything together would be quite expensive. But for this week only,

3 comments

CSS-Tricks Chronicle XVIII

Lots of stuff happening lately and far too long since I've done a Chronicle! Where I've been, where I'm going, things I've done, things I'm doing, etc.…

9 comments

Swapping Out SVG Icons

Let's say you're using inline SVG and want to change the SVG icon that is displayed in an element on state change, like changing a class or on :hover/:focus. There are a number of ways you can approach that.…

Pure CSS parallax scrolling websites

Keith Clark explains the core concept behind parallax scrolling (e.g. different elements scroll at different rates) with just CSS. It's a devilishly clever (yet simple) combination of 3D transforms to push the element "away" from the screen, affecting it's scroll rate, while adjusting the scale so the element appears at it's original size.

Scott Kellum and Brenna O'Brien worked up a Sass @mixin for it a while back which makes it even easier.…

30 comments

Beginner Concepts: How CSS Selectors Work

Are you new to CSS? This article is for you! Perhaps the biggest key to understanding CSS is understanding selectors. Selectors are what allows you to target specific HTML elements and apply style to them. Let's not think about style right now though, let's just focus on the selecting.…

Sponsored: Improve website UX with Hotjar Insights

Hotjar Insights is a web app to help you understand your website visitors. It combines a lot of insight tools (that you might pay for separately) into one unified platform. Heatmaps that tell you where your users are clicking. Feedback forms. Exit polls. Surveys. Video recordings of users using your site. A platform for recruiting people to do user testing for you. Live chat integration. Funnel analysis. And of course, more :)

If you are a designer, UX specialist or …

22 comments

Clever Uses for Step Easing

The following is a guest post by Julian Shapiro. Julian has been working on Velocity.js recently, which he has written about here on CSS-Tricks before. Julian lives in a world of animation, so it's no surprise he's collected together some interesting examples of exotic animation techniques. Here he shares all about step easing, which you might not even be aware of. A type of animation transition that jumps from keyframe to keyframe in a set number of steps, rather

15 comments

JavaScript Event Madness! Capturing *all* events without interference

The following is a guest post by Matthias Christen and Florian Müller from Ghostlab. Ghostlab is cross-browser cross-device testing software for Mac and PC. One of the things I'm very impressed Ghostlab can do is sync the events from one browser to all the others. Scroll one page, the others you are testing scroll. Click somewhere on one page, that same click happens on the others. I asked them about how the heck it does that when there is

CSS Triggers

When you change a CSS properties value, the browser needs to react to your change. Some values change the layout of the page. For instance, a change in width requires the browser to update layout, then "paint" any pixels that have changed, then "composite" them together. That's a lot of work. Some CSS properties can be changed more inexpensively. For instance, a change in background-image doesn't require any layout changes, but does require paint and composite.

Paul Lewis did all …

RWD Bloat

Dave Rupert does an in-depth analysis of his own responsive site to figure out where he's at, identify places to improve, and evaluate the idea going around that responsive design is at fault for bloated websites.

Says Dave:

Expect RWD to add ~10%

Update: Update.…

GitHub’s CSS

Mark Otto takes us on a tour of the CSS of GitHub.com. So great to read a straight-talking bit like this, warts and all.

This is 90% the same as we do things at CodePen. One major difference is that they combine all their CSS into two files and just serve them on all pages. I suppose that way once you've visited any page of GitHub.com, you've browser-cached all the CSS you'll ever need there. I have tended to go …

27 comments

Guide to Responsive-Friendly CSS Columns

The following is a guest post by Katy Decorah (edited by Jason Morris). Katy was researching CSS columns and how they can work responsively, as there wasn't much information she could find out there on the subject. So, like a hero, she wrote it all up. Here's Katy:

With CSS columns you can create a print-inspired layout with little added markup that can adapt beyond a fixed canvas. A supported browser will make calculations to wrap and balance content …

15 comments

Sponsored: Tower 2.0 is Here – To Make Git Easy!

The following is a guest post by Tobias Günther. Together with his team, Tobias creates Tower, a Git client for Mac. I personally use it every day. Just this week, they released version 2 of Tower, which I was a beta tester for. I'll let him explain all about Tower, why they created it, and what's new in this version.

Responsive Images: Use Cases and Documented Code Snippets to Get You Started

Andreas Bovens put together this epic recipe list for <picture> / <img srcset>. There are four scenarios:

  • Do my image sizes change depending on my responsive design rules?
  • Do I want to optimize for high-dpi screens?
  • Do I want to serve images with different mime types to browsers that support them?
  • Do I want to serve different art depending on certain contextual factors?

Then Andreas shares what the code would look like for all of those plus any

Hacks for dealing with specificity

The overall point here by Harry Roberts is to keep the specificity on your selectors as low as you can. The end result of that effort is:

  1. More reusable styles.
  2. When you need to override that style, you have opportunities to nudge that specificity a bit higher while still being reusable and not fighting yourself.
74 comments

Authoring Critical Above-the-Fold CSS

The following is a guest post by Ben Edwards. I saw Ben tweet about a simple Sass @mixin that allowed you designate bits of CSS as being "critical" - the idea being to load that critical CSS first and defer the loading of the rest of the CSS until later. A clever idea, and one that is getting very popular in the web performance crowd. I thought I'd get Ben to introduce these ideas in more detail for us.