もくじ
ToggleElementorのシャドー 名の通り影の立役者的存在!シャドーとしてだけではなく、様々な表現方法としても活用出来て、便利なんです。でも・・・どのウィジェットでもシャドーが使える訳では無いのが唯一のかゆい所。基本的な使い方から応用的な使い方まで幅広くシャドーの使い方を紹介します。
はいはい、喧嘩しないで・・・
2種類のシャドー
Elementorには2種類のシャドーがあります。1つは「テキストシャドー」もう1つは「ボッックスシャドー」です。それぞれどんな事が出来るか作例をご覧下さい。
【テキストシャドー作例】
【ボックスシャドー】
読んで字の如く、テキストシャドウはテキストの形に合わせて影を作れ、ボックスシャドーは要素(ウィジェットなどを含むエリア)に対して影を付けれるものです。
アイデア次第では表現の幅が広がるので、ぜひ触って見て下さい!
基本的なシャドウ操作
テキストシャドウも、ボックスシャドウに共通部分の項目があります。
共通の項目は、色、ぼかし、水平、垂直です。
「色」・・・影の色を設定出来ます。色だけではなく、透明度も設定出来ます。
「ぼかし」・・・影のぼかし具合を調整出来ます。
「水平」・・・被写体を中心に、影の横の位置を設定出来ます。
「垂直」・・・被写体を中心に、影の縦の位置を設定出来ます。
それでは実際、どの様な調整ができるのか、動画にまとめましたので、ご覧下さい!
そうですかぁ〜?そんなことは無いと思うんですけどね(汗)100読は1視聴に如かずと言いますし・・・(ぼそっ)
これに加え、ボックスシャドウでは、
「拡大」と「位置」がさらに設定出来ます。
「拡大」・・・影の大きさを設定する事が出来ます。
「位置」・・・”アウトライン”と”インセット”を選択出来ます。
(アウトライン=ドロップシャドウ、インセット=シャドウ内側)
色々なシャドーの使い方
ただ影をつけるだけではなく、アイデア次第では立派なデザインになります!作例を交えて、再現方法を紹介します!
テキストシャドーで文字をデザインする
作例1:ネオン的な光効果を出す
影ではなく、光として表現する方法です。まず、影の色を文字色と同系にし、透明度は無くします。影の位置は水平・垂直はともに「0」で動かさず、ぼかしだけを120にしています。好みに応じてぼかしの値をいじってみて下さい!
作例2:3Dメガネ風
3Dメガネって最近見ないですね・・・青と赤のセロファンがレンズ代わりのメガネで、3D用に加工された映像を見ると立体になる・・・
やっぱりそうですよね・・・(汗)
これは文字色の設定も変更します。文字色の透明度を50%くらいにします。その上で、影の設定をします。作例では影を右上に投影しています。まず、ぼかしは「0」にし、水平と垂直で右上に影を配置します。
ボックスシャドーをデザインにする
作例1:カード型背景にする
こーゆーの見たことありません?アパレル系のサイトとか・・・
ですよね〜(苦笑)
この場合は、画像にボックスシャドーを付けていきます。ぼかしは「0」右下に影を配置するように、垂直・水平を調整します。拡大を少々入れたら出来上がりです。
作例2:仮想2重ボーダー
これはあんまり使いみちがなさそうですが・・・例として。
これは別の機会に・・・(汗)
それは関係無いかと・・・(ぼそっ)あれ?でも昔に画像ウィジェットの記事で書かなかったっけ?
これは、ボーダーを別途設定しておきます。その上で、ボックスシャドーを設定します。ぼかし「0」拡大をボーダーの太さと同じくらいに目検で調整します。
まとめ
ウィジェットによっては影設定出来ないものも多くあり、もどかしい思いをする事こありますが、いざ!という時にアイデアの1つとして知っておくと便利かもしれません。フラットデザインの流行も少しずつ下火になり、レイヤー感満載のデザインも増えて来ており、そんなシャドーはレイヤー感を演出してくれます。
また、影を影としてではなく、デザインとして使う事で、面倒な設定も簡単に済む場合があります。
是非、みなさんも影使いになってはいかがでしょうか?