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: .burger-button { width: 20px; height: 3px; border-top: 3px solid #000; border-bottom: 9px double #000; } Fiddle

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: MENU ITEM LINK TWO WORDS ANOTHER #menu { text-align: justify; } #menu:after { content: ” […]

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: var cover = (function(){ var supported = (‘backgroundSize’ in; if(supported){ var temp = document.createElement(‘div’); = ‘cover’; supported = == […]

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: transition: declarations: -ms-transition: all 0.5s ease-in; -khtml-transition: all 0.5s ease-in; -o-transition: all 0.5s ease-in; -moz-transition: all 0.5s ease-in; -webkit-transition: all 0.5s ease-in; transition: all 0.5s ease-in;

gloss with css gradients

an assortment of glossy effects with CSS low-gloss black (looks good with inset text and separators, gray type) background-image: -webkit-gradient( linear, left top, left bottom, color-stop(0, #646262), color-stop(0.5, #484848), color-stop(0.5, #3D3D3D), color-stop(1, #4C4C4C) ); background-image: -moz-linear-gradient( center top, #646262 0%, #484848 50%, #3D3D3D 50%, #4C4C4C 100% ); high-gloss black background-image: -webkit-gradient( linear, left top, left […]

Simple inset / outset text with CSS

.inset-text { text-shadow: #000 -1px -1px 0; } .outset-text { text-shadow: rgba(255, 255, 255, 0.5) 1px 1px 0; }

CSS Gradient Background

AFAIK, here’s the only currently supported background-image values (both vendor extensions): background-image: -webkit-gradient( linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(1, #000000) ); background-image: -moz-linear-gradient( center top, #FFFFFF 0%, #000000 100% ); background-image: linear-gradient( top, #FFFFFF 0%, #000000 100% ); filter: progid:DXImageTransform.Microsoft.Gradient( StartColorStr=’#FFFFFF’, EndColorStr=’#000000′, GradientType=0 );

(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’: -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; Note that each of the major vendors support a vendor-specific extension, in addition to the more-direct but as-yet […]

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 […]