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

Article Archives

CodePen PRO

Big day for me and the CodePen team! Many, many months of development have given birth to CodePen PRO, a set of eight brand new features. Things like Collab Mode, where you can literally write code and chat with other people in real time.…

CSS Hypenation

PPK: Hyphenation works!

Eric Meyer on places to avoid it.

In my own experience in the CSS-Tricks v10 redesign, at one point I had hyphenation turned on everywhere and got loads of complaints of certain versions of Firefox over-hyphenating things. Nearly every other sentence had a hyphenated word where it really didn't need to be.…

44 comments

So You’re Going To Start A Huge New Web Project

I was asked this past week to consult for a company embarking on a huge new website redesign. I thought I'd write up some thoughts that I would share with anyone in that position.…

Fastbook

Zuck was all like "HTML5 is too slow" and Sencha is all like "Whatever child take a peep at this."…

17 comments

CSS-Tricks Chronicle IX

A tribunal on the happenings of the the passing approximate fortnight.
34 comments

Slides From Recent Presentations

As you know, slides alone pale in comparison to being there to see a talk, but I still feel they are worth sharing. I've just gotten to posting up my last three prepared talks on SpeakerDeck.…

32 comments

BERG Cloud Buttons

The buttons at BERG Cloud are pretty sweet looking. It's not a hugely big deal, but the way they have created them uses two separate images (not sprited) and two internal spans. In this tutorial we will recreate them with some modern tricks. We'll use no images (more efficient), less markup (more semantic), and function smoother (no javascript controlling states).…

CSS Next

Divya Manian runs through many of the latest stuff coming in CSS. Including several things I'm hearing about for the first time, like specifying unicode range for an @font-face and canvas-as-background.

If you can't get enough, this talk by Tab Atkins (only works in Chrome) covers even more upcoming stuff, including more I'd never heard of. Things like image-interpolation (determines how images scale, like keeping sharp pixel boundaries), setting font-size with ex which is based on x-height (will be awesome …

ShopTalk Episode 46

Another RAPIDFIRE episode where Dave and I just do as many questions as possible. Including: why does Prototype still exist? What is good UX for target="_blank"? and the semantics of <cite>.…

Sauce Mac App

I quite like Browserstack, but Sauce has some pretty compelling features as well, like video recording of your testing sessions. Now Sauce has a native Mac app, which means you can do your old browser / cross platform / device emulation testing right from a dedicated app. …

GitHub’s CSS Performance

Interesting stuff by Jon Rohan on how simplifying HTML (just a little) and simplifying selectors (just a little) made huge impacts on page performance.…

12 comments

Rebuilding CSSLoad.net

In which Timur Gafforov explains how he rebuilt his one-page website for building loading animations in pure CSS.

Bootleg.css

Ryan Seddon recreates most of the Bootstrap JavaScript plugins without JavaScript. The :checked selector is the workhorse, like we've covered here, but Ryan is the OG of checkbox hacks. These things might get more powerful and more semantic if this goes well.…

ShopTalk Episode 45

This week Dave and I were joined by Harry Roberts and where we continue the discussion on IDs, how preprocessors help Harry's framework Inuit.css, visualizing how CSS transforms work, and more. Big thanks to InControl 2013 for sponsoring.…

17 comments

Eye Tracking CSS-Tricks.com

Back in early October, I was at ConvergeFL to give a talk. JD Graffam of Simple Focus and his team were also going to be there giving a workshop on eye tracking. We managed to work it out to do a real eye tracking session for CSS-Tricks.com while we were there.…

13 comments

Fly in Newly Added Content to a Page

Say that for any reason, a new module of content needs to appear on a page. By simply appending that new module into the DOM it will instantly appear. That might be enough of an "entrance" - or it might be too subtle. I'd think when you add new content to a page, you want people to see it. Animation might be the ticket. It technically slows down the entrance of the new content, but the visual effect will certainly …

Viewport Resizer

There are many like it, but this one by Malte Wassermann is a really good one. It goes the extra mile, for example, by injecting the correct meta tags, sending the right user agent, and refreshing the page in its newly resized viewport.…

61 comments

“Bad Code”, Dogmatism, etc.

A wrapup of some recent discussion in the community about the use of classes, descendant selectors, whether using IDs is bad or not, how that relates to OOCSS, and all that jazz.

ShopTalk Episode 44

This week Dave and I were joined by Jeffrey Zeldman for another #CROSSOVER show! (Jeffrey hosts The Big Web Show). We talk about dogmatism in code, web design in isolation, and how A List Apart was maybe the first website ever to use floats for layout. Big thanks to Lynda.com and InControl 2013 for sponsoring. …

14 comments

Writing More Autonomous JavaScript

In which Matt Holt discusses how jQuery plugins can be more adaptable to their environment. He showcases his liveAddress plugin that works with Smarty Streets to do proper address validation as an example. A proper autonomous plugin being: plug-and-play and event-based. He finished up with a call out to simplify address fields.

Women & Tech

We will ask a group of clever women out for coffees to pick their brains and share our conversations. We're not endorsing the obvious; we want to get under the surface of what it's like to be a woman working in tech.

By a cracking team.…

13 comments

CSS-Tricks Chronicle VIII

In which explanations of recent phenomena are laid to bear and the veil of unknown unknowns lifts magnificently.

ShopTalk Episode #43

This week Dave and I were joined by the fellas from the Bizcraft show, Gene Crawford and Carl Smith. #CROSSOVER. We talk about working remotely, client overages, local vs. international SEO, learning as it relates to design, and much more.

Thanks much to InControl 2013 (use SHOPTALKSHOW for $100 off) and Lynda.com (use that link for a free week) for sponsoring.…

46 comments

Responsive Menu Concepts

Tim Pietrusky shares a number of different techniques for handling menus on smaller screens when the large screen version, unaltered, is untenable on the small screen.

ShopTalk Episode #42

Sadly we had some issues recording with Matthew Smith again (our fault). So Dave and I regrouped and did another RAPIDFIRE to catch up. We talk about @extend, image replacement and Google, organizing CSS properties with CSSComb, learning Backbone.js, and lots more. Thanks a bunch to Environments for Humans and Mijingo for sponsoring.…

54 comments

Stairway Navigation (A jQuery Plugin?)

On a whim the other day I thought I'd build out an idea for navigation I had. It's nothing but a visual effect in which the hovered (or active) navigation item becomes the tallest "stair" and other items before and after it step down. It's simple, but it's not something you see very often. Probably for one major reason: you can't select "previous" elements in CSS.…

Ratchet

From the Twitter Bootstrap clan:

Prototype iPhone apps with simple HTML, CSS and JS components.

I wonder if they can make a business out projects like these.…

76 comments

Why Ems?

I've long sized text only in px. Even when it was patently uncool to do so - the days in which smart people cared about the fact that text set in px couldn't be resized in IE 6-8. I've switched over to using ems now. I haven't moved every single project over yet, but my mind has switched. Why? I finally found some compelling reasons that I now grok. …

44 comments

Off Canvas Menu with CSS :target

"Off Canvas" patterns are different ways to approach layout where content on the web isn't just laid out in a vertical column. For instance, navigation could be positioned hidden off the left edge of the "canvas" (visible browser window) and slid in on demand. Anthony Colangelo created jPanelMenu to do just that. Hakim El Hattab's Meny is fancier but similar in what it accomplishes.

They both use JavaScript. I thought it would be fun to try and recreate Anthony's jPanelMenu …

<picture> Demos

If you've ever thought "Meh, what is <picture> actually going to help with?" - here is a page of demos for you to see.…

Flexplorer

Play with the new syntax for flexbox with this one-page app by Bennett Feely.…

Inspector Web and the Mystery of the Shadow DOM

A video from JSConf EU 2012 in which Angelina Fabbro teaches us about the brand new shadow DOM, which is shipping now in Chrome Canary under a flag. Essentially, shadow DOM is a way for us to build modules (little sub-documents) inside a single element that are protected from the parent document. This will help semantics, make CSS easier, make more robust re-usable elements, and more. I think this will be big in years to come.…

39 comments

The Facebook Loading Animation in CSS

Fabrice Weinberg explains how to combine CSS3 gradients, multiple backgrounds, and animations to create the Facebook loading animation with a single HTML element. Fancy stuff, folks!
42 comments

New Poll: Version Control Usage

New poll up in the sidebar. The question is about version control and asking you to pick the situation that best describes you. I just think it would be interesting to get a sense of what CSS-Tricks readers usage levels are like when it comes to version control.

This will be agnostic in which specific version control technology you use.…

9 comments

Template and Notes from my Deseret Digital Workshop

Last week I was in Salt Lake City to do a workshop for Deseret Digital. Like my last workshop, we used the time to literally build a website from scratch. I think this live coding style is a decent way to do workshops because it is what real life web development is like. Nothing theoretical, all real working code. The following will be basic notes on what we covered and the template we built. While this certainly isn't as …

38 comments

Web Developer Economics: The Wrapup

We started this series to get a look at the financial ins and outs of a web developer these days. Now we can wrap it all up by looking at the numbers all together. …

41 comments

Dropdown Default Styling

There has always been big differences across how different browsers handle form styling. There probably always will be - because UI design choices aren't described in the specs. Browser makers perhaps view this as one of the ways they can differentiate the user experience a bit. Select (dropdown) menus are one that is particularly weird.…

Emmet

The next generation of Zen Coding. Essentially it gives you shortcuts you can type that expand into full HTML or CSS. Like nava*8 will expand into a <nav> tag with eight links inside it with empty hrefs. Or, try div.module*4p*2lorem and press tab. There are also a bunch of editor navigation shortcuts like "move to the next edit point."…

CSS-Tricks Store Now Open!

T-Shirts and Hoodies, now available anytime. Imagine one of these babies wrapped up with a bow on it under a tree. RIGHT?…

18 comments

Display Form <progress>

Imagine you have a form with 10 required fields on it. That's a bit larger than your average form on the internet and a good bit of work for a user. You might lose some users along the way, which is never a good thing. Perhaps to encourage finishing the form, you let them know how close to completion they are, and display motivational messages along the way.…

Hoverstat.es

New & interesting examples of movement in interaction design, curated by Chambers Judd.…

43 comments

Web Developer Economics: Hardware Costs

This will be the last part of this mini series about Web Developer Economics before we wrap it up and look at the numbers together. We already looked at:

Now we need to consider the hardware itself. I think this one is pretty simple: you need a computer.

I think you need either a laptop or a desktop. Maybe someday …

ShopTalk Episode 40

Dave and I talk with Laura Kalbag, a freelance designer from the UK with a fresh perspective on just about everything. We talk about process, selling responsive web design, software choices, and more.

Thanks very much to PeepCode and InControl for sponsoring this week.…