CSSで影を付ける

CSSとは?

Cascading Style Sheets(カスケーディング・スタイル・シート)の略で、ウェブページのスタイルを指定するための言語になります。

 

難しいことは今更いいですね。実際に扱ってみましょう。

CSSで、タイトルの文字に影を付ける

CSS文字に影を付ける

私のFC2のブログですが、タイトルの文字が味気ない気がします。

 

そこで、この文字を少し見栄えよくしてみたいと思います。

 

FC2の場合、管理画面から、テンプレートの設定をクリック。

※必ず、複製を作って確認してからにしてください。全部をコピーして、メモに保存して置くのもいいでしょう。

 

 

スタイルシートの編集の「ヘッダーの文字色」をいじってみます。

 

いじるといっても、今回も簡単コピペ。
text-shadow: 3px 3px 0px rgba(0,0,0,.2);

 

赤線で囲った部分の一番後ろに上記を貼り付けます。

CSSで文字に影を付ける2

下図のような感じですね。この状態でプレビューを見てみましょう。

 

 

CSS影を付ける

 

タイトル文字影付き

おお~!たった一行加えただけで、影がついていい感じじゃないですか?

 

好みの問題がありますので、影の部分を少し変えてみましょう。

text-shadow: 3px 3px 0px rgba(0,0,0,.2);

↓ ↓ ↓

text-shadow: 5px 5px 3px rgba(0,0,0,.2);

CSS影の位置

左から、横方向、縦方向、ぼかし具合になります。

 

3⇒5、3⇒5、0⇒3に変更してますので、影が右に移動、下に移動、輪郭がボケる。

CSS影がボケる

分かりますか?

 

分かりづらければ、ご自分で色々いじってみてください。

 

それは不親切ですね。

text-shadow: 5px 5px 0px rgba(0,0,0,.2);

先ほどのぼかした部分を0にして、はっきりさせてみましょう。

CSS影輪郭

影の輪郭がはっきりしてますね。

 

それでは、影の色も変えてみましょう。

text-shadow: 3px 3px 0px rgba(0,0,0,.2);

 

かっこの中の数字を変えます。
先日紹介した、原色大辞典で調べるといいでしょう。

 

色を選択し、白線で囲んだ部分の数字を入れます。

text-shadow: 3px 3px 0px rgba(0,0,0,.2);

↓ ↓ ↓

text-shadow: 3px 3px 0px rgba(225,69,0,.2);

左から、225、69、0ですね。あれ、1つ余りますね。

 

.2これは、0.2なのですが、透明度を表します。数字が低いほど薄くなっていきます。今回はそのままで、

原色大辞典

影に色がついたのが分かりますか?

 

CSS影薄赤

 

text-shadow: 3px 3px 0px rgba(225,69,0,.2);

0.2⇒0.5に変えてみます。

text-shadow: 3px 3px 0px rgba(225,69,0,.5);

すると

CSS影濃い

はっきりしてきましたね。

0.5⇒1.2

CSS影強調

簡単ですね。

text-shadow: 3px 3px 0px rgba(0,0,0,.2);

 

これを貼るだけで、イメージが変わるということが、分かっていただけたでしょうか?

 

是非試してみてください。