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:
|
1 2 3 4 5 6 |
.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:
|
1 2 3 4 5 6 |
<div id="menu"> <div>MENU ITEM</div> <div>LINK</div> <div>TWO WORDS</div> <div>ANOTHER</div> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 |
#menu { text-align: justify; } #menu:after { content: " "; font-size: 0; display: inline-block; width: 100%; } #menu > div { display: inline-block; } |
Fiddle
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:
|
1 2 3 4 5 6 7 8 9 |
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 == 'cover'; }; return supported; })(); |
If you just use the second test (in the if block), old IE will report true – the first test is […]
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:
|
1 |
transition: <property> <duration> <easing> |
declarations:
|
1 2 3 4 5 6 |
-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)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
background-image: -webkit-gradient( linear, left top, left bottom, color-stop(0, #A3A3A3), color-stop(0.5, #717171), color-stop(0.5, #444444), color-stop(1, #6E6E6E) ); background-image: -moz-linear-gradient( center top, #A3A3A3 0%, #717171 50%, #444444 50%, #6E6E6E 100% ); |
aero-style blue
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
background-image: -webkit-gradient( linear, left top, left bottom, color-stop(0, #DAE7F4), color-stop(0.49, #CFDFF1), color-stop(0.5, #AEC9E8), color-stop(0.51, #BCD2EC), color-stop(1, #CDDEF1) ); background-image: -moz-linear-gradient( center top, #DAE7F4 0%, #CFDFF1 49%, #AEC9E8 50%, #BCD2EC 51%, #CDDEF1 100% ); |
|
1 2 3 4 5 6 |
.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):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
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’:
|
1 2 3 4 |
-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 largely unsupported CSS3 declaration.
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 […]