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
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: ” […]
March 11, 2014
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 document.documentElement.style); if(supported){ var temp = document.createElement(‘div’); temp.style.backgroundSize = ‘cover’; supported = temp.style.backgroundSize == […]
September 17, 2011
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. […]
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;
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 […]
.inset-text { text-shadow: #000 -1px -1px 0; } .outset-text { text-shadow: rgba(255, 255, 255, 0.5) 1px 1px 0; }
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 );
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 […]
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 […]