ツナガルチップス No.1

こんにちは！！

エレクアライズ制作技術局　ハイパーメディアクリエイター(HMC)の吉永です。

私はこのブログで技術系のブログを書いていこうと思っていますので宜しくお願いします。
目指せL社のW氏みたいなブログ！！

第一弾なのでわりとライトな技術ネタをひとつ。

みなさんWebページをHTMLで作成する際に文字でお知らせなどを書いたりすると思いますが、なんか生文字というか
味気ないというか、面白みにかけるなぁと思ったことはありませんか？

ワードとかパワーポイントならもっと簡単に文字の装飾ができるのに、HTMLで装飾って難しい。。。いっそのこと
フォトショップで画像として作ってしまいたいが、手間がおしい。。。

そんな様々な悩みがあるかはわかりませんが、できます。

CSSを使えば。

CSSって何？って方はこちら

CSSには「text-shadow」というプロパティがあり、これを使うと割と簡単に文字に影をつけたりができます。

例えばこんな感じ

上の文字はcssで「text-shadow:5px 5px 3px #000」を指定しています。

次にtext-shadowのコロンの横に書いてある数値の意味を解説していきます。

1番目の数値・・・横方向のずれ。数値を大きくすればするほど影がずれていきます。正の数で右に、負の数で左に移動します。

2番目の数値・・・縦方向のずれ。数値を大きくすればするほど影がずれていきます。正の数で下に、負の数で上に移動します。

3番目の数値・・・ぼかし具合。数値を大きくすればするほど影ぼかされます。

4番目の数値・・・影の色。

動作確認用のデモパーツを用意したので遊んでみてください。

こんな風に見えてますよぉ～

横方向のずれpx ← 数値入力してみて下さい
縦方向のずれpx ← 数値入力してみて下さい
ぼかし具合px ← 数値入力してみて下さい

影の色 ↑ 色選べまーす

文字の色 ↑ 色選べまーす

ではまた次回のネタを探して見つかり次第ウプします。
see you

吉永　祐太

###########################################