AMANPURIでAMALを買う手順を画像付きで紹介!

[み]CSS3でMacのキーボードっぽいスタイルをつくって、ブログで使おうと思う

以前、みはら.comで紹介したCSSでつくられたMacのキーボードがありましたが、そのCSSをちょいとお借りして、キー操作を紹介するときに使おうかともくろんでいます。

キー操作を紹介するときに、単に【Ctrl + F】と書いてあるよりも、
Ctrl+Fのほうが断然目にとまると思うんです。いや、Macのぺなぺなした打感のキーボードが好きなだけなんです。ごめんなさい。

ちなみに、コードはこんなカンジです。基本コピペですが、若干調整しています。

CSS
.kbd {
	height: 40px;
	min-width: 40px;
	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;
}

あとこっちは、MacBookとかの黒いキーボードです。

CSS
.kbd-dk {
	height: 40px;
	min-width: 40px;
	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;
}

使い方としては、文中であれば、<span class="kbd">Ctrl</span>とかすればいいんじゃないですかね?
他の使い方は、イマイチ思い浮かびませんね… 何かあるでしょうか?ということで、Thanks

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です