CSS

CSS: Just Try and Do a Good Job

Have you ever worried that you're approaching CSS all wrong? That you're missing out on some new approach that makes everything easier and better? That you wish you were more confident about the state of your CSS?

I'm sure we can all empathize with Anna's sentiment here:

(more…)

Positioning Offset Background Images

If you need to position a background-image in CSS 20px from the left and 10px from the top, that's easy. You can do background-position: 20px 10px;. But what if you wanted to position it 20px from the right and 10px from the bottom?

Let's also assume we don't know the exact width and height of the element, which is likely, because fluid layouts and dynamic content. If we did, we could just do a little scratchpad math and use the normal background-position syntax.

A perfectly reasonable request, as they say. Here's some ways to go about it.

(more…)

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.

(more…)

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.

(more…)

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag