2月 112014
 

20140211_BlogTitleなんだかのっぺりした感じのするブログタイトル。これをちょっと立体的に見せたいな、と考えて「影」を付けてみることにしました!立体的に見せるために影を付けるのが正しいのかは不明ですが・・・

本ブログのタイトルに利用している「酔」という文字が影の具合によってかなり潰れた感じになってしまうので、立体的になったかどうかは判断できませんし、影を付けたのが良いのかもちょっと疑問ですが、そこは許して頂きたいな~なんて謝罪をして。

これまでのブログタイトルに関する CSS は以下の通り。

.blogtitle {
	font-size: 280%;
	font-weight: bold;
	float: left;
	line-height: 47px;
	position: relative;
	margin: 0;
	padding: 0;
	text-align: left;
	letter-spacing: 0.2em;
}

上記に対して、たったの 1 行を書き加えるだけで「影」を付けることができるんですよね~参考にしたのは「text-shadow-CSS3リファレンス」というウェブページ。実際には以下の通り。

.blogtitle {
	font-size: 280%;
	font-weight: bold;
	float: left;
	line-height: 47px;
	position: relative;
	margin: 0;
	padding: 0;
	text-align: left;
	letter-spacing: 0.2em;
	text-shadow: 1px 1px 3px #3454b4; /* 「影」を付けてみた! */
}

たったこれだけ!ちょっと参考までに上記のウェブページから重要と思う個所を引用しておきます。

text-shadow プロパティでは、スペース区切りで<水平方向の距離> <垂直方向の距離> <影のぼかし半径> <影の色>を指定することができます。長さの値には、px や em や ex などの単位が利用できます。

1 番目の長さの値は、水平方向の影のオフセット距離を表します。正の値を指定すると右へ、負の値を指定すると左へ影が移動します。

2 番目の長さの値は、垂直方向の影のオフセット距離を表します。正の値を指定すると下へ、負の値を指定すると上へ影が移動します。

3 番目の長さの値は省略可能ですが、指定した場合には影のぼかし半径を表します。ぼかし半径が指定されない場合はゼロとなります。尚、ぼかし半径とは、ぼかし効果の境界までの距離のことですが、ぼかし効果を計算する厳密なアルゴリズムは定義されていません。

色の値は省略可能ですが、指定した場合には影の色を表します。長さの値の前か後に任意で指定します。色の値が指定されない場合には、ブラウザが選択した色が使用されます。

一回で上手くいくことはないようですから、何度も数字を変更してトライ・アンド・エラーを繰り返す必要がありそうですが、それでもちょっとだけ達成感があります。


 返信する

(必須)

(必須:アドレスは公開されることはありません)