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

Article Archives

34 comments

UI Pattern Ideas: List with Functions

Last week I asked people to participate in a group design project on a specific design pattern: a list with functions. The premise was:

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 functionality to edit and …

Promote JS

Finding correct, current, and well written documentation on JavaScript can sometimes be rather difficult. The web has a lot of misinformation on it (can you believe it?!). This is an attempt to get Mozilla's high quality documentation at the top of search engine results by having folks put specially crafted links on their site that link to specific sections of their JavaScript documentation.

These JavaScript kids are also so clever. Here is mine:

Dealing with Content Scrapers

Jeff Starr's response to my article on doing nothing about content scrapers. Among other ideas:

Sprinkling a few internal links throughout your posts benefits you in some fantastic ways: Provides links back to your site from stolen/scraped content, helps your readers find new and related pages/content on your site, makes it easy for search engines to crawl deeply into your site.…

Vendor Prefix Equivalents

Ever wonder what the Gecko equivalent to WebKit's -webkit-transition-timing-function is? This chart has got you covered. But more importantly, if the other rendering engines have those properties implemented at all.…

jQuery Summit

I'm speaking at the jQuery Summit, the 2nd Annual Online, Live jQuery Conference November 16 & 17th, 2010.

If you are interested, use coupon code JQUERY2CHRIS for 20% off!…

ProCSSor

The prettiest of the CSS prettifiers. I find these things quite helpful when I'm inheriting someone else's CSS and I want to get it into the format that I like the most without doing it by hand. Actually, I usually start doing it by hand and then go: Oh yeah! Computers!

This is the one I was using before, which is functionally great and I like the style in which it asks you what to do (e.g. After brace insert …

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-sizing property can make building CSS layouts easier and a lot more intuitive. It's such a boon for developers that here at CSS-Tricks we observe International Box-Sizing Awareness Day in February.

But, how is it so helpful and beloved that it deserves its own internet holiday? Time for a little bit of CSS history.

Box Model History

Since the dawn of CSS, the box model has worked like this by default:

width + padding + border = actual visible/rendered …

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