シャドー

ツナガルチップス No.6

こんにちは!!

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

前回に引き続き、今回もHTMLで文字を装飾する手法をご紹介します。

前回の記事はコチラ

今まで紹介してきた手法で大分テキストを装飾するテクニックがついてきましたね。
今回はおさらいということで、今までの内容を全てごった煮のデモを用意しました。
ってかそもそもそれってできるの?できます

CSSを使えば。

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

ランキングにランクインしました!!
文字設定項目

テキスト
文字の縁1設定項目
太さpx
ぼかし具合px

文字の縁2設定項目
太さpx
ぼかし具合px

文字の縁3設定項目
太さpx
ぼかし具合px

文字の縁4設定項目
太さpx
ぼかし具合px

文字の縁5設定項目
太さpx
ぼかし具合px

ドロップシャドー設定項目
横方向のずれpx
縦方向のずれpx
ぼかし具合px
ディープシャドー設定項目
太さpx
ぼかし具合px

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

← ツナガルチップス No.5へ
→ ツナガルチップス No.7へ

###############################################################################################
Android開発アプリ一覧
リバーシ
4色リバーシ
リバーシプレミアム
4色リバーシプレミアム

iOS開発アプリ一覧
シーバリ for Y.Y Magic
4色シーバリ for Y.Y Magic

アンドロイダー公認デベロッパー(https://androider.jp/developer/f8d0c0800a2e980c4d497a58102c00e8/)
吉永 祐太

###############################################################################################
アンドロイダー公認デベロッパー認証



ツナガルチップス No.3

こんにちは!!

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

前回に引き続き、今回もHTMLで文字を装飾する手法をご紹介します。

前回の記事はコチラ

前回までの内容で文字に影と縁取りができるようになったので、今回は複合技を使っていきましょう。
影と縁取りが別々に指定できるのは分かったけど、二つを一緒に効果としてフォトショップみたいにしたいなぁ~、効果を付ける文字もあいうえおとかじゃなくて自分で文章打ちたいなぁ~、
わかりました。
できるようにしましょう。
ってかそもそもそれってできるの?できます

CSSを使えば。

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

今回も引き続き「text-shadow」というプロパティを応用します。

例えばこんな感じ

今回は同時に8方向の影と、文字のシャドーを指定しております。
文字で書くとこんな感じ「text-shadow:0 4px 10px #00ff00,4px 0 10px #00ff00,0 -4px 10px #00ff00,-4px 0 10px #00ff00,-4px -4px 10px #00ff00,4px -4px 10px #00ff00,-4px 4px 10px #00ff00,4px 4px 10px #00ff00,15px 15px #cccccc」

???

例によって文章にすると難しいですねぇ。。。

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

かきくけこ

縁の太さpx ← 数値入力してみて下さい
ぼかし具合px ← 数値入力してみて下さい

縁の色 ↑ 色選べまーす

文字の色 ↑ 色選べまーす

文字← 文字を入力してみて下さい

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

影の色 ↑ 色選べまーす

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

← ツナガルチップス No.2へ
→ ツナガルチップス No.4へ

###########################################
Android開発アプリ一覧
リバーシ
4色リバーシ
リバーシプレミアム
4色リバーシプレミアム

iOS開発アプリ一覧
シーバリ for Y.Y Magic
4色シーバリ for Y.Y Magic
シーバリプレミアム for Y.Y Magic
4色シーバリプレミアム for Y.Y Magic

吉永 祐太

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



ツナガルチップス 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

→ ツナガルチップス No.2へ

###########################################
Android開発アプリ一覧
リバーシ
4色リバーシ
リバーシプレミアム
4色リバーシプレミアム

iOS開発アプリ一覧
シーバリ for Y.Y Magic
4色シーバリ for Y.Y Magic
シーバリプレミアム for Y.Y Magic
4色シーバリプレミアム for Y.Y Magic

吉永 祐太

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