[CSS]画像を使用しないで、紙テープを折り返したようにするスタイルシート

サイト構築 -CSS

画像を使用しないで、紙テープを折り返したようなエフェクトを実装するスタイルシートをNettuts+から紹介します。

Quick Tip: Practical CSS Shapes
デモページ

ブログの見出しなどによく使用されるデザインで、一般的には画像を使用して実装することが多いですが、CSSで簡単に実装できます。
CSSにはCSS3を使用しており、ブラウザごとに表示が異なりますが、IE7でもそれなりの表示に対応しています。

Firefox 3.6でのキャプチャ

Chromeでのキャプチャ

IE7でのキャプチャ

実装方法

HTML

<!DOCTYPE html>

<html lang="en">
<head>
	<meta charset="utf-8">

	<!--[if IE]>
<style>
			.arrow { top: 100%; }
		</style>

	<![endif]-->

</head>
<body>
<div id="container">
<h1> My Heading <span class="arrow"></span> </h1>
</div>

</body>
</html>

CSS

#container {
	background: #666;
	margin: auto;
	width: 500px;
	height: 700px;
	padding-top: 30px;
	font-family: helvetica, arial, sans-serif;
	}

h1 {
	 background: #e3e3e3;
	 background: -moz-linear-gradient(top, #e3e3e3, #c8c8c8);
	 background: -webkit-gradient(linear, left top, left bottom, from(#e3e3e3), to(#c8c8c8));
	 padding: 10px 20px;
	 margin-left: -20px;
	 margin-top: 0;
	 position: relative;
	 width: 70%;

	-moz-box-shadow: 1px 1px 3px #292929;
	-webkit-box-shadow: 1px 1px 3px #292929;
       box-shadow: 1px 1px 3px #292929;

	color: #454545;
	text-shadow: 0 1px 0 white;
}

.arrow {
	 width: 0; height: 0;
	 line-height: 0;
	 border-left: 20px solid transparent;
	 border-top: 10px solid #c8c8c8;
	 top: 104%;
	 left: 0;
	 position: absolute;
}