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

Article Archives

15 comments

Recent Bits

I was out last week getting my bluegrass festival thing on. I'm just catching up with the ol' internet and thought I'd recap the interesting bits: …

34 comments

In IE, iFrames on Pages in Quirks Mode Also in Quirks Mode

Just wanted to make sure that this was documented. Here's what I think the most important lesson is:

If you are creating a page using HTML5 and you think there is some reasonable chance that someone may embed this page on another via iframe, you should use the HTML5 shim on it for all version of IE.

Styling List Markers

Have you ever tried to style the numbers in an ordered list? You end up doing dumb stuff like wrapping the insides in spans, styling the list items, then removing that styling with the span. Or using background images in crazy ways. Or removing the list styling and putting in your own numbers.

All of those ways suck. Roger Johansson has a good way with pseudo element counters.

P.S. The spec for lists has been updated with some new super

82 comments

Creating a Body Border

A border that goes all the way around the browser window and stays there when you scroll. In this article we cover a few different techniques to get it done, from the deepest browser support to the most progressive.

Animated 3D Objects Without SVG or Canvas

One of the ways you can make a triangle with CSS is by using a 45-degree angle gradient on an element that goes from from colored to transparent with an hard split at the half-way point. Then you can use CSS3 stuff like translate, rotate and skew on them to alter their shape. And if you are really fracking good at it like James Long, you can make an entire animated 3D shape out of a whole bunch of them.…

23 comments

Choice & Value Pair

Let's say in a form you need to allow the user to select a single unique choice. That's the territory of either a select dropdown menu or a group of radio buttons. Now let's say there is direct follow-up question to each particular choice. For example, an order form for some kind of scientific liquid. It comes in Ounces, Cups, or Pints, and once that's selected, the number of Ounces, Cups, or Pints to be ordered needs to be specified. …

55 comments

When Using !important is The Right Choice

Using !important rules can be a dangerous road to start going down, but they exist for a reason. There are some good use cases which we'll cover here.
34 comments

Prevent White Flash While iFrame Loads

How to prevent an iframe from flashing white while the page is loading. An ugly problem when the background of your site is anything other than white.
88 comments

Full Browser Width Bars

Yet another useful thing that pseudo elements can do for us: allow us to create full browser width header bars without using internal non-semantic wrappers.
11 comments

Good Idea: “What is this charge on my credit card?” Page

If you charge for something online, having a dedicated page on your site where you explain what the charge is on a credit card statement is a good idea. You can point people to this page via a short URL right on the credit card statement.

RewardJS

Fix a bug. Get a prize.

A site to incentivize helping out on open source JavaScript projects. Every single day there is a prize that someone earns through sheer number of bug fixes closed. Also weekly and monthly prizes on the same metric. This month's project: jQuery UI. CSS-Tricks and Richard Worth are sponsoring today's prize which is an iPod Touch (or equivalent gift card). …

89 comments

Personal Blogs of Web People That I Like To Read

My favorite blogs are personal blogs of one person. I like it when blogs "have a voice" and personal blogs can't help but have that since all the writing is by the same person. I read a bunch of them and I thought I'd share. Below is a big ol' list that are specifically people that blog, generally, about web stuff - be it design, development, entrepreneurship, typography, business, illustration, whatever. You probably know a lot of them. Maybe some of them you don't.
12 comments

Upcoming Talks

I'm talking at a bunch of events coming up this year. Come to them!

FitText

FitText makes font-sizes flexible. Use this plugin on your fluid or responsive layout to achieve scalable headlines that fill the width of a parent element.

Super simple, super nice effect, super practical jQuery plugin by Dave Rupert.

You need to attach an event to the window resize event, which can fire fifty zillion times in IE & WebKit as you resize a browser window, so if you wanted to slow that down you might wanna try this. …

CSS Regions Demos

Adobe has put together some pretty compelling demos of "CSS Regions." Download the package and run the included "Mini Browser" to see them. You define shapes (kinda like an image map) in which content flows. If needed, you define how the shapes are connected to one another and the order by which they do that. It's a bit complicated and you'll probably need some kind of GUI tool to help with the polygon code. It's also a step forward in …

Masonry CSS

Simple and damn clever idea by Radu Chelariu. Use multiple columns and inline-block elements to create that "masonry" / staggered block layout that is hugely difficult to do otherwise. …

55 comments

Case Study: jQuery Fixer Upper

We'll look at some jQuery code that a CSS-Tricks reader posted in the forums. We'll suggest ways to improve the code to make it more efficient and more extensible. We'll also make some guesses about the HTML that it goes with and discuss improvements there.
13 comments

Window Inactive Styling

Using some non-standard pseudo selectors, you can change the styling of things when the browser window is inactive. The only "practical" use right now is text selection colors, which automatically do this unless you override it. But we'll fix that!

Outer Border Radius Tabs

Imagine a real-life tabbed folder. The tabs on those aren't only rounded at the top of the tab, but they also connected to the folder with a rounded edge. Top corners, easy, just border-radius. Bottom corners, not so easy. Steve Smith has a published a neat technique utilizing pseudo elements to do it.

I tackled this same exact idea that I'm using for some upcoming talks and this is how I did it.…

Border Radius on Images

If you ever tried to use border-radius on <img>'s, you know that it doesn't always work (even if the browser supports that CSS3 property, like Firefox 3 and Opera 11). The root of it is that the image is content, not a container, and the container is what gets rounded with border-radius. Jonathan Neal has a demo to make this work. Essentially it sets the background of the image element to itself, and then changes the src of …

32 comments

Browser Support for :before/:after Pseudo Elements

The exact (pretty much) browser support levels for these style of pseudo elements. It's pretty darn deep, folks, and you can do really cool things with them while keeping your markup clean.

Font Sizing with REM

One of the problems with using "em" as font sizes is that they cascade, so you are forever writing rules that select nested elements to reset them back to 1em; CSS3 now has rem ("root em") to prevent that issue. Just declare a px fallback and you can use it today. Snook shows us they way.…

70 comments

Custom Scrollbars in WebKit

You can customize scrollbars in WebKit browsers. Here's the CSS you need to know about to get it done, with examples.
72 comments

Responsive Data Tables

Tables of data can only squish horizontally so far, so they can be a pain to browse on small screens (like mobile devices) where you may need to scroll both horizontally and vertically to browse the information at readable text sizes. We'll explore a CSS-based possible-solution to this issue.
67 comments

New Poll: Working Environment

The new poll (in the sidebar) asks:

In what environment do you primarily work?

I've worked from home for a lot of years but that will soon be changing. I'm interested to know the environment readers of this site work in.

If you don't work at the moment, there is an option for that. If you are a student, there are options for that. If you are a student that works, vote based on the working part. …

CSS Gradients from Image

Nicole Sullivan thinks "wouldn't it be a nice if there was a tool to convert an image of a gradient into CSS code?" The community responds with some newly-created tools to do just that. I couldn't get either of the non-command-line tools to do a multi-stop gradient, but they are only a few days old.…

CSS Stress Testing

Bookmarklet from Andy Edinborough which analyzes your page by removing class names one by one from all elements and testing the pages scroll performance. In other words, if you are having trouble scrolling a page and suspect it's fancy CSS3 stuff slowing down the party, this bookmarklet may help you track down exactly what it is.…

27 comments

Poll Results for Conditional Comments

How did people respond when asked if they wanted the power to serve content conditionally to any browser? The results are pretty interesting...
35 comments

Fun With Blurred Text

We'll cover how to blur text with CSS3 and do it safely by feature-detecting first. Then we'll do a bunch of experiments with individual letter blurring and also some clever jQuery which gives us deeper access into specific values of a text-shadow.

CSS vs CSS3

Trent Walton designs a website then codes it up two ways: new school CSS3, and old school image slicing with no CSS3. Going new school meant 1) he could do it faster 2) the page size was smaller 3) less HTTP requests needed and 4) it's easier to update. Not that you all need convincing around here.…

Micro Clearfix

Nicolas Gallagher challenges some old assumptions about what's needed to make the pseudo element style "clearfix" work. …

60 comments

Faking ‘float: center’ with Pseudo Elements

Using a couple of floated pseudo elements on the elements containing columns of text, we can knock out a part in the middle making it look like text is wrapping around an image both directions.

CSS Gradient Patterns Gallery

Gradient wizard Lea Verou compiles all her crazy I-didn't-know-that-was-possible patterns into one library with easy to snag code samples. Make sure to click the patterns for full screen view.…

16 comments

Value Bubbles for Range Inputs

HTML5 range inputs, in supported browsers and by design, don't show the user the actual value they are submitting. If you want to use the cool slider, but show the value, you'll have to do that yourself. Here we use the output element and jQuery to show the current value in a bubble that hovers above the range input.

IE 10

Right on the heels of IE 9's release, there is already a platform preview for IE 10 (video).

Awesome: Flexbox, Grid, Multi-column, Gradients, (and soon), Transitions and 3D Transforms

Not awesome: No text shadow, No HTML5 Forms support…

Front End Design Conference

July 22, 2011 - St. Petersburg, Florida. This is the third year going. Two years ago, I spoke at the first one which was my first "real" speaking gig ever. This year I'll be talking CSS, which, strangely enough, I've never talked about live before. Specifically, pseudo elements.…

:any()

Marco Kuiper with some real world examples of how the :any() selector (already live in Firefox 4 and WebKit nightlies) can clean up otherwise clunky selectors. …

48 comments

Play Sound on :hover

Use JavaScript to trigger the playing of a sound (an HTML5 audio element). A couple of ways to do it are presented here, along with a few gotchas to watch for.

WhatFont Bookmarklet

  1. Oooh that's a nice looking font!
  2. Click bookmarklet
  3. Hover over font
  4. Font name knowledge acquired.

The Cicada Principle

So there is this bug... also prime numbers... and... just read it it's really neat and has practical web design implications. …

36 comments

What if there was no position: static;?

A fun thinking exercise for CSS nerds! What if all elements defaulted to relative positioning instead? What are the advantages, disadvantages, and caveats to consider...
25 comments

Reveal a Background Image upon Text Selection

Highlight text, reveal an actual image beneath! Not possible with the text selection pseudo class, but is possible by wrapping selected text in spans via an open source JavaScript library and adding the background image to that.

Glowform

Super hot color gradient glowing action by Kayla Rose.…

Absolutely Positioned Textareas

Snook reminds us we can set the top/left (or bottom/right) when absolutely positioning textareas, but not all four values (which cannot out-force the width/height). …

Griddle

Get a gridded up background-image on-the-fly.