Grow your CSS skills. Land your dream job.

Article Archives

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

SitePoint Podcast #127

Listen to Louis Simoneau and I yak about CSS. …

August 27, 2011

Sideways Headers

Christian Heilmann had an interesting CSS predicament the other day. The idea was to make header tags rotated 90-degrees and align along the left of a blog of content rather than at the top.


So, like this. Easy, right?

Should …

August 26, 201157 comments

Pop From Top Notification

Have you seen that design pattern where a notification pops down from the top of the browser window, then slides away? We can rock that in pure CSS.


View Demo   Download Files

We'll just make a div:

<div id="note">
August 25, 201151 comments

When (and when not to) use an anchor tag?

Question from a reader on when using the anchor tag is the right choice and when it's possibly OK to use another element for behavioral stuff.
August 24, 201145 comments

Functional CSS Tabs Revisited

Functional tabbed area with just CSS. The backstory, where we are now, and the awesome theoretical future.
August 23, 201169 comments

Bootstrap

HTML/CSS framework from Twitter (Mark Otto and Jacob Thornton). Pretty comprehensive: nice clean design and typography, grid system (fluid or fixed), form elements, buttons/navigation, alerts, tooltips, LESS support... I think a web app startup could do a lot worse than …

August 22, 2011

Don’t Fear the Internet

Incredibly well done set of introduction to web design tutorial videos by Jessica Hische & Russ Maschmeyer. Kinda like my The VERY Basics video, but far more professional. Will be recommending this to every single person asking me how …

August 22, 2011

Deck.js

Pretty sweet slide deck framework that works in the browser by Caleb Troughton.

This is damn impressive too. …

August 22, 2011

Launch of Deals for Designers

There's a new area of the site: Deals for Designers with discounts on products and services from quality companies.
August 22, 201114 comments

Brushed Metal with CSS Gradients

By the inimitable simurai.

Another use case for the don't-exist-yet but-will-soon "conical" gradients.…

August 21, 2011

Infinite All-CSS Scrolling Slideshow

Just for kicks I wanted to see if I could make a row of images animate across a page and repeat indefinitely. Turns out it's really not that hard. The way I did it was to make one big long …

August 21, 201146 comments

How I Think Posting HTML In Comments Should Work

People post a good bit of HTML in the comments of articles on this site. They are trying to demonstrate something, ask for troubleshooting help, show alternate techniques, etc. This is excellent. I want to encourage this as much as …

August 19, 201137 comments

A Really Nice Way To Handle Popup Information

Showing additional info ("popup") when hovering over an element is a pretty easy thing to do. But there is a ton of subtle ways to improve that interaction. This articles goes over a really excellent technique for this covered by Doug Neiner at the Front End Design Conference 2011.
August 17, 201127 comments

Blogging. You can do better.

That's my (solo) panel name for SXSW Interactive 2011. I'll love you forever if you upvote it to increase my chances of getting to do it this year. It was denied city last year. I haven't talked much about blogging …

August 17, 2011

#100

I finally shot the 100th video. No big fireworks, just more front end learnin'! In this one we look at a Photoshop design and mark it up in HTML5 as semantically as we can.…

August 17, 2011

Skin your Chrome Inspector

Darcy Clarke on how you can give the Web Inspector in Chrome a facelift (with example stylesheet). …

August 16, 2011

Transitions and Animations on CSS Generated Content

Generated content means pseudo elements added to the page via the ::before and ::after. The support for applying transitions or animations to these in the current browser landscape is not great. I think this is a huge bummer, so …

August 16, 201125 comments

Flip flop navigation with box-flex

Jeremy Keith shows us how to put the navigation on the bottom of the page in a vertical layout for small screens and the top of the page in a horizontal layout for large screens by fiddling with the the …

August 15, 2011

‘space’ and ’round’ values

Louis Lazaris shows us how space and round give us some more possibilities with how repeating backgrounds are dealt with in CSS3.…

August 15, 2011

Persistent Headers

This is some code to get the header of some content area to stay visible at the top of the screen as you scroll through that content. Then go away when you've scrolled past that relevant section.


Header... persisting.

Couple …

August 14, 201154 comments

Design v9

Fun fun fun, the new site design is live!
August 10, 20110 comments

The details and summary elements

Tom Leadbetter from HTML5 doctor shows us all about the summary and details element. I think this will be a particularly useful pair of elements, especially as browser support grows, with its baked in hide/show functionality.…

August 9, 2011

Making Video Fluid Width

Me:

In a world of responsive and fluid layouts on the web one media type stands in the way of perfect harmony: video.

I wrote an article for Net Magazine where I tackle making video (from any source) work in …

August 9, 2011

Indeterminate Checkboxes

While checkboxes can only either submit their value (checked state) or not (unchecked state), they have a third visual-only state: indeterminate. This is only settable via JavaScript and does not affect the value, only the appearance. We'll cover how it works and a simple use case.
August 8, 201148 comments

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