Float Labels with CSS

You've probably seen this pattern going around. It's an input that appears as if it has placeholder text in it, but when you click/tap into that input, that text moves out of the way and allows you to type there. It's rather clever, I think. Brad Frost has a really good post on it, detailing the pros and cons and such.

Many of the demos I've seen involve JavaScript. The other day I was checking out at Nest.com, saw their technique for it, and I thought of a way I could pull that off without JavaScript. So here we are.


A Blue Box

A little meme went around CodePen the other night. A Blue Box. I'm not sure how it started, but lots of people started posting code of different ways to draw a blue box. It's weird, it's funny, but it's also rather amazing there is as many ways as there are for doing something so simple.


The CSS Standards Process

The following is a guest post by Sebastian Ekström (@seb_ekstrom) a web developer from Sweden. I was interested in it because we talk a lot about CSS around here but have never talked about how CSS comes to be. CSS is just a syntax invented by people like you and me to try and solve problems. It's an extremely complicated thing involving: ease of use, backwards compatibility, browsers ability to implement with satisfactory speed, coverage of use cases, attempting to see the future of what is needed and how things may be used, and more. As we well know, bad choices hurt, and hurt for a long time. That's why there is a process. Here is Sebastian's intro to that process. I had Tab Atkins review it and comment prior to publication.


CSSOff 2013

It's live!

If this is the first you've heard of it, it's a contest where you get a Photoshop document and have two weeks to convert it into HTML and CSS. You're judged on an established set of criteria.

The design this year is by Daniel Mall.

You have to submit your design through CodePen. As you'll need to host files (like images) to make it happen, and you'll want to be working privately, you'll need a CodePen PRO account, which you can have for free for the duration of the contest. Just log in and then go here and get the free upgrade.