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

Article Archives

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 Alex MacCaw and his new magicMove jQuery plugin:

The library works by appending a separate and hidden clone of the element you’re transitioning to the page. Any DOM manipulation you do is actually manipulating that clone. Then, when you’re finished, …

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, shadows, and curves, yet are flexible.

39 comments

Cross Browser CSS Injection

The following is a guest post by Shane Osbourne (@shaneOsbourne) from England. Besides being a musician, Shane is also an open source developer. Shane has developed a tool called Browser-sync for making CSS injection work across a wider swath of browsers than you might assume possible. And it does more than that, I'll let Shane tell you about it.

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 as time goes on we'll start seeing traditional affordances seep back into designs, like buttons that look like buttons and form fields that look (as Jessica aptly puts it) "hollow".…

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 you do).…

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 MediaTemple services. I also use their affiliate program but there are no affiliate links in this article.…

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 for reference.…

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 going to do something with them.

I’ve never seen a news organization that has a workflow that would allow them to routinely respond to their readers’ behavior right now.

1) Have an idea where, depending on data, you’ll do A, …

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. My own thoughts. And a funny reminder not to be too obnoxious about it.…

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 transition (assuming what that class does isn't remove the transition). If JavaScript literally changes the that style property, it will transition.

Likewise, if a new media query takes affect, and that media query has something in it that changes that …

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 requires a Management Team or Meet the Team page. If I had to guess, I'd say that I've built just around 50 different setups. It occurred to me that their must be many other WordPress developers out there creating similar …

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 do. Or so I thought. Shankar found a way to do it with newfangled tech.

When I create filters, shadows, transformations or gradient backgrounds in CSS, it feels amazing. Who would have thought CSS would come this far. No need …

93 comments

Just Use [insert CMS here]! Or, Why I Still Love WordPress

I somewhat regularly ask questions about WordPress stuff on Twitter. Usually when I don't know how to do something or I'm seeing behavior that I didn't expect. I did write a book about WordPress at one time, but even when I was immersed in that, I wasn't an expert on every aspect of WordPress. Especially the deep developer-y stuff. When I ask a question, I'll always get at least a few responses like:…

24 comments

Blurry Transparent Header Effect from iOS7 in CSS

The following is a guest post by Fabrice Weinberg. Fabrice is a regular contributor around here. He's always looking forward to the latest technologies and possibilities. Here on the outset of iOS7, he looks into recreating a particular effect that you might not guess is even possible on the web. It's tricky, uses bleeding edge features, but doable!

Solved by Flexbox

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

Line Mode Browser

Revisiting the first universally accessible web browser…

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 where the focus has moved to.

I think it's a light enough effect that the cognitive gains are worth the animation. No feedback yet from anyone visually impaired. It would be great to know if this is helpful to them.…

37 comments

Targeting Menu Elements with Submenus in a Navigation Bar

The following is a guest post by Ray Messina. Ray was interested in sharing this technique as a way to pay forward things he's learned from this site in the past, which is awesome. You might be aware of the jQuery .has method, which allows you to select an element if it has any of another selector as a descendant. There is sadly no such selector in CSS yet. But if you know a little something about the HTML

A Visual Guide to Sass & Compass Color Functions

Fun visual demos by Jackie Balzer. I didn't know about a few, like transparentize. It seems to work the same as rgba, but I like the word transparentize better. I also didn't know Compass adds a few of its own, like shade, which adds black and is different than Sass's darken. …

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 to look at how to use them, when to use them, and everything else you need to know.…

Webstock Talks

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

30 comments

Controlling CSS Animations and Transitions with JavaScript

The following is a guest post by Zach Saucier. Zach wrote to me telling me that, as a frequenter on coding forums like Stack Overflow, he sees the questions come up all the time about controlling CSS animations with JavaScript, and proved it with a bunch of links. I've had this on my list to write about for way too long, so I was happy to let Zach dig into it and write up this comprehensive tutorial.…

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 3-column layout at 1000px. Each column is 333px wide. Then you have a media query break at 800px which drops it to a 2-column layout, and with the third below. Even though the browser is now narrower, each column is …

Client-Hints Polyfill

Making server-side choices based on client-side information is a bit of a modern day holy grail. Client-Hints will hopefully someday make that easier, but we don't have that yet. I'm a fan of the cookie-based approach. This polyfill by Jonathan Neal aims to replicate Client-Hints with the cookie-based approach. …

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 weight, but that's rarely too big of a deal.…

40 comments

The Parallels Between Personal Health and Website Health

I recently spent a week at Hilton Head Health, a weight loss spa in South Carolina. Part of the experience was classroom learning about lots of different health related topics. While hearing all about those things, I couldn't help but think about parallels between personal health and the health of websites. Mostly about web performance. Perhaps looking at these similarities is useful, as there is great value in taking care of both and sometimes a good ol' analogy can …

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 to jump down to the right place. It looks silly, but I've tried it a few times now and it does seem to make me read faster and more comfortably.

I'm not sure why it has to be all "All …

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 bit of a non-standard way that lead to lots of requests and a very slow site. In poking around at different solutions, he came across fragment caching. But unfortunately some of the information he found was outdated, so, like 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 needs and rules that change the game and alter the conversation around them. Is it true?…

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 in general. Thankfully, he obliged with this great article about using them in HTML, styling them with CSS as best as you can cross-browser, and fallbacks.

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 hidden to visible like jQuery's slideDown(). Nikita Vasilyev shows how you can do it with a touch of JS, but still using CSS for the actual animation/transition.

The more difficult one is to auto: 1) measure width 2) set auto …

Tridiv

A web app by Julian Garnier for building and manipulating 3D shape creations in CSS. The interface is genius. One panel shows you the creation from an angle so you can see the 3D-ness of it and spin it around. The other three panes show you the creation from different straight on angles so you can drag them around in the relevant directions.

Check out a demo if you aren't impressed yet.

In the Preview Mode there is a button …

42 comments

The Move to bbPress

The Forums on CSS-Tricks started life as phpBB sometime in 2008. There is even an ancient video of how to apply a basic skin. Sometime in 2010 I moved them to Vanilla Forums in a response to heavy spam and the general unwieldy nature of phpBB. Now in 2013, the forums have been moved yet again, this time to bbPress.…

37 comments

Website Critique: epicawesome.co

Back when I did the Kickstarter for this site, one of the rewards I offered was a critique, public or private, of any website. The only taker was Gus Fune, who opted for the public critique of a site he worked on: epicawesome.co. Thank you Gus for allowing this to be a public learning opportunity! …

Above-The-Fold CSS

What is the most important CSS on the page? The styles that affect what you can see immediately. Chances are, that is far less CSS than your entire stylesheet(s). What if you could serve just that CSS right away rather than your entire (blocking) stylesheet? Paul Kinlan shares an idea.…