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

Article Archives

WebKit Native Asynchronous Script Loading

WebKit nightlies are now supporting this. The syntax looks like this:

<script async src="myAsyncScript.js" onload="myInit()"></script> <script defer src="myDeferScript.js" onload="myInit()"></script>

Both async and defer scripts begin to download immediately without pausing the parser and both support an optional onload handler to address the common need to perform initialization which depends on the script. The difference between async and defer centers around when the script is executed. Each async script executes at the first opportunity after it is finished downloading and before …

40 comments

Blockquote Bulge

In HTML, a block of text being quoted from elsewhere is marked up like this:

<blockquote>Hey, I'm a block of text from elsewhere.</blockquote>

In your CSS, you'll likely have special styling for these. Perhaps a bit of a background and padding:

blockquote { padding: 10px; background: #eee; }

If the quote is multiple paragraphs, there may be paragraphs nested within the blockquote (both are block-level elements so that's fine). Quotes are also likely to be within larger areas of …

248 comments

Group Design Project: List with Functions

Hey folks, let's design something together! I think it will be interesting and fun to try and tackle a simple design pattern as a group.

The Premise

The design pattern we are going to tackle is a list with functions. Think of a list of five names. The primary function of this list is to click the names. The secondary function of the list is that the list needs to be manageable. There needs to be some kind of …

58 comments

Transparent Borders with background-clip

Have you ever seen an element on a page with transparent borders? I think Facebook originally popularized it giving birth to lightbox plugins like Facebox. I don't think Facebook sports the look anymore, but it's still rather neat.

You might think it would be as simple as this:

#lightbox { background: white; border: 20px solid rgba(0, 0, 0, 0.3); }

However, setting a transparent border on an element will reveal the elements own background underneath the border.

In the …

32 comments

Tuts+ Marketplace

You already know that Envato runs marketplace sites like ThemeForest, GraphicRiver, and CodeCanyon that help designers and developers get a jumpstart on projects through buying themes, graphics, and code to help out. You also already know that Envato runs tutorial blogs like Nettuts+, Phototuts+, and Psdtuts+ which also help designers and developers through teaching.

In a brilliant-in-its-simplicity move, Envato has combined these two worlds into the Tuts+ Marketplace. Now their premium tutorials are available à la carte. I think …

HTML5 Pack for Illustrator CS5

Via Real World Illustrator:

You can designate certain attributes (i.e., fill, stroke, opacity) as variables right from the Appearance panel in Illustrator. When saved as SVG, developers can easily change the variable definition to "reskin" or modify the art

And other interesting stuff like:

You can select an object on the Illustrator artboard and then choose Object HTML5 Canvas Make. These elements are rasterized and included as canvas elements when saved as SVG, giving developers the ability to control …

Need a Font Identified?

Stephen Coles of Typographica has a new Twitter account:

Rapid, human, independent type research. Send an image, get the font name and link. Alternatives too.

WhatTheFont! is cool, but you can't beat professional human identification. Like the story of John Henry, only for type nerds. This is a cool service to offer, I hope Stephen can keep up with it!

Update: Justin Callaghan wrote in to offer up three additional venues for font identification:

38 comments

Adding Stroke to Web Text

Fonts on the web are essentially vector based graphics. That's why you can display them at 12px or 120px and they remain crisp and relatively sharp-edged. Vector means that their shape is determined by points and mathematics to describe the shape, rather than actual pixel data. Because they are vector, it would make sense if we could do things that other vector programs (e.g. Adobe Illustrator) can do with vector text, like draw a stroke around the individual characters. Well, …

59 comments

Box Sizing

The "box model" in CSS works like this:

width + padding + border = actual visible/rendered width of box
height + padding + border = actual visible/rendered height of box

It's a little weird, but you get used to it. In IE 6 and earlier, when in "quirks mode," the box model was treated differently.

width = actual visible/rendered width of box
height = actual visible/rendered height of box

The border and padding values moved inward, cutting into the width/height …

Missing Documentation for matrix3d Transforms

Documentation from Sebastian Deutsch on using -webkit-transform with matrix3d, which is rather complicated but can do cool stuff. Also, he used CoffeeScript for the demo (first I'm hearing of it) which looks kinda like SASS for JavaScript.…

49 comments

Ordering CSS3 Properties

When writing CSS3 properties, the modern wisdom is to list the "real" property last and the vendor prefixes first:…

41 comments

How Long Should We Ban IPs?

There are all kinds of reasons IPs get banned. A forums manager might ban an IP because the user at it is spamming. An admin of an email server might also ban IPs for spamming. A web service might ban an IP for using an API in an unapproved way.

On this site, we used to ban IP's in the forums all the time (the new forums have been much better in spam prevention). I also sometimes ban …

BonBon Buttons

These are way above and beyond the level of any other "CSS3 buttons" I've seen. Multiple backgrounds combining gradients and images, uneven border-radius, pseudo elements, HSL coloring, @font-face icons, transitions, box shadows, text shadows, hover and active states... the list goes on. Every trick in the book masterfully employed.

They make my button maker look dull and flat. …

44 comments

Digging Into WordPress, The Book, Version 3

When we first released the book Digging Into WordPress, we thought of some reasons why people might not want to buy it. A big reason is because tech books can go out of date quickly, especially when the subject is a fast-developing technology like WordPress. So, we fixed that. When you buy this book, you get PDF updates to it for life.

Today is just such an event. WordPress 3.0 has been out for a while now, and so …

33 comments

Percentage Bugs in WebKit

Using percentage values for certain things can have slightly unexpected results in WebKit based browsers. For instance, if you have a series of columns set in percentage widths with percentage padding, WebKit can calculate their sizing rather strangely.

Update: WebKit now has subpixel rendering, which should clear up this issue.
The red lines indicate the column as rendered with WebKit. The background shades of gray are accurate placement of those columns in percentage widths.

It's percentages in general that seem …

More on CSS Selector Performance

This is a direct link to a PowerPoint file by Steve Souders (in April 2009). Of particular interest is pages 19-33 with all the information on CSS selectors. Evidence points to yes, there are efficiency differences in how you write selectors. But efficient CSS can sometimes come at the cost of larger CSS (bad) and that a "real world" levels even "costly" selectors aren't that big of a deal.…

52 comments

CSS is to HTML as a CMS is to… HTML

From the desk of important beginner concepts:

You have a website with 100 pages on it. All 100 pages use the same style.css file. You'd like to change the background color of every single page. You make one adjustment in the CSS file, and that background color adjustment will be reflected across all 100 pages. You don't need to edit each of those pages individually. That's the core benefit behind CSS: abstracting the design away from the markup.

Now you …

50 comments

WebKit HTML5 Search Inputs

One of the new types of inputs in HTML5 is search.

<input type=search name=s/>

It does absolutely nothing in most browsers. It just behaves like a text input. This isn't a problem. The spec doesn't require it to do anything special. WebKit browsers do treat it a bit differently though, primarily with styling.

A search input in WebKit by default has an inset border, rounded corners, and strict typographic control.…

Stylebot

Chrome users and CSS wranglers, check this out. It's an extension which adds a "css" link on the right in your URL bar. Click it to open a CSS Edit-like pane on any website where you can click elements and adjust their CSS on the fly. The CSS that you edit will automatically be applied any time you visit that domain, allowing you to make persisting changes to the sites you visit. …

.net Magazine Awards

The Oscars of web nerdery. I'm nominated for a flatteringly high number of categories! Web personality of the year? You know it.…

54 comments

New Poll: Multiple JavaScript Libraries

Have you ever tried to debug a site where a beginner web designer has loaded the page with scripts? There's a couple copies of jQuery in various versions, maybe a little Prototype or MooTools thrown in. We can laugh a bit, but many of us went through that stage where we just didn't really understand things well enough to know there was any problem with that. And is there? Aside from the bandwidth concerns, most libraries have steps you can …

FireQuery

This is a very cool extension for Firebug (add-on for an add-on?) that expands Firebug's capabilities with jQuery. For instance, a built in jQueryify button, showing attached event handlers in the Content / DOM tree view, and highlighting all elements in a jQuery collection. I don't think it's new but I hadn't seen it until I finally watched Remy Sharp's debugging tools screencast from last month. …

38 comments

Intentional Difficulty

Here's some food for thought.

When designing something that you are reasonably certain the user is willing (or forced) to invest time in learning to use proficiently, is it beneficial to intentionally make some tasks just slightly more difficult than they could be?

Not incredibly hard, not convoluted, not outright counter-intuitive. But perhaps making some information a little more buried, or placing an action in a slightly strange place. If the user is really looking, they'll be able to find …

15 comments

Poll Results: Action Verb Clarity

The latest poll was all about picking the best sentence for a user to perform a specific action on a website. The choices are listed below, sorted from most popular to least:

  • 39% - Select a user and then click the Update button.
  • 37% - Select a user and then click Update.
  • 8% - Select a user and Update.
  • 7% - Select a user and then press the Update button.
  • 5% - Select a user and then press Update.
  • 3%

Fixing Background “Bleed”

Mike Harding with a desperately needed fix for when backgrounds "leak" out of elements with borders and border-radius.…

37 comments

Forums Downtime

Quick public service announcement: The CSS-Tricks forums will be unavailable starting now as the undergo awesomeness upgrades. I'll update this post when they are back!

And they are back! Might be a bug here and there. Definitely let me know if you see one.…

97 comments

Browser Jumping

If you asked me right now, Hey Chris, what's your favorite browser? I wouldn't know what to tell you! I've been a Firefox user primarily over the past few years, but over the last several months my allegiance is no longer to any one browser. I'm a browser jumper. I feel like it's only fairly recently that the tools are finally there that I can do that without too much trouble. …

Blogging is Still Awesome & Yours Can Kick-Ass

That's the title of my proposed talk for SXSW. I'm rather excited about it. I'm going to be talking a lot about this blog and how I've done things over the years and what has and hasn't been successful for me (which I've never really talked about before). Then, how you can take these ideas and improve your own blog. I promise it's not going to be a bunch of junk you've heard a million times about how content is …

44 comments

Getting Started with CakePHP: An Event Manager

The following is a guest post by r0mk1n. I was able to easily follow along and have the demo app up and running on my machine in just a few minutes. It's pretty cool how easy it has become to quickly build powerful web applications.

CakePHP is a free, open-source, rapid development framework for PHP. It’s a foundational structure for programmers to create web applications and enables you to work in a structured and rapid manner–without loss of flexibility. …

42 comments

Show Markup in CSS Comments

Let's say you are creating a CSS file for a modular bit of a webpage. Perhaps you are the type that separates your CSS files into bits like header.css, sidebar.css, footer.css, etc. I just ran across an idea I thought was rather clever where you include the basic markup you will be styling as a comment at the top of your CSS file. For example, a sidebar.css file might look like:…

232 comments

Design v7

I rolled out a new design this weekend! As usual it's a bit of an aesthetic overhaul (blue!). I'm going to cover the why, the new aspects, and some of the new technology involved. RSS readers, you'll have to make the jump and look around =).

And now, a note about critiquing: I love critiques! If you want to rip this design to shreds, please do so. I have my bachelors in Art and part of that was getting …

BetterSource for Safari 5

One of the major bummers about Safari is that the "View Source" view is totally lackluster. No code highlighting, no live links, no line numbers, no refresh. Boooo. The BetterSource extension solves every one of those problems. I do wish there was an option to show only one of the buttons or the other in the header bar though (one is for original source and one is for generated source) I don't need both. Update: You can just right click …

52 comments

iPhone “slide to unlock” Text in WebKit/CSS3

There are a couple of WebKit specific properties that make giving text a gradient background possible:

-webkit-background-clip: text; -webkit-text-fill-color: transparent;

Those will allow the background of the parent element to become the background of the text inside. I gots to thinkin', if we made a made a horizontal gradient that faded in a gray-white-gray pattern, then animated it from left to right, we could make the iPhone/iPad's "slide to unlock" screen with no images at all!

WebKit only demo:

View

37 comments

CSS Sprites Workflow

When you are coding up a brand new site, I think this is a pretty efficient workflow for how to handle CSS Sprites.…

Wufoo API Contest

We're giving away a friggin' Battle Axe (and $3,000) to the winner of the Wufoo API contest. Cash prizes and Wufoo accounts for life to the second and third place winners as well. Developers, you have until the end of this month! Check out the page for ideas and API wrappers.…

20 comments

Double Click in CSS

With the recent proliferation of touch devices, the web designers of the world are losing our beloved mouse pointer. There has been some interesting talk about how we essentially lose the :hover pseudo class in CSS as well as mouseenter, mouseleave, and mousemove in JavaScript. Then just earlier this week I did a post about how you can use the tabindex attribute to basically respond to a click with pure CSS. It got me thinking, can we somehow pull off …

one comment

Performance of CSS Selectors

The idea here was to compare different styles of writing CSS and see how they affect the page rendering. So using all ID's, using all classes, using OOCSS techniques, etc. I gave some best practices advice on this a little while ago, but had no tests to back anything up. So the most interesting part of it all to me was how the tests were being measured. The test idea came from a Jon Sykes article where he writes:

At …

3 comments

Cross-Browser HTML5 Video and Audio

MediaElement.js is a jQuery-based package for allowing us to:

  1. Use the HTML5 elements <videoand <audioand have them work cross-browser (including mobile WebKit)
  2. Deliver a consistent UI for controls
  3. Using only a single format

I'll be using it in the redesign of this site. I was all prepared to just say I'm using HTML5 video and if your browser doesn't support that then just download directly and use VLC or something. But then I realized I'd have to re-encode …

19 comments

Linkage Returns

Way back when I used to do "Links of Interest" style posts. I'm happy to announce now that 1) There is a new design of this site coming within the next few weeks and 2) Linkage is coming back. I'm going to do it like it's done currently on Digging Into WordPress, sort of Tumbr/Daring Fireball style. There will be no comments on this site for that style of post (comments should happen on the linked post). The title …

45 comments

Expanding Images using HTML5’s contenteditable tabindex

HTML5 has a new attribute, contenteditable, which can be applied to any element which allows it to be edited directly in the browser window. Think of text input with a predefined value, but it can literally be any element. Form elements like text inputs support the :focus pseudo class, which allow us to style those elements when they are clicked upon or otherwise navigated to. Giving an element the contenteditable attribute means it also now supports the :focus pseudo class, …

44 comments

Fix Inserted HTML5 Content with HTML5 innerShiv

When working with HTML5 today, many of you know that you'll need to include the "HTML5 shiv" to ensure that CSS will recognize and be able to style those elements in browsers that aren't yet hip to HTML5.

<!--[if IE]> <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->

Credit for that to Remy Sharp, Jon Neal, John Resig and anybody else who contributed to that idea. Also for the benefit of those non-hip browsers, it's best to reset many of the HTML5 elements to block-level …

57 comments

Inset Border Effect jQuery Plugin

This is a guest post by Robin Thrift who wrote to me with some demo code for creating this effect. Together we turned it into a jQuery plugin. Enjoy!

I was browsing through a few Flash templates on ActiveDen when I came across an effect I see very often on Flash website galleries. It's a very simple but neat effect. The images have a border, but unlike CSS borders, it covers up part of the image. I wanted to use …

111 comments

Guidelines for URI Design

This is a guest post by Jacob Gillespie who started an interesting thread on Forrst about this topic. I invited him to post it here, to which he graciously accepted.

Over the past several years, I have taken an interest in usability and web design. One of the areas that seems to be often overlooked when it comes to design of a site is the design of the URIs on that site. Modern CMS systems allow for varying degrees …

41 comments

CSS Run-in Display Value

CSS has a value for the display attribute called run-in. It's like this:

h3 { display: run-in; }

The point is to allow a header to run into text below it, without sacrificing semantics or running into the problems you might run into trying to force it with other layout techniques.

Let's take a closer look.…

199 comments

Dude, you browse with JavaScript on?

Dude, you browse with JavaScript on?

Uhm, yeah, why wouldn't I?

It's totally insecure. Hackers could destroy your computer.

Hackers? What is this 1995? And, no they can't.

They can definitely steal information about you without you knowing.

Like what?

Like you're address book information or your browsing history, depending on your browser and settings.…