ブログ問い合わせホーム制作実績サービスBLOG問い合わせ会社概要ホームページ制作マーケティングトレンド2018.03.20text-shadowの使い方ボタンのデザインなどするとき、少し浮き上がらせて文字を見せたい時などに便利なtext-shadow。影をつけるためだけに使うのは勿体無い。text-shadowには影を付ける以外にも様々な使い方ができるんです。今回はtext-shadowの基本的な使い方からトリッキーな使い方までご紹介いたします。text-shadowで遊んでみよう。sitetext-shadowとはテキストに影をつけるためのCSSプロパティです。影を単純につけるだけでなく、水平、平行方向の指定はもちろん、影のぼやけ方まで指定できます。影のぼかし半径と指定します。影は1つだけでなく、カンマで区切ることで2つ指定することもできます。アイデア次第でデザインの幅を広げることができるプロパティです。text-shadowアイデア帳ここでは実際のサンプルを元に解説していきます。CodePen.1.text-shadowなしデフォルトではtext-shadowはnoneになっています。そのため何も影などは付きません。white;を指定しています。私は黒に白の影を落とすのが好きです。先程説明下通り、text-shadowは2色指定することができます。2色でなくても、同じ色を2箇所に配置するという使い方も良いかもしれませんね。ここでは、分かりやすく、赤と青の2色をずらして配置してみました。hovertext-shadowの2色指定できるというのを利用し、hoverアニメーションにtext-shadowを応用します。マウスホバーすると、左右にテキストが分身する可愛いアニメーション。cssをちょっと書いてあげるだけで簡単に実現することができます。red;}}たったこれだけのコードでこんな可愛いアニメーションが!知っているとなんてことはないのですが、知らないとアッと驚くアニメーションです。glitchアニメーションネオン管のような、アンダーグラウンドな雰囲気をtext-shadowで再現します。keyframeでブレを表現してあげるだけで、簡単にネオン管風のアニメーションを作ることができます。作り込んで行けばglitch風のアニメーションにも作り変えていくことが出来ます。アンダーグラウンドやサイケなデザインに合うのではないでしょうか。text-shadowで遊んでみよう。テキストに影を落とすだけではなく、様々な使い方できるtext-shadowを是非活用してみて下さい。site【css】高さが可変する要素の上下左右の真ん中にテキストを配置してみる。ハンバーガーメニューに使ってみた。display:flex;の注意点。高さが1番高い要素に合わせて自動的に伸びる。【トレンド】DuoToneをCSSで簡単再現!波に乗り遅れるな!今更といわせない!SASSでCSSを爆速でかけるようになろう。画面解像度とIEとブラウザはどこまで対応させるかをデータを元に真剣に考えてみた。関連記事html/css【css】高さが可変する要素の上下左右の真ん中にテキストを配置してみる。html/css【トレンド】DuoToneをCSSで簡単再現!波に乗り遅れるな!html/cssGulpを使ってweb制作を効率化!7つの工程で分かりやすく作業環境を構築!最新記事SNSクリエイタースタジオでInstagramを予約投稿しよう。wordpless】固定ページへのリンクはhome_urlだ突然ゴリラのフリー素材を50枚集めてみました。sketchtool.。