Данный сервис позволяет легко создавать CSS-спрайты для любого требуемого набора флагов. Выберите необходимые флаги из списка и получите изображение в формате PNG и соответствующий ему CSS код, уже готовый для использования на Вашем сайте.

Thimble is an online code editor (with nice viewer animations!) that makes it easy to create and publish your own web pages while learning HTML, CSS & JavaScript.

Here is your mission, should you choose to accept it: create a table of items. Each item should span a third of the content area, with the fourth item starting on a new row, much like floats. However, a particular item must always display the price at the end of the first row. via Pocket

Gosh I love buttons. They have so many meanings.

Chrome on android phones uses font boosting, so -webkit-text-size-adjust is being ignored no matter what value you set. You can disable font boosting it by setting max-height to something large(100000px or so) see this bug.

A site originally created for a workshop on flexbox.

Layout seems to be a hot topic at the moment, mostly prompted by the ALA redesign and the numerousdiscussions of the choice by Jasonand the ALA team to go 1024 for a fixed width. I’m not going to go into my thoughts on ALA in too much depth here, there’s been a lot of that already, but it seems like the right time to get this article out.

For all of the advantages the web has with distribution of content, I’ve always lamented the handiness of theWYSIWYG design tools from the print publishing world. When I set out to redesign my personal website, I wanted to have some of the same abilities that those tools have, laying out pages how I saw fit, and that meant a flexible system for dealing with imagery.

a magical utility belt for stylus

A jQuery plugin that uses CSS transitions to animate an element's height or width to or from auto.

We can use SVG in data URI, but it works for Webkits+Fx only. With encoding SVG in data URI works in all modern browsers! : )

NOTE: As the results are random, some buttons look pretty cool, while others...not so much.

When theres 281,474,976,710,656 choices, perhaps its better to roll the dice.

Earlier today I discovered an interesting way to keep (store) a CSS style on an element using CSS transitions. As far as CSS only solutions go, there are two other tricks that can be used to achieve this similar behavior: using either the :checked or the :target pseudo selectors. In this post, I’ll show you my CSS transition technique used above, followed by a slightly cooler example that I’ve been working on.

A Sass replacement for the standard CSS keyword color system. Provides more visually appealing hues for many CSS keywords; adds new colors with more relevant and easily remembered names. Inspired by Ingrid Sundberg’s color thesaurus and the work of Adam Morse.

Set column and gutter widths, choose the number of columns, and switch between pixels and percentages.

Susy is a helper tool that lets you created ultra customizable grids on the fly easily.

For the last several months, I’ve been using a Sass grid system called Neat. It’s done almost everything I need and it’s pretty easy to get started with. However, lately I’ve found myself writing extra styles to augment the Neat grid. Rather than extend it on my own, I decided to find a Sass grid system that was more powerful. That system is Susy.

The tool to establish a typographic system with modular scale and vertical rhythm.