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

Chaining Multiple Blend Modes

The background-blend-mode CSS property is nifty in lots of ways. It gives developers the ability to blend one background-image with its own background-color, or even with another background-image that's been applied to that very same element.

What's extra interesting is that you can chain these blend modes together. If you add multiple background images to an element you can also declare which background should use which specific blend-mode.…

Read Article →

How to Make a Smartphone Controlled 3D Web Game

The following is a guest post by Charlie Walter. Charlie does a bunch of work with Three.js (3D in the browser with WebGL) and gaming concepts. If that stuff interests you, read on!

In this tutorial I'll explain an approach on how to connect your smartphone to a 3D web game. We'll be making a car which you can control by tilting your phone (using the phone's accelerometer). We'll use the JavaScript library three.js for working with WebGL as …

Read Article →

Thoughts on an API-First WordPress

The following is a guest post by Eduardo Bou├žas. We all know WordPress is a CMS, but here Eduardo thinks about using it only as an API for content. No front end at all, just URL endpoints that return JSON for use anywhere else. This doesn't detail a comprehensive solution to doing this, it's food for thought with some example code to get you going on a custom solution. If you want to get started developing on a

Read Article →

Where Style Guides Fit Into Process

Brad Frost was showing me some slides from one of his talks recently. He had some graphics that demonstrated different approaches to where a style guide can fit into a team's process. As you might imagine, it's a matter of just having one or not that will determine its effectiveness.

I thought I would attempt to explain my own thoughts on these approaches based on my own experiences.…

Read Article →

HTML vs Body in CSS

The difference between <html></html> and <body></body> is easy to overlook. It seems to be one of those things that falls into the category of trivial. Admittedly, I have a bad habit of applying all global styles to <body></body> and, when that falls short, I move to <html></html> without thinking about it.

There are differences, however, and it's a good idea to be aware of them regardless of whether we're CSS veterans or rookies. We'll go over those in this post …

Read Article →

Sponsor: Mack Weldon 

Guys. (Literally guys this time, sorry gals.)

I don't particularly like clothes shopping. So I don't. 95% of the clothes I own I buy online. But I also like nicely made clothes. It's not a splurge. They last longer, are more comfortable, and end up being a more economical buy.

That's why I'm glad there are companies like Mack Weldon that make high quality clothes that used to suck to shop for: underwear, undershirts, and socks. This is what they have to say specifically about their underwear:

  • We thought underwear could be better, so we made it by combining old school quality with new technology.
  • We spent 10,000 hours creating better underwear, starting with our own new fabric we call 18 Hour Jersey. The fabric sits for 18 hours before it's cut, giving it time to naturally breathe and acclimate.
  • Features like a no-roll waistband, stay-put legs and mesh cools zones make these very comfortable even after a full day's wear.

They want you to be comfortable in great underwear, so if you don't like your first pair, they'll send a different size or give you a refund. No need to send anything back.

Cut and Copy (from JavaScript) 

Matt Gaunt shares that IE 10 and bleeding edge Chrome and Opera how support document.execCommand('copy'); and friends, which can make for some mighty convenience UX opportunities.

Using Chrome DevTools to Debug JavaScript in Any Browser with Ghostlab 2

The following a guest post by Andi Dysart and Matthias Christen of Ghostlab. I was pretty impressed when I heard that the newly-released Ghostlab 2 could do this. I think a lot of us developers use Chrome because the DevTools are so good, and it sure would be able to use them in other browsers, even on mobile devices. And why not? Chrome DevTools are a part of Blink, which is open source, right? We just needed a tool

Read Article →

#139: Explaining the Server Side Mustard Cut

I published a written post about this idea of the Server Side Mustard Cut. So if you're into reading and checking out code samples and stuff, that's the place for you. In this video I just walk through all that, explaining myself as we go.

I'll give the same caveat I have everywhere else I've introduced this: this may not be perfect for every site out there. In fact I think normal RWD stuff is generally better, up to …

Watch Video →

More Blog Posts →