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

Article Archives

41 comments

CSS Pivot

CSS Pivot allows you to apply your own CSS to a site and then share the results (you get a unique URL which opens up that site in a top-bar/iframe dealy). Pretty clever stuff. If you saw a tweak of someone elses that you really liked and wanted to make it persist, you could use this Chrome extension.

I'm posting this as an article instead of a link so we get the comment thread thing going if anyone has …

58 comments

Hover on “Everything But”

Hover states are easy, but what if you want to apply a hover state to every element besides the one you are hovering over? We can do it with a little trickery.

Converge SE 2011

June 24-25, 2011 in Columbia, South Carolina. It was awesome last year and this year should be ever better as it's at a nicer venue and I'll be speaking at it! $150 bucks for both days = super affordable as far as these things go.…

6 comments

Comma Separated WebKit Animation Keyframes

Another little thing I learned from Estelle at the SXSW 2011 CSS3: Beyond The Basics panel was that you can comma separate the keyframe values in a WebKit animation declaration. Let's say you wanted to create a pulsing effect as an animation. One way to do that would be to have an animation which changes the opacity on 0% and 100% and then set the iteration-count to have it run a couple of times. But you can accomplish the same …

ZEN Audio Player

Really cool audio player by simurai using HTML5 <audio, jPlayer (jQuery plugin), and CSS3 for the fancy animations. This made the rounds a few months back but I decided to wait until it was on GitHub, which then happened and I missed it. Oh well, it is now and it's awesome.…

Get Your CSS Easing Code Here

A code generation and visualization tool by Matthew Lein for CSS3 transition timing functions. Biggest triumph? Making cubic bezier understandable. …

32 comments

IEMobile Conditional Comment

Heads up: there is a conditional comment for targeting Internet Explorer on Windows Phone 7 mobile devices. Plus, other random thoughts.
7 comments

Crivestivus

This has almost nothing to do with web design, but I want to help promote an event going on in Northern Wisconsin put on by some friends of mine: Crivestivus.

They used to hold it just for friends and friends-of-friends, but this year it's opening up to the public. It's like a very casual three day camping party. Live music (my old Irish band is getting back together and playing), outdoor games like bocce and cornhole (one year they …

94 comments

New Poll: Conditional Tags for All Browsers

There is a very low chance this would ever happen, and as far as I know nobody is talking about it seriously. I think it might make for an interesting discussion and poll though:

Do you wish there was conditional comments for all browsers?…

18 comments

currentColor

CSS variables are always a hot topic when "the future of CSS" is discussed. They are actually coming natively, but using them in production (without a CSS preprocessor framework) is a long way off. However there is a feature that actually has some browser support now that has a CSS variable feel to it, and that's the currentColor value. …

49 comments

Progressively Enhancing HTML5 Forms

This is what I'm thinking is the best current way to progressively enhance forms. That is, use HTML5 features when they are available and fall back to JavaScript alternatives when they are not. …

SXSW + HTML5 Forms

If you are at SXSW, Kevin Hale and I are talking about HTML5 forms and using them to improve lead generation (and generally how to make your forms better). It's a 2.5 hour workshop which we intend to be fun, ultra comprehensive, and practical. Between Kevin's ability to give super engaging presentations and my ability to make fart jokes (and the ridiculous amount of research I've done on this), it should be hopefully be a good one. Tuesday March 15, …

41 comments

Wolf in Sheep’s Clothing

Roger Johansson has a neat quick-tip style article on centering page content both vertically and horizontally by making the html element display: table; and the body element display: table-cell; with vertical-align: middle;. See the full code to make it happen in the article.

I'm down with that. Works in all modern browsers and IE 8 plus.

I disagree on this though:

I’ve seen people saying that using these CSS properties to create “CSS tables” is no better than using …

59 comments

Styling Texty Inputs Only

A CSS3 technique for selecting only texty inputs, without the burdon of listing every single attribute selector for every single new HTML5 input type. Plus alternates.

Method & Craft

New must-subscribe-to site. Under the hood: curiously not HTML5. Almost feels rare these days. …

Open Source Ampersands

Little download packages by Mark Pilgrim that contain @font-face files that are super tiny because they contain just a single character: the ampersand. They come with an HTML demo so using them is an easy copy-and-paste job.…

It’s The Final Countdown

Microsoft themselves is tracking and promoting the demise of IE 6. China? 34.5%? Seriously?

And I can't help but hum a little Europe:

We're leaving together
But still it's farewell
And maybe we'll come back
To earth, who can tell?
I guess there is no one to blame
We're leaving ground
Will things ever be the same again?…

More Generated Content Tricks

Trevor Davis from Viget Labs with some clever and real-world implementations of pseudo elements.

There is so much to talk about with these pseudo elements it's crazy. I'm speaking at a few conferences coming up and I'm putting together a presentation that is solely on that topic and it's going to be awesome.…

102 comments

Quick Thoughts on Sharing Buttons

Randomly this week, I've had more-than-normal number of comments from folks who ask me something like:

Went to go tweet/share a blog post of yours, and noticed you don't have any of those on your site. Interesting, any reason why?

I do have some thoughts on that...…

57 comments

Show and Edit Style Element

Kind of a classic little trick for ya'll today. You know the <style></style> blocks you can put in the <head></head> of your HTML to do styling? You don't actually have to put those in your head, they can be anywhere on the page. …

54 comments

Sans-Serif

Declaring just 'sans-serif' as the font-family means you'll get Helvetica on Mac, Arial on PC, and still have the good generic keyword fallback.

Generated Background Noise

jQuery plugin by Daniel Rapp to fill any element with background noise. Uses <canvas> to create, then turns it into an image and sets a repeating background-image. Even if you'd be against using this on a production site, it's still a clever programatic way to accomplish this common design need. Plus you could always just snag a screenshot of the noise and use that in production.…

34 comments

Stacking Order of Multiple Backgrounds

Multiple background images is a cool feature of CSS3. The syntax is easy, you just comma separate them. I find it's easiest/best to use the background shorthand property so you can declare the position and repeating and whatnot and keep them all grouped together. What isn't obvious while looking at the syntax is which image is on top in the vertical stacking order when those images overlap. The spec is clear in this regard and browser implimentations follow. The first …

47 comments

CSS3 Progress Bars

Just a fun experiment creating progress bars made with just CSS3 (no images). Loads of progressive nerdery packed into one little element.

Bokeh with CSS3 Gradients

Bokuh is the effect of backgrounds in photographs with deep depth of field. Shapes round out and get blurry. Think of a really out of focus picture of a lighted Christmas tree. Divya Manian creates that effect in WebKit by using multiple backgrounds on the <body> all with different positions, sizes, colors, etc.…

I found it!

Funny article from Thierry Koblentz on CSS selector efficiency. Although there are cases where multiple ID selectors are needed, a selector like #nav li ul li a#active is almost certainly too heavy and inefficient. …

26 comments

Letter Flipper

Randomly, I made a letter flipper thingy the other day. I saw a similiarish effect on a Flash site and tried doing it with JavaScript instead. You can view source on that page to see the simple code. It's just recursively calling a function to change the letter with a slight delay until the letters stored in a Array are up, then changing back to it's original letter. …

76 comments

How Should We Calibrate Monitors for the Web?

When designing for print, having a properly calibrated monitor makes all the sense in the world. If done perfectly, what you see on the monitor should look like what you get on paper from a printer. No surprises.

When designing for the web, there is no physical byproduct in which to match color. We designed it on a screen, for a screen. So what does calibration matter? …

44 comments

Fade Image Into Another (within a Sprite)

Creating an image rollover is pretty easy with CSS. Give the element a background-image, then on it's :hover, change the background-image. It's best practice to combine both images into one and shift the background-position rather than use two separate images, that's the idea of CSS sprites. But what if you want to fade one image into another, not just have an abrupt shift?…

The Bright (Near) Future of CSS

Just in case anyone doesn't read Smashing Magazine, Eric Meyer has a long excerpt from his latest CSS book here which is loaded with good stuff. I particularly liked the bit about clearing :nth-child elements combined with media queries.…

29 comments

CSS3 Loading Spinner

A WebKit-only demo of a loading animation. Loading text slowly reveals itself over and over while a spinner rotates around in a circle over and over infinitely.
22 comments

Rein In Fluid Width By Limiting HTML Width

You can set a max-width on the html element which helps keep fluid width sites under control with zero extra markup. Plus it's got pretty good browser support with a No Big Deal™ fallback.
60 comments

The Shapes of CSS

I made a page with the shapes you can make with a single HTML element and CSS. Here is an example:

View Demo   Download Files

The CSS you see on the page is the real CSS rendering that shape, and it also editable, so feel free to tweak it right there. I'd love to expand it if anyone has more ideas! …

17 comments

WebKit Adjacent/General Sibling & Pseudo Class Bug

Good news everyone! This is fixed in both stable releases of the WebKit browser Safari (5.1) and Chrome (13)

It's not every day you come across a solid bug in WebKit, which it seems to me leads the pack in quality support of CSS. Alexander Futekov emailed to let me know about this one, which somehow I have never personally come across.

The problem is using adjacent (+) or general (~) sibling selectors combined with pseudo classes. Like this: …

The New Bulletproof @Font-Face Syntax

I bet a lot of you are using @font-face in your designs. It's probably worth updating to this new syntax, which deals with IE9 and Android better than previous popular methods.…

35 comments

Different Transitions for Hover On / Hover Off

In other words, "Different transitions on mouseenter and mouseleave" as those are the DOM events that happen, but we're not using JavaScript here, we're talking about CSS :hover state and CSS3 transitions. Hover on, some CSS property animates itself to a new value; hover off, a different CSS property animates. …

Lessons with Media Queries

Sam Collins with a big writeup on his experience using media queries and comparing them against other mobile optimization techniques. There are lots of good practical tips to use inside your media queries like:

  • Remove all CSS and JavaScript animations (and how)
  • Re-declaring @font-face with new method to fix Android
  • Setting font size of inputs to at least 100% to avoid awkward iPhone zoomage.

Some great tips in the comment thread as well.…

29 comments

Implied Block

Jeff Starr tweeted a simple tip the other day:

If you're floating an inline element, it's treated as block, so no need to include "display: block;" in your stylesheet.

Indeed that is exactly what happens. The spec:

The values of this property have the following meanings. Left: The element generates a block box...[actual stuff about how floats work]

Browsers implement it just that way. Here's a LOLCSS screenshot to make things clear:

What this does mean is that …

79 comments

Equal Height Blocks in Rows

A jQuery based solution for equalizing the heights of boxes across the horizontal row they are in. Different rows can have different heights. Originally by Stephen Akins.
51 comments

Ajax Load Container Contents

Use jQuery to replace a section of the page with that same section of the page from a different URL. The trick is to grab the contents of the section, not the section itself.

CSS properties that affect type rendering

Tim Brown reminds us that:

When it comes to type rendering on the web, there’s not much web designers can do.

He's talking about literally how well type renders on the screen. There are a handful of properties that have significant effects on it, namely: font-size, color, -webkit-font-smoothing, and rotation. Rotation the one that can have the most detrimental effects:

...non-horizontal type is a veritable rendering wilderness.…

8 comments

Five Questions with Zoe Mickley Gillenwater

Zoe is a hero of the modern web. I first heard of her from her book Flexible Web Design, which is a super comprehensive and sensible look at building fluid width websites (and other techniques to make websites take advantage of a variable width browser window). At the time, "media queries" weren't really a thing. While it's a different concept, it's related in spirit. Zoe tackles that, and a slew of other CSS3 techniques in her new book, Stunning

Unmatched Style Site Review

My buddies at Unmatched Style reviewed this here very site. Make sure to check out the video at the top where Gene and I talk about some of the design decisions and behind the scenes tech. …

humans.txt

I kinda like this idea:

It's a TXT file [at the root of your site] that contains information about the different people who have contributed to building the website.

A lot of websites should just have an about page where this information is easy to find. However there are websites where it just isn't possible or appropriate to have a page like that.

But why not humans.html?…