CSS3のtext-shadowを使った文字のまわりをにじませた効果のメモ
入門以前的な内容ではあるんですけども気になってましたのでメモ的に。
text-shadowプロパティを使いますと、文字に影をつけた装飾が可能となります。css3+text-shadowとかで検索すればサンプルや紹介ページがいくつもヒットします。
詳細は専門のページに委ねるとしまして、早速やってみます。
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<style>
p {
text-shadow: 0 0 30px #608AF2; /* 第一引数、第二引数のオフセット値を0に */
color: #000080;
font-size: 100px;
font-weight: bold;
font-family: Verdana, Helvetica, sans-serif;
}
</style>
</head>
<body>
<p>Hello, world.</p>
</body></html>
結果は以下。Safari 5.0.4によるものです。Firefox 3.16.x Chrome 10.xでも同様でした。
第三引数でにじみの大きさがかわってくるようです。第一、第二で横縦方向の調整ですが、この場合は特に理由なければ0でよさそうです。