Grow your CSS skills. Land your dream job.

Article Archives

Five Questions with Tab Atkins

Tab Atkins (Twitter) is a member of the CSS working group and contributor to several other working groups in the W3C. He works for Google on the Google Chrome Team. Browsers and specs are the bones and blood …

November 14, 20118 comments

Yes/No Ipsum!

I've heard a number of people make statements lately like: "If you're using Lorem Ipsum text, just stop it." Or similar. That argument, expanded, goes something like this. Design exists to serve content. Lorem ipsum is fake content. If you're …

November 9, 2011113 comments

The Future, Glassy?

Bret Victor:

Now, take out your favorite Magical And Revolutionary Technology Device. Use it for a bit.

What did you feel? Did it feel glassy? Did it have no connection whatsoever with the task you were performing?…

November 8, 2011

CSS3 Secrets

I bet there is a couple things in this slide deck from Lea Verou that you didn't know about CSS3.…

November 7, 2011

LiveReload

Mac users, this is really worth checking out. As you work on local projects, you have your HTML and CSS open in your text editor of choice, and the web page open in a browser. With LiveReload, as soon as …

November 3, 2011

jQuery 1.7 Released

You'll probably start seeing .on() and .off() on tutorial sites so just a heads up, that's new syntax for event binding in jQuery (although all the old methods still work too).…

November 3, 2011

Columns and the Greatest Common Divisor

I was recently putting together some CSS for columns. There was a few pre-determined widths that the columns needed to accommodate. For whatever reason (maybe because every grid framework in the world is this way) my mind went right to …

November 3, 201125 comments

Five Questions with Lea Verou

Lea is a front end web developer from Greece. You have likely heard of her, as ever since she started blogging in English (read more about that below), she's had quite a boom in popularity. Or perhaps you've seen some …

November 1, 201134 comments

A Call for ::nth-everything

We already have ::first-letter and ::first-line which are useful. Why not expand those out into a full set of selectors that follow the same pattern of the ::nth-child family? I attempt to make the case here.
October 31, 201174 comments

Centering in the Unknown

When it comes to centering things in web design, the more information you have about the element being centered and its parent element, the easier it is. So what if you don't know anything? It's still kinda doable.

Not too…
October 29, 201186 comments

Lots of Ipsum

There is just too many awesome Lorem Ipsum (placeholder) text generators going around lately not to round them up.

Cupcake Ipsum

Dragée soufflé sweet roll gummi bears. Tiramisu chocolate macaroon jelly chocolate bar jujubes icing. Faworki bear claw brownie pudding …

October 28, 201145 comments

Five Questions with Paul Irish

Paul probably doesn't need an introduction around here. He's this smart successful front end developer dude who's work fuels our inner critic. So instead of a lengthy intro, I'm just going to drop a bunch of links so we …

October 26, 201129 comments

Results of Group Design Project on Rating Three Candy Bars

Last week I proposed a little design challenge: design a small part of an interface which allowed a user to rate three candy bars in order of how much they liked them. Quite a few folks took a stab …

October 25, 201119 comments

How CSS Animations Work on Sales Page for iPhone 4S

Impressed by the CSS animations on the Apple 4S sales page? I am. John B. Hall makes it clear by showing a miniaturized version where we can see all the off-screen elements.…

October 25, 2011

HTML5 for Web Designers Website

The content of HTML5 for Web Designers, the first A Book Apart book by Jeremy Keith, is online. Under the hood, the title bar at the top of the page is actually the <title> element, unhidden and styled up. …

October 24, 2011

What We Don’t Know

There is an awful lot we don't know about a user visiting our website. For example, almost everything. And we know less and less every day as the web gets bigger and its users more diverse. Let's accommodate those unknowns.
October 23, 201147 comments

Abbr’s for Web Nerd Acronyms

I'm really lazy about using <abbr> tags for acronyms. Most people who read a techy blog like this probably understand them, but surely there are some visitors who don't where a simple tooltip explanation would be beneficial. Maybe with this …

October 19, 201172 comments

Group Design Project: Rate Three Candy Bars In Order

Last time we did a group design project, we did a list with functions and we got lots of interesting ideas. Then the other day I linked to a video of Ryan Singer, a tiny part of which …

October 17, 2011201 comments

CSS Shaders

A bunch of crazy awesome affects you can apply via CSS through the filter property: blur, drop-shadow, gamma, grayscale, hue-rotate, invert, opacity, saturate, sepia, and sharpen. Adobe has been doing some great stuff with CSS lately. Their last amazing demo

October 14, 2011

Dart

It's a new language the runs in the browser and servers. A lot of it is over my head, but I always celebrate new thinking especially when it has a bunch of smart people behind it. The obvious point is …

October 14, 2011

New Poll: Ideal Page Weight

What do you think is reasonable page size to try and stay under for a modern web design?
October 13, 201162 comments

New Poll: The Case of the Giant Background Image

Let's say you've designed a web page and it makes use of a full page background image. You really like the way the site looks with this background image. It looks amazing. But the image is 350k. You've …

October 13, 201132 comments

Poll Results: Your Favorite Page Title Separator

THE PEOPLE HAVE SPOKEN. The pipe character "|" is by far the most popular page title separator with 47% of the vote and being up against 15 other choices. Example:

Article | Category | Site Title

The dash and en-dash …

October 12, 201110 comments

Making SublimeVideo Fluid Width

SublimeVideo is a nice HTML5 video polyfill service, but it hasn't allow for fluid width video. Until now.
October 11, 201117 comments

Writing Better HTML & CSS (Slides from FOWA London)

I'm just back from London where I spoke at the Future of Web Apps. My talk was titled, rather generically, Writing Better HTML & CSS. Slides pale in comparison to real talks, but I still like posting them in case …

October 10, 201138 comments

Building a Starburst with CSS

If there's one thing I love most about what I do it's building out the challenges that a designer throws my way. There's almost always a way to reproduce a design in code, and I love figuring out how to …

October 6, 201143 comments

Semantic Animation

Animations are inherently visual. But can we give a similar experience to everyone by getting a bit more semantic?
October 4, 201135 comments

Amazon Silk

Listen to the engineers behind Amazon's new "Silk" web browser talk about how it uses the cloud to take the load off mobile devices.

Sounds like it does all the asset-requesting for you from the cloud, optimizes it, then sends …

September 28, 2011

Scalable and Modular Architecture for CSS

Jonathan Snook has released an "evolving guide to CSS architecture for sites small and large." My favorite is the "Depth of Applicability" section:

Each rule set that we add to our style sheet creates an ever increasing connection between the …

September 28, 2011

Better Linkable Tabs

Linking to specific tabs is often done with hash links. I think doing it with a URL parameter can accomplish the same goal without some of the problems that hash links can cause.
September 26, 201127 comments

In Praise of the Forums

Jane Wells of Automattic lays out four reasons why someone may not use forums for a question they have. Then she disputes all four of them while sharing an example of where a forum post get a lot more done …

September 26, 2011

Sencha Looks at IE 10

Michael Mullany:

...the IE10 HTML5 experience is one of the best we’ve seen on any platform to date.

I've heard from a number of folks that IE 10 will be the most advanced browser to date (support the most standards …

September 23, 2011

Upcoming Speaking Engagements

I'll have a little string of events I'll be giving talks at.

I'll …

September 22, 201120 comments

Radio Buttons with 2-Way Exclusivity

Let's say you were tasked with creating a UI in which users can rate three candy bars from their most to least favorite. A grid of radio buttons isn't a terrible way to go about this.


A (small) grid of…
September 20, 201128 comments

New Poll: What’s Your Favorite Page Title Separator?

Just for silly kicks, let's keep on with the page title polls, this time with perhaps the most trivial of all choices. The poll is embedded on the site in the sidebar. Let everyone know what your favorite page title …

September 19, 2011124 comments

Poll Results: Favorite Page Title Structure

This was an interesting poll because there is no clear consensus on "the best way" for sites to handle page titles. It varies quite a bit even among similar websites. To keep things more focused, I put forth a very …

September 19, 201110 comments

Watch Ryan Singer Think Through a Design Problem

High quality video training marketplace PeepCode has a series of screencasts called Play by Play where they record masters of their trade doing their thing.

In this one, we get to watch a user experience designer think through a design …

September 18, 2011

Default Tab UI of the Current Desktop Browser Landscape

I opened up the same 6 tabs in current versions of all the desktop browsers, then took screenshots of the UI of just the tabs themselves. These are from a Mac running OS X Lion.


Firefox 6

Chrome 15

Opera…
September 17, 201135 comments

Fancy Scrolling Sites

In the last year or so, there's been enough sites that do fancy things when you scroll down that it's kind of a trend. I thought I'd blog it, you know, for the sake of history.

By "fancy things" I …

September 14, 201194 comments

Videos of my Pseudo Elements Talk

I've given this one a few times now, and luckily a few of them were recorded.

Front End Design Conference

In St. Petersburg, Florida - July 2011.

WordCamp San Francisco

In San Francisco, California - August 2011. This one is …

September 13, 201132 comments

Nine Image Expander

I was asked by artist Zoran Pekoviċ if the effect on the homepage on their site, which is currently done with Flash, could be done with HTML, CSS, and JavaScript.


View Demo   Download Files

I thought it seemed like …

September 11, 201157 comments

CSSOff Kickoff on Oct. 20th!

The PSD for the CSSOff is going to drop on October 20, 2011. You'll have exactly 2 weeks (until November 3) to code up and submit your final conversion. Follow the title link to the official page where you can …

September 7, 2011

Yay! CSS-Tricks Shirts!

I know what you were just thinking. You were thinking, man, I love CSS-Tricks so much but nothing in my wardrobe helps me publicly display that. Right‽ Fret not. Now you can get your hands on one of these bad …

September 7, 201160 comments

FitVids.js

Super lightweight jQuery plugin to make all videos fluid width, while maintaining their original aspect ratio. Explanation, video, and discussion on Dave's site.…

September 6, 2011

Why Browsers Read Selectors Right to Left

When I first learned that browsers read CSS selectors from right to left it felt kinda weird and confusing. Boris Zbarsky explains why it's done that way in a way that makes perfect sense. Part of the reason:

...most of …

September 5, 2011

steps()

Lea Verou makes a "typing" animation with the CSS3 sub-property steps which allows you to specify how many keyframes an animation uses. Knowing the number of keyframes means you can know exactly that the CSS will be like at that …

September 5, 2011

Tabs with Round Out Borders

A technique for a rounded tabs where the top corners are rounded, but also the bottom corners are rounded where they attach to the content area. "Round out" or "flared" borders, if you will.
September 4, 201154 comments

Adaptive Images

Project from Matt Wilcox for serving the right images to the right devices (i.e. small images to small browser windows, large images to large browser windows). Small browser windows, regardless of bandwidth considerations, shouldn't get a giant image scaled down …

August 31, 2011

Fold Out Popups

A rich HTML popup content area that works when you click a link/button (rather than hover like tooltips work). This uses a bunch of CSS3 and the functionality is also handled purely with CSS, although we discuss that at the end.
August 31, 201152 comments

Anything​Zoomer Plugin

My AnythingZoomer jQuery demo has been plugin-ized by Mottie (who also maintains the AnythingSlider). It has some new features and is easier to work with by nature of being a plugin. …

August 30, 2011

*May or may not contain any actual "CSS" or "Tricks".