No point here really. I had no idea you could refer to an HTML attribute in a pseudo :before or :after with content: attr(attr-name). Mind blown.
Works on my computer, not so sure about yours...
A Pen by Jake Albaugh on CodePen.
Last active
August 29, 2015 14:21
-
-
Save ja-k-e/1544aaa31ed60b5162ec to your computer and use it in GitHub Desktop.
Mac-ish Interactive Keyboard and Display
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div id='mac'> | |
| <textarea></textarea> | |
| <div id='no-focus'> | |
| Click to Wake | |
| </div> | |
| </div> | |
| <div id='kb'> | |
| <div class='kb-row'> | |
| <div class='k k-tld' id='kc-192' pre='~' suf=''></div> | |
| <div class='k k-1' id='kc-49' pre='!' suf='1'></div> | |
| <div class='k k-2' id='kc-50' pre='@' suf='2'></div> | |
| <div class='k k-3' id='kc-51' pre='#' suf='3'></div> | |
| <div class='k k-4' id='kc-52' pre='$' suf='4'></div> | |
| <div class='k k-5' id='kc-53' pre='%' suf='5'></div> | |
| <div class='k k-6' id='kc-54' pre='^' suf='6'></div> | |
| <div class='k k-7' id='kc-55' pre='&' suf='7'></div> | |
| <div class='k k-8' id='kc-56' pre='*' suf='8'></div> | |
| <div class='k k-9' id='kc-57' pre=')' suf='9'></div> | |
| <div class='k k-0' id='kc-48' pre='(' suf='0'></div> | |
| <div class='k k-min' id='kc-189' pre='_' suf='-'></div> | |
| <div class='k k-eq' id='kc-187' pre='+' suf='='></div> | |
| <div class='k k-del k-txt' id='kc-8' suf='delete'></div> | |
| </div> | |
| <div class='kb-row'> | |
| <div class='k k-tab k-txt' id='kc-9' suf='tab'></div> | |
| <div class='k k-q' id='kc-81' pre='q'></div> | |
| <div class='k k-w' id='kc-87' pre='w'></div> | |
| <div class='k k-e' id='kc-69' pre='e'></div> | |
| <div class='k k-r' id='kc-82' pre='r'></div> | |
| <div class='k k-t' id='kc-84' pre='t'></div> | |
| <div class='k k-y' id='kc-89' pre='y'></div> | |
| <div class='k k-u' id='kc-85' pre='u'></div> | |
| <div class='k k-i' id='kc-73' pre='i'></div> | |
| <div class='k k-o' id='kc-79' pre='o'></div> | |
| <div class='k k-p' id='kc-80' pre='p'></div> | |
| <div class='k k-obrace' id='kc-219'></div> | |
| <div class='k k-cbrace' id='kc-221'></div> | |
| <div class='k k-bslash' id='kc-220' pre='|' suf='\ '></div> | |
| </div> | |
| <div class='kb-row'> | |
| <div class='k k-caps k-txt' id='kc-20' pre='•' suf='caps lock'></div> | |
| <div class='k k-a' id='kc-65' pre='a'></div> | |
| <div class='k k-s' id='kc-83' pre='s'></div> | |
| <div class='k k-d' id='kc-68' pre='d'></div> | |
| <div class='k k-f' id='kc-70' pre='f'></div> | |
| <div class='k k-g' id='kc-71' pre='g'></div> | |
| <div class='k k-h' id='kc-72' pre='h'></div> | |
| <div class='k k-j' id='kc-74' pre='j'></div> | |
| <div class='k k-k' id='kc-75' pre='k'></div> | |
| <div class='k k-l' id='kc-76' pre='l'></div> | |
| <div class='k k-semi' id='kc-186' pre=':' suf=';'></div> | |
| <div class='k k-quot' id='kc-222' pre='"' suf="'"></div> | |
| <div class='k k-return k-txt' id='kc-13' pre='enter' suf='return'></div> | |
| </div> | |
| <div class='kb-row'> | |
| <div class='k k-lshift k-txt' id='kc-16L' suf='shift'></div> | |
| <div class='k k-z' id='kc-90' pre='z'></div> | |
| <div class='k k-x' id='kc-88' pre='x'></div> | |
| <div class='k k-c' id='kc-67' pre='c'></div> | |
| <div class='k k-v' id='kc-86' pre='v'></div> | |
| <div class='k k-b' id='kc-66' pre='b'></div> | |
| <div class='k k-n' id='kc-78' pre='n'></div> | |
| <div class='k k-m' id='kc-77' pre='m'></div> | |
| <div class='k k-comma' id='kc-188' pre='<' suf=','></div> | |
| <div class='k k-period' id='kc-190' pre='>' suf='.'></div> | |
| <div class='k k-fslash' id='kc-191' pre='?' suf='/'></div> | |
| <div class='k k-rshift k-txt' id='kc-16R' suf='shift'></div> | |
| </div> | |
| <div class='kb-row'> | |
| <div class='k k-func k-txt' suf='fn'></div> | |
| <div class='k k-ctrl k-txt' id='kc-17' suf='control'></div> | |
| <div class='k k-lopt k-txt' id='kc-18L' pre='alt' suf='option'></div> | |
| <div class='k k-lcmnd k-txt' id='kc-91' pre='⌘' suf='command'></div> | |
| <div class='k k-space' id='kc-32'></div> | |
| <div class='k k-rcmnd k-txt' id='kc-93' pre='⌘' suf='command'></div> | |
| <div class='k k-ropt k-txt' id='kc-18R' pre='alt' suf='option'></div> | |
| <div class='k k-larr' id='kc-37' pre='▸'></div> | |
| <div class='k k-arr-udarr'> | |
| <div class='k k-uarr' id='kc-38' pre='▾'></div> | |
| <div class='k k-darr' id='kc-40' pre='▾'></div> | |
| </div> | |
| <div class='k k-rarr' id='kc-39' pre='▸'></div> | |
| </div> | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $('#mac textarea').keydown (e) -> | |
| code = e.keyCode || e.which | |
| #console.log code | |
| if code == 18 || code == 16 | |
| $('#kc-'+code+'R').addClass('active') | |
| $('#kc-'+code+'L').addClass('active') | |
| else | |
| $('#kc-'+code).addClass('active') | |
| # spaces on tab | |
| if code == 9 | |
| start = @selectionStart | |
| end = @selectionEnd | |
| $this = $(this) | |
| value = $this.val() | |
| $this.val value.substring(0, start) + " " + value.substring(end) | |
| @selectionStart = @selectionEnd = start + 2 | |
| e.preventDefault() | |
| $('#mac').keyup (e) -> | |
| code = e.keyCode || e.which | |
| if code == 18 || code == 16 | |
| $('#kc-'+code+'R').removeClass('active') | |
| $('#kc-'+code+'L').removeClass('active') | |
| else | |
| $('#kc-'+code).removeClass('active') | |
| jakealbaughSignature("light") |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @import url(http://fonts.googleapis.com/css?family=Open+Sans:300,400|Inconsolata) | |
| // millimeter | |
| $mil: 24px | |
| // keyboard vars | |
| $k-br: $mil * 0.15 // border radius | |
| $kb-inset: $mil * 0.4 // keyboard inset | |
| $k-h: $mil * 1.5 // key height | |
| $a-h: $k-h / 2 // arrow height | |
| $k-w: $mil * 1.5 // standard | |
| $k-w-2: $mil * 2 // cmnds | |
| $k-w-25: $mil * 2.5 // del and tab | |
| $k-w-3: $mil * 3 // caps and return | |
| $k-w-39: $mil * 3.9 // shifts | |
| $k-w-91: $mil * 9.1 // spacebar | |
| $kb-sp: $mil * 0.35 // spacing | |
| $kb-r-w: ($k-w-2 * 2) + ($k-w * 7) + $k-w-91 + ($kb-sp * 9) // row width | |
| $c-kb-bg: #f0f0f0 // keyboard background | |
| $c-k-bg: #fff // key background | |
| $c-k-c: #444 // key color | |
| $c-b-bg: #7F8C8D // body bg | |
| $c-mac: #222 // | |
| $c-mac-screen: #444 // screen color | |
| // mac vars | |
| $m-h-s: $mil * 12 | |
| $m-w-s: $kb-r-w | |
| body | |
| margin: 0 | |
| background-color: $c-b-bg | |
| font-family: 'Open Sans', 'Helvetica Neue', Helvetica, sans-serif | |
| // mac style | |
| #mac | |
| overflow-y: hidden | |
| animation: mac-intro 200ms forwards 1.5s | |
| max-height: 0 | |
| padding: 0 | |
| margin: 0 auto | |
| box-shadow: 0px 0px 0px 0px darken($c-b-bg, 30%) | |
| width: $m-w-s + ($kb-inset * 2) | |
| box-sizing: border-box | |
| background-color: $c-mac | |
| border-radius: 16px | |
| position: relative | |
| textarea | |
| border: none | |
| outline: none | |
| box-sizing: border-box | |
| resize: none | |
| font-family: Inconsolata, monospace | |
| padding: 24px | |
| font-size: $mil / 2 | |
| line-height: 1.4 | |
| background-color: $c-mac-screen | |
| color: $c-k-bg | |
| height: $m-h-s | |
| width: 100% | |
| position: relative | |
| opacity: 0.4 | |
| transition: opacity 200ms | |
| &:focus | |
| opacity: 1 | |
| & ~ #no-focus | |
| opacity: 0 | |
| animation: none | |
| #no-focus | |
| position: absolute | |
| animation: glow 1s infinite | |
| transition: opacity 200ms | |
| color: white | |
| text-transform: uppercase | |
| display: block | |
| top: 50% | |
| left: 50% | |
| transform: translate(-50%,-50%) | |
| cursor: pointer | |
| pointer-events: none | |
| // keyboard style | |
| #kb | |
| padding: $kb-inset | |
| box-sizing: border-box | |
| background-color: $c-kb-bg | |
| width: $kb-r-w + ($kb-inset * 2) | |
| border-radius: $k-br * 2 | |
| margin: 24px auto | |
| box-shadow: 0px 4px 0px 2px darken($c-kb-bg, 20%) | |
| .kb-row | |
| margin-bottom: $kb-sp | |
| font-size: 0 | |
| width: $kb-r-w | |
| &:last-child | |
| margin-bottom: 0 | |
| .k | |
| display: inline-block | |
| position: relative | |
| width: $k-w | |
| height: $k-h | |
| margin-right: $kb-sp | |
| border-radius: $k-br | |
| background-color: $c-k-bg | |
| color: $c-k-c | |
| box-shadow: 0px 2px 0px 1px darken($c-kb-bg, 10%) | |
| // active style | |
| &.active | |
| box-shadow: 0px -1px 0px 1px darken($c-kb-bg, 10%) | |
| // far right child | |
| &:last-child | |
| margin-right: 0 | |
| float: right | |
| // labels | |
| &:before | |
| content: attr(pre) '\a' attr(suf) | |
| white-space: pre | |
| text-align: center | |
| position: absolute | |
| font-size: $mil / 2 | |
| text-transform: uppercase | |
| top: 50% | |
| left: 50% | |
| transform: translate(-50%,-50%) | |
| // text content | |
| &.k-txt | |
| &:before | |
| font-size: $mil / 3 | |
| text-transform: none | |
| // caps lock | |
| &.k-caps | |
| &:after | |
| content: attr(pre) '\a' | |
| top: $kb-sp / 2 | |
| font-size: $mil / 2 !important | |
| &.active | |
| &:after | |
| color: #2ecc71 | |
| text-shadow: 0px 0px 4px lighten(#2ecc71, 20%) | |
| &:before | |
| content: '\a' attr(suf) | |
| bottom: $kb-sp / 2 | |
| &:before, | |
| &:after | |
| white-space: pre | |
| position: absolute | |
| font-size: $mil / 3 | |
| text-align: left | |
| width: 80% | |
| left: $kb-sp / 2 | |
| top: auto | |
| transform: translate(0, 0) | |
| // arrows | |
| &.k-larr, &.k-rarr, &.k-uarr, &.k-darr | |
| height: $a-h | |
| line-height: $a-h | |
| // up and down arrow | |
| &.k-arr-udarr | |
| display: inline-block | |
| width: $k-w | |
| height: $k-h | |
| margin-right: $kb-sp | |
| background-color: transparent | |
| &, &.active | |
| box-shadow: none | |
| .k | |
| display: block | |
| margin: 0 0 1px | |
| &:first-child | |
| border-radius: $k-br $k-br 0 0 | |
| &:last-child | |
| marigin-bottom: 0 | |
| border-radius: 0 0 $k-br $k-br | |
| // right arrow | |
| &.k-rarr | |
| margin-top: $a-h | |
| // cmnds | |
| &.k-lcmnd, &.k-rcmnd | |
| width: $k-w-2 | |
| // tab and delete | |
| &.k-tab, &.k-del | |
| width: $k-w-25 | |
| // caps and return | |
| &.k-caps, &.k-return | |
| width: $k-w-3 | |
| // shifts | |
| &.k-lshift, &.k-rshift | |
| width: $k-w-39 | |
| // space | |
| &.k-space | |
| width: $k-w-91 | |
| // :before overrides | |
| =before-left-align | |
| text-align: left | |
| width: 80% | |
| left: $kb-sp / 2 | |
| top: auto | |
| bottom: $kb-sp / 2 | |
| transform: translate(0, 0) | |
| =before-right-align | |
| text-align: right | |
| left: auto | |
| right: $kb-sp / 2 | |
| top: auto | |
| bottom: $kb-sp / 2 | |
| transform: translate(0, 0) | |
| // right aligns | |
| &.k-del, &.k-return, &.k-rshift, &.k-ropt, &.k-lcmnd | |
| &:before | |
| +before-right-align | |
| // left aligns | |
| &.k-rcmnd, &.k-lopt, &.k-ctrl, &.k-fn, &.k-lshift, &.k-caps, &.k-tab, &.k-func | |
| &:before | |
| +before-left-align | |
| // ` | |
| &.k-tld | |
| &:before | |
| content: attr(pre) '\a `' | |
| &.k-obrace | |
| &:before | |
| content: '{\a[' | |
| &.k-cbrace | |
| &:before | |
| content: '}\a]' | |
| &.k-uarr, &.k-larr | |
| &:before | |
| transform: translate(-50%, -50%) rotate(180deg) | |
| @keyframes mac-intro | |
| 0% | |
| max-height: 0 | |
| padding: 0 | |
| margin: 0 auto | |
| box-shadow: 0px 0px 0px 0px darken($c-b-bg, 30%) | |
| 100% | |
| max-height: $m-h-s + ($kb-inset * 8) | |
| margin: 24px auto 0 | |
| padding: $kb-inset * 4 | |
| box-shadow: 0px 2px 0px 1px darken($c-b-bg, 30%) | |
| @keyframes glow | |
| 0% | |
| opacity: 1 | |
| 50% | |
| opacity: 0.2 | |
| 100% | |
| opacity: 1 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment