3Dのリボンを実装するPhotoshopとCSSのチュートリアル

サイト構築 -制作

Post on:2010年11月24日

sponsorsr

立体的なリボンをPhotoshopで作成しそれをCSSで実装したり、CSSだけでリボンを実装するチュートリアルを紹介します。

Create a 3D Ribbon Wrap-Around Effect (Plus a Free PSD!)

[ad#ad-2]

3Dのリボンを作成するPhotoshopのチュートリアル
作成した3Dのリボンを実装するCSSのチュートリアル
CSSだけで3Dのリボンを作成するチュートリアル

3Dのリボンを作成するPhotoshopのチュートリアル

まずは、Photoshopのチュートリアルから。

チュートリアルはステップごとにPhotoshopのキャプチャ付きで丁寧に解説されているので、英語が苦手な方でも分かりやすいものとなっています。また、リボンのPSDファイルもレイヤーが保持されたものがダウンロードできます。

ダウンロードできるPSDのキャプチャ

作成した3Dのリボンを実装するCSSのチュートリアル

前述の「Photoshopで作成したリボン」のテキストをデバイステキストにして、スタイルシートで実装するチュートリアルも紹介されています。

画像を下記のように3つの透過PNG画像で書き出します。

デバイステキストを配置する二番目の画像は、backgournd-imageにrepeat-xを使用してテキストの長さに柔軟に対応させます。

[ad#ad-2]

CSSだけで3Dのリボンを作成するチュートリアル

画像を使用しないで、3Dのリボンを実装するチュートリアルです。
対応ブラウザは、IE7, Firefox, Chrome, Safari, Operaで、IE6は非対応です。

Quick Tip: Practical CSS Shapes
デモページ

HTML

IE用に「.arrow { top: 100%; } 」を加えます。

<!DOCTYPE html>

<html lang="en">
<head>
	<meta charset="utf-8">
	<title>CSS Shapes</title>

	<!--[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

CSS3のグラデーションやボックスシャドウを使用しています。非対応ブラウザでは反映されません。

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