diff options
| -rw-r--r-- | assets/css/application.css | 43 | ||||
| -rw-r--r-- | index.html | 2 |
2 files changed, 42 insertions, 3 deletions
diff --git a/assets/css/application.css b/assets/css/application.css index 074f5fb..b8236af 100644 --- a/assets/css/application.css +++ b/assets/css/application.css @@ -16,6 +16,13 @@ header { } +#samples { + margin: 3em 2em; +} + + + +/* . Inputs . */ .url-input { width: 80%; padding: 0.3em 0.4em; @@ -23,10 +30,42 @@ header { } -#samples { - margin: 3em 2em; +.key { /* http://cssdeck.com/labs/apple-keyboard-via-css3 */ + display: block; + color: #aaa; + font: bold 9pt Helvetica, sans-serif; + text-decoration: none; + text-align: center; + width: 44px; + height: 41px; + margin: 5px; + background: #eff0f2; + -moz-border-radius: 4px; + border-radius: 4px; + border-top: 1px solid #f5f5f5; + -webkit-box-shadow: + inset 0 0 25px #e8e8e8, + 0 1px 0 #c3c3c3, + 0 2px 0 #c9c9c9, + 0 2px 3px #333; + -moz-box-shadow: + inset 0 0 25px #e8e8e8, + 0 1px 0 #c3c3c3, + 0 2px 0 #c9c9c9, + 0 2px 3px #333; + box-shadow: + inset 0 0 25px #e8e8e8, + 0 1px 0 #c3c3c3, + 0 2px 0 #c9c9c9, + 0 2px 3px #333; + text-shadow: 0px 1px 0px #f5f5f5; } +.key-input { + border: none; +} + + /* . Buttons . */ .button { @@ -65,7 +65,7 @@ </div> <div> - <input type="text" class="js-keyboard-key" placeholder="a" /> + <input type="text" class="key key-input js-keyboard-key" placeholder="a" /> </div> </div> </script> |