CSS3による立体画像

ちょっと前までWeb上で上記のような立体文字(3D)を出そうとする場合はPhotoshopなどの画像ソフトを使って絵として作り込んでいたのですが、最近話題のCSS3を使うと、上記のような立体画像を文字として作ることができるのです。その方法は以下に。

まずは上記の画像が本当に文字で作ることができるのかは下記のリンクをご覧ください。そして、マウスで選択してもらえばわかるでしょう。

CSS3で書いた3Dの文字列

上記のソースは以下の通りです。

<!DOCTYPE HTML>
<html lang="ja-JP">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
p.threeD
{
    font-size: 4em;
    font-weight: bold;
    text-align: center;
    margin: 1em 0;
    color: #EEE;
    text-shadow:
        -1px 1px 0 #ddd,
        -2px 2px 0 #c8c8c8,
        -3px 3px 0 #ccc,
        -4px 4px 0 #b8b8b8,
        -4px 4px 0 #bbb,
        0px 1px 1px rgba(0,0,0,.4),
        0px 2px 2px rgba(0,0,0,.3),
        -1px 3px 3px rgba(0,0,0,.2),
        -1px 5px 5px rgba(0,0,0,.1),
        -2px 8px 8px rgba(0,0,0,.1),
        -2px 13px 13px rgba(0,0,0,.1)
        ;
}
</style>
</head>
<body>
<p>アイビースター</p>
</body>
</html>

 ポイントはtext-shadowですね。あと、rgbaもキーかも。

How to Create 3D Text With CSS3 » SitePoint

CSS3 スタンダード・デザインガイド

著者/訳者:エ・ビスコム・テック・ラボ

出版社:毎日コミュニケーションズ( 2011-06-14 )

定価:

単行本(ソフトカバー) ( 320 ページ )

ISBN-10 : 4839938296

ISBN-13 : 9784839938291