ホーム > HTML / CSS / SASS > CSS3でMacのキーボード風にする

CSS3でMacのキーボード風にする

  • 公開日：2013/11/3
この記事は最終更新日から11年以上が経過しています。

ブログの記事内とかでキー操作を紹介するときにキーボードっぽく表現できたらいいなーと思って探しました。
Macのキーボード風のCSS。
白と黒があります。

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
.keyboard {
    height: 41px;
    min-width: 24px;
    padding: 0 10px;
    margin: 5px 10px;
    background: #FFF;
    border-radius: 4px;
    border-top: 1px solid #F5F5F5;
    box-shadow: 0 0 25px #E8E8E8 inset, 0 1px 0 #C3C3C3, 0 2px 0 #C9C9C9, 0 2px 3px #333333;
    color: #666;
    text-shadow: 0 1px 0 #F5F5F5;
    font: bold 14px arial;
    text-align: center;
    line-height: 41px;
    display: inline-block;
}
.keyboard_dark {
    height: 41px;
    min-width: 24px;
    padding: 0 10px;
    margin: 5px 10px;
    background: #222;
    border-radius: 4px;
    border-top: 1px solid #222222;
    box-shadow: 0 0 25px #333333 inset, 0 1px 0 #000000, 0 2px 0 #222222, 0 2px 3px #333333;
    color: #AAA;
    text-shadow: 0 -1px 0 #000000;
    font: bold 14px arial;
    text-align: center;
    line-height: 41px;
    display: inline-block;
}

こんな記事もおすすめです