CSS3でMacのキーボードっぽく見えるスタイルを設定してみた

@kasumiiです。こんにちは。

ブログ内でMacのキーボードっぽい見た目のパーツを使いたかったので、Dustin Cartwright さんが作った以下のページのCSSをベースにしてスタイル追加してみました。

【参考】Apple Keyboard made via css3.

ひとつのキー内に複数文字入れられるようにしたかったのと、インラインで文中にも使えるようにCSSを一部変更しています。

白っぽいキーボードの場合。

<span class="keyboard">Sample</span>

KEYSample

黒バージョンの場合。

<span class="keyboard-dark">Sample</span>

KEYSample

以下を貼り付け。

/* keyboard
--------------------------------------------------- */
.keyboard {
	height: 41px;
	min-width: 24px;
	padding: 0 10px;
	margin: 5px 10px;
	background: #EFF0F2;
	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: #AAAAAA;
	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: #222222;
	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: #AAAAAA;
	text-shadow: 0 -1px 0 #000000;
	font: bold 14px arial;
	text-align: center;
	line-height: 41px;
	display: inline-block;
}