Web初心者だって、シャドウを使いたい！テクニックが無くても、経験が無くても、センスが無くてもjQueryでシャドウをカッコよくかけられる！

RingShadow

Webでは必須のスキル　” シャドウ ”！

昨今のWeb作成では欠かせない要素になっているシャドウ。シャドウのかけ方ひとつ取ってみても、プロの方からするとド素人かどうかってスパっと分かるモノのようです。私もよく効果かけ過ぎってお叱りを受けます (´°̥̥̥̥̥̥̥̥ω°̥̥̥̥̥̥̥̥｀)

でもはじめの頃って、エフェクトがかかるだけで　「おぅフ！」ってなりますよね。
グラデかかると「おぅフ！」　丸角になるだけで「おぅフ！」　文字をプレス字っぽくしただけで「おぅフ！」　そして影がついただけで「おぅフ！」ですよ。

そして初学者（私）の方はデザインが完成するとギトギトな脂っこい効果のかかりすぎたデザインになってしまいがちです。分かってるんですけど楽しくてついついかけちゃうんですよね。エフェクト。

とくに影（シャドウ）って、立体感が出るし、目立つし、かけるだけでなんか上手くなったみたいな感覚になるんでついついかけ過ぎてしまうエフェクト第一位ではないですか？私はダントツで一位です。

そんな初学者（私）でも「フワっ」とした上品でかつ上級者と見まごうような、華麗なシャドウをバカでもチョンでもカンタンにバカチョン！っとつけてしまうプラグインを使ってみます。

スーパープラグイン！「jQuery Shadow Plugin」

サンプル

サンプルです。

こんな両端がちょっとずつ浮いてる風な影って、CSSでやるとbefore要素やafter要素なんかを使って疑似要素に影をつけて回転さして位置をずらして角丸くして透過して．．．ってけっこうめんどくさいし、CSSがゴチャってなるし、とかく大変ですよね。

でも、このコードは一行ですみます。はい。

[javascript highlight=”3″]

jQuery(document).ready(function(){

jQuery("#hoge").shadow("lifted");

});

[/javascript]

ですよ！楽勝です。実行するために document.ready とか入ってますけど、実質は
jQuery(“#hoge”).shadow(“lifted”); だけです。

影を付けたい要素（今回は id が hoge のdiv要素）を指定し、それに

.shadow(“ここにオプションを書く”)

で効果を付けるだけです。
今回は “lifted” というオプションを指定しました。これが左右の端がふわッとする、魔法のコードです！

これだけでどんな要素にもカンタンに、そしてステキなシャドウをさりげなくやさしくかけてあげることができてしまいます。だれでも。

ちなみにHTML

[html highlight=”3,7″]

<head>

<body>

<div id="hoge" class="hoge">
サンプルです。
</div>

</body>

[/html]

と、プラグインのファイルをしっかり読み込んでください。細かい要素は省いていますが、head要素のなかに プラグインファイル（jsファイルと CSSファイルもあります）を指定し、もちろん jsファイルの前にjQueryを読みこんでくださいね！

そしてそして、このプラグインのスゲーのって、実はいろんなカタチのシャドウがまだまだたくさん、ゴッソリあって、しかもそれが全部さっきのとおんなじくらいのレベルでカンタンにカッコ良く使えちゃうんっですよ！えぇ。

せっかくなので、備忘録も兼ねて一覧で作ってみました。

シャドウ一覧！！　どうぞ

フツーのシャドウ

.shadow();

イチオシ。洒落乙

.shadow(“lifted”);

ちょっとクセあり。長さなど調整が出来ないので

.shadow(“perspective”);

真ん中浮き。丸みがないのでちょっと堅めな印象。

.shadow(“raised”);

vt-1！左だけ丸まってるバージョン。

.shadow({type:’sides’, sides:’vt-1′});

vt-2！左右とも丸くて筒っぽい感じ。

.shadow({type:’sides’, sides:’vt-2′});

イチオシ２！hz-1! ふわッと感がパネェっす！

.shadow({type:’sides’, sides:’hz-1′});

上まで丸まっちゃったバージョン。hz-2。シロートには難しい…

.shadow({type:’sides’, sides:’hz-2′});

シャドウの種明かし

シャドウの基本はもちろん、CSSの box-shadow プロパティで影を付けるんですが、おしゃれシャドウではもう少し小細工をしてます。

シャドウを付けたい本体（div要素など）に直接シャドウをあてるのではなく、本体に疑似要素と呼ばれる架空の要素を作り出して、その架空の要素に影を付けます。

架空の要素をナナメにしたり、菱形や長丸に変形させてそれに影を付けることによっていろいろなおしゃれシャドウを実現しているわけです。

そしてその架空の要素はCSSを使用します。 :before と :after という要素で、HTMLに存在しないモノをつくることができます。
本来は、特定の要素に文字などをCSSを使用して挿入するためのものなのです。が、頭のいいどこかの方が上手く使って影をおしゃれにしてくれたのです。

では種明かします。

.shadow();

shadow(“lifted”);

.shadow(“perspective”);

shadow(“raised”);

.shadow({type:’sides’, sides:’vt-1′});

.shadow({type:’sides’, sides:’vt-2′});

.shadow({type:’sides’, sides:’hz-1′});

.shadow({type:’sides’, sides:’hz-2′});

と、こんなかんじでもとのdivでつくったボックスとは別に疑似要素でつくったシャドウをかける専用の要素をつくって、それぞれ加工しているのです。考え方が分かれば自作もできそうですね！

このプラグイン、というかCSSシャドウ使用時の注意点

上記のサンプルや種明かしをみると、ほとんどのエフェクトで疑似要素が使用されています。そして疑似要素は position プロパティで絶対位置を指定しており、元の要素の裏に隠れるようにつくられています。

なので position プロパティを多用しているデザインでは上手くシャドウがつかないことがあります。
使用しているWordPressのテーマやサイトのデザインなどによっては要素の重なりなどで疑似要素が背景などの裏に隠れてしまって、シャドウが見えないこともあります。このブログがまさにそうでした！｡ﾟ(ﾟ´(00)`ﾟ)ﾟ｡

とりあえずの回避法として、シャドウを付けたい要素を空の要素で囲ってしまい、その囲った要素に position: relative をかけて無理矢理背景などより前に出してしまえば回避できました。

うちではこうしてみましたよ
[html highlight=”1,7″]

<div id="hoge">
サンプルです。
</div>

</div> <!– hogeWrapper end –>

[/html]

とりあえずの回避法ですが、
上手くいかない方は参考にしてみてください~(=^･ω･^)ﾉ☆