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

Article Archives

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?…

34 comments

Animated Knockout Letters

I was watching some commercial the other day and they had these letters fly in over a black screen and reveal an image beneath them. It was a pretty cool looking effect and it reminded me how WebKit has that cool -webkit-background-clip property which allows you to show background through text. So I set off on trying to see if I could do something like that. You can, but there are some interested stumbling points...…

The Shadow DOM

You know the little blue knobby on WebKit range inputs? And all those fancy <video> controls? That stuff is all built with regular ol' (styled) HTML elements, only they are behind a bit of a glass wall. You can see, but not touch. …

11 comments

Five Questions with Trent Walton

Trent is an easy guy to admire. He works at a cool design agency (they have a triforce for a logo and pull it off). He's got a cool blog that shows off his clean design style with art directed posts and custom headers. Jason Santa Maria calls him on the phone to work on cool projects with fancy new web technologies. I thought I'd try and snag an interview with him to see if some of that cool could …

52 comments

Rotating Feature Boxes

Three boxes: a main feature box and two sub features. Click on the sub feature boxes and the whole shebang rotates to make that the main feature. The animations happen via CSS3 (the future) and the clicks and class shuffling is done by JavaScript (its forte).

The Dark Side of Usability

There is some actual data supporting a counter-intuitive idea I postulated about a while back:

People using the more difficult interfaces tended to perform better, were less fazed by distractions and were found more likely to transfer their skills to new interfaces or tasks.

I think the take-away from this isn't "let's make our interfaces less usable" it's "maybe we don't understand as much about usability as we think we do."

WebKit Gradient Syntax

... is now the same as the Mozilla / Official spec version, which is great because 1) it's easier to write and technically more powerful and 2) yay standards!

It's only in the WebKit nightlies, but I'm sure will be in the next major releases of Safari and Chrome.

So is -webkit-gradient going away? Certainly not! We’ll maintain support for -webkit-gradient for the foreseeable future for all the existing content out there that uses it.…

14 comments

Five Questions with Nicolas Gallagher

Nicolas has one of those web design blogs that everybody should subscribe to. He explains things with a thoroughness and understanding that we all should strive for. I caught up with Nicolas to ask him some questions about the future of the web, his life, and if he had any advice for others.…

Google Dropping H.264

Google Chrome is dropping support for the video codec H.264. Kinda feels like an Apple vs. Google pissing match as H.264 is so heavily used by Apple and WebM was developed by Google.

For HTML5 video, this is how it seems like it shakes down to me:

Now:
H.264 - Chrome, Safari, Mobile Safari
Ogg Theora - Firefox, Opera

Near Future:
WebM - Chrome, Firefox, Opera, IE 9
H.264 - Safari, Mobile Safari

Still only need to provide in two …

26 comments

What’s the Difference?

Reader Paul writes in:

What's the difference between .container div { } and div.container { }?

It's great you are asking questions like this Paul. The answer is very important to understanding CSS, because these two selectors select very different things. This is pretty similar to this question from a while back.

Perhaps a good way to explain their difference is reason them out in "plain English".…

44 comments

Moving Highlight

I recently noticed a subtle and nice effect in the Google Chrome UI. As you mouse over inactive tabs, they light up a bit, but also have a gradient highlight that follows your mouse as you move around on them.

The guys from DOCTYPE told me it was their inspiration for the navigation on their website. They are doing it just like I would have, with CSS3 gradients and jQuery. So I decided to snag their code and play around …

Mother Effing HSL

From the source code:

this site is by Paul Irish
i made it cuz hsla is wayyyy cooler than rgba and more sensible too!

HSL is better than RGB. The reason it isn't used as much (according to me) is because you can't get HSL color values out of Photoshop. Hence, tools like this and my own. …

16 comments

Absolutely Position Element Within a Table Cell

Have you ever wanted to absolutely or relatively position a table cell? Well, I can't help you there. Table cell elements just won't take those position values. And thus, you also can't absolutely position elements within the context of those elements either. I can help you out with that issue.…

19 comments

Links

Got a couple of slightly-oldie-but-goodies for you:

  • A jQuery plugin by Manos Malihutsakis which allows you do to create custom scrollbars for content areas that do some neat things like move their position and size, style them differently, and use easing.
  • Benjamin De Cock's CSS Playground has a number of stripped down and clever CSS ideas like a slideshow, spinner graphic without images, and some neat navigation ideas.
  • Caleb Ogden uses some CSS3 to make a submit button look like
50 comments

Why use Classes or IDs on the HTML element?

Reader Nicolas writes in:

I'm frequently seeing ID and class specifications to <body></body> and <html></html> elements. I'm curious as to why one would do this? If it is unique to either element, then why not specify body or html in the CSS?…

37 comments

The MoveUp Menu

I got an email quite a while back from Dirk Tucholski who showed me a site called FLOWmarket. He was wondering about how the menu system worked. I thought it looked neat and so set out to build it how I would do it. The idea is that there is a long vertical menu of links, not all of which are visible. As you scroll your mouse up and down the visible area, the menu scrolls itself to reveal …

72 comments

Thank You (2010 Edition)

It's been a tradition for years now around here for me to do a year-end wrap-up. It's a great way of reflecting on the year, sharing some random interesting statistics, and most importantly, saying thank you to everyone who comes to this site. …

68 comments

Poll Results: HTML5 on New Projects

Several folks pointed out that this last poll question was worded a bit strangely:

Would you start a new web project today and not use HTML5?

I worded it that way to elicit comments on why a person or organization would not opt to use HTML. However, that meant you needed to answer Yes if you would not use HTML5 and No if you would, so, possibly a bit confusing, but whattagonnado? The results show that the majority of people …

Body Borders without Markup

Harry Roberts  with a nice technique on using pseudo elements to create the body border effect without extraneous markup (same idea with extra markup gets you older browser support). Read the comments for some other good suggestions. …

44 comments

Load More Sidebar Content When There Is Room

One classic layout conundrum is how much stuff to put in a sidebar. Ideally the height of the main content area and the sidebar are about the same, to avoid either area having a large blank area which can be strange looking and a waste of good web real estate. Go light on sidebar content and short content pages may be just about right but long content pages have a lot of unused sidebar space. Go heavy on sidebar content …

41 comments

WebKit Image Wipes

It's not "spec," but WebKit browsers support image masks. If you are familiar with Photoshop, they work like that. You declare an image to use as as mask. The black parts of that image hide what it is over, white parts of that image show what is underneath, gray is partially transparent. So if you had this image…

The Hacktastic Zoom Fix

Nicole Sullivan on forcing elements to create new formatting contexts with display: table-cell and a string of X's as pseudo content to force it full width. …

The lean, mean, CSS-reset machine.

There are all kinds of CSS resets, from the ever-popular Meyer reset, to the newfangled HTML5 reset. Do you know what the difference between the different ones are? It's a bit hard to picture, even when looking at and comparing the code. Jeff Starr created this new little clever website which allows you to see different types of content with different resets applied, and even pull in your own websites content to try. …

80 comments

Using CSS without HTML

Big thanks to Mathias Bynens for the guest post today! I'd call this a bonafide CSS trick!

A few days ago, Chris tweeted:

If we could stack pseudo elements (e.g. :after:after) we could build a whole website with no HTML other than <html>. Probably good we can’t.

In response to this, I created this quick demo (view in Firefox or Opera), illustrating that technically you don’t need any HTML at all to use CSS.

Since this …

28 comments

The Kick Awesome Show

Nate Croft and Jon Longnecker (remember Jon?) from FortySeven Media have a new video podcast they are producing called The Kick Awesome Show. CSS-Tricks was happy to sponsor Episode 13.

These guys sure look like they have a lot of fun making this show. They do a little Q&A, highlight cool web-things, do music picks (ala their other pet project), etc. It's also super high quality video. Check out the cool ad they did for …

CSS Transition Timing

Nice little article with visual demos on the different timing functions for CSS transitions. The progress bar is neat. Also notice the scaling transform on the table of contents. Not sure I love that exact implementation but I like the concept. …

The Fifth Position Value

Peter-Paul Koch:

If mobile browsers were to implement position: fixed exactly as the desktop browsers do, many sites with fixed elements would become unusable on mobile.

... I believe it’s time for position: device-fixed.…