Simple Burger Menu using just CSS

There are a bunch of ways to do this, including gradients and psuedo-elements, but a simple way is to just use borders. Here’s my take:


Justified Menu with CSS

There are lots of bad ways to do this – on Stack Overflow, you’ll see a bunch of highly-voted answers that are inline elements with inline-block elements inside them (not great). Here’s my take – might fail on older browsers:


JavaScript – detect support for background-size: cover

Most of the other solutions worked generally, but gave false negatives (e.g., IE9 does support it, but most test would indicate it did not). Here’s what seems to work so far, for me:

If you just use the second test (in the if block), old IE will report true – the first test is […]

Rendering speed

Back in the early 2000s, I was obsessed with performance tweaks – it was then that I first realized that writing massive numbers of elements with javascript was actually faster than having them written as markup – and when I learned that absolutely positioned elements were more quickly rendered than static or relatively positioned elements. […]

CSS3 Transition syntax

vendor extensions and standards CSS3 transition declarations: syntax:


gloss with css gradients

an assortment of glossy effects with CSS low-gloss black (looks good with inset text and separators, gray type)

high-gloss black

aero-style blue

Simple inset / outset text with CSS

CSS Gradient Background

AFAIK, here’s the only currently supported background-image values (both vendor extensions):

(CSS box-sizing) TextArea width 100% exceeds container

textareas with width: 100%; will often appear to exceed the boundaries of it’s containing element. the appropriate fix is to use the box-sizing declaration, and set it to ‘border-box’:

Note that each of the major vendors support a vendor-specific extension, in addition to the more-direct but as-yet largely unsupported CSS3 declaration.

CSS content & HTML entities

The content CSS declaration is often maligned as violating SoC (separation of content) – IMO this is often perfectly acceptable – perhaps you want to add a graphical symbol for presentational purpose only – say, a checkmark entity before list items for all completed tasks. While the content property does support markup, you need to […]