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 ; } |