CSS3でMacのキーボード風にする
- 公開日:2013/11/3
この記事は最終更新日から11年以上が経過しています。
ブログの記事内とかでキー操作を紹介するときにキーボードっぽく表現できたらいいなーと思って探しました。
Macのキーボード風のCSS。
白と黒があります。
CSS
.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; }