Photoshopのような金属の質感がある文字をCSSで作り出す

2008/11/26 23:14Update
TAGS: Photoshop | 金属 | フォント | 文字 | CSS

HTML＋CSSでPhotoshopのような金属の質感がある文字を作り出すサンプルです。

まずは、サンプルから。

サンプル１


サンプル２
Create Album Error.Could not find End Of Central Directory

上のような効果のテキストは、CSSでも簡単に作り出すことができます。

■手順：
サンプル１から説明します。

１）次のような背景画像を用意します。
Create Album Error.Zip file empty

２）HTMLコード
<div class="pattern">
    <h1><span/>Wow, Zebra</h1>
</div>


３）CSSコード
主要なCSSコードは次の通りです。
.pattern h1 span {
/* span要素に背景画像を設定します */
background:transparent url(pattern-zebra.png) repeat scroll 0 0;
/* ブロック要素として定義 */
display:block;
height:100px;
position:absolute;
/* 要素の幅を定義 */
width:100%;
}



■HTMLソース

<html>

<head>

<style type="text/css">
<!--
body {
font: 75%/160% Arial, Helvetica, sans-serif;
width: 700px;
margin: 20px auto;
}

.pattern {
background:#000000 none repeat scroll 0 0;
margin:30px 0 50px;
padding:30px 0 30px 30px;
}

.pattern h1 {
-x-system-font:none;
color:#FFFFFF;
font-family:"Lucida Grande",Arial,sans-serif;
font-size:600%;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:bold;
letter-spacing:-6px;
line-height:100%;
margin:0;
position:relative;
text-transform:uppercase;
}


.pattern h1 span {
/* span要素に背景画像を設定します */
background:transparent url(pattern-zebra.png) repeat scroll 0 0;
/* ブロック要素として定義 */
display:block;
height:100px;
position:absolute;
/* 要素の幅を定義 */
width:100%;
}


-->
</style>
</head>

<body>

<div class="pattern">
    <h1><span></span>Wow, Zebra</h1>
</div>
</body>

</html>


■ダウンロード：
pattern-zebra.png
photoshop-font-by-css.html

原文はこちら：http://rlog.cn/wp-content/uploads/2008/01/css-gradient-demo/

有关作者
Syboos.jp編集長AJavaやオープンソース情報の執筆、Webサイトの開発や運営全般の業務に携わる。

Sponsored Link


Comments

用户名 (required)

Email (will not be published) (required)

URL

Evaluation

  • Relative Articles