[CSS]画像を使用しないでイメージを作成するスタイルシートのテクニック集

コンテンツ生成用に画像をなるべく使用せずに、より多くのブラウザ対応を考慮した、画像を使用しないでイメージを作成するスタイルシートを紹介します。

CSS Generated Content

[ad#ad-2]

• 小さい三角
• キャラクター
• アロー
• トリッキーシャドウ

下記の対応ブラウザは、IE8+, Fx3+, Chrome4+, Safari4+ です。
各コードは主要箇所のみの抜粋です。

小さい三角

「New」の右上に添えてある小さい三角をCSSで実装します。

デモページ

HTML

<div id="container">
	<div class="item">
		テキスト
		<span class="status">New</span>
	</div>
</div>

CSS

.item .status:after {
	border-bottom: 3px solid #740100;
	border-right: 3px solid transparent;
	content: "";
	display: block;
	height: 0;
	position: absolute;
	right: -3px;
	top: 0;
	width: 0;
}

キャラクター

画像を使用しないで、スマイリーマークを描きます。

デモページ

HTML

<em class="status">
	<strong>In Stock.</strong>
	Ships in 24 hrs.
</em>
<em class="status not-available">
	<strong>Out of Stock.</strong>
	Restocking in 2 weeks.
</em>

CSS

.status:before {
	color: #797979;
	content: "☺";
	font-size: 21px;
	font-style: normal;
	left: 0;
	position: absolute;
	top: 8px;
	text-align: center;
	width: 21px;
}
.not-available:before {
	content: "☹";
}

アロー

これも画像を使用しないで、アローをスタイルします。

デモページ

[ad#ad-2]

HTML

<div id="container">
	<a href="#" class="button btn-add-comment">Add Comment</a>
</div>

CSS

.btn-add-comment:before {
	content: "↓";
	font-size: 16px;
	font-weight: bold;
	height: 8px;
	left: 14px;
	line-height: 8px;
	position: absolute;
	top: 9px;
}

トリッキーシャドウ

これも画像を使用せずに作成した、クリックで選択が可能なスウォッチセレクターです。
※クリック時のアクションにはjQueryを使用します。

デモページ

HTML

<ul class="swatches">
	<li class="current">
		<a href="#">
			<span class="primary" style="background: orange;">Orange</span>
			<span class="secondary" style="background: black;">Black</span>
		</a>
	</li>
</ul>

CSS

.swatches .current:after {
	-moz-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.75);
	-webkit-box-shadow: inset 0 0px 5px rgba(0, 0, 0, 0.75);
	box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.75);
	content: "";
	display: block;
	height: 27px;
	left: 2px;
	position: absolute;
	top: 2px;
	width: 38px;
}