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

2012.7.20 jQuery ringShadow.jpg

こんにちは! jQuery大好きっ子で 最近WordPress記事を全く書いていない いわだて (@dutchisover) です!

RingShadow

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

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

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

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

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

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

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

サンプル

サンプルです。

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

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

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

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

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

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

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

ちなみに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′});

イチオシ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 をかけて無理矢理 背景などより前に出してしまえば回避できました。

うちではこうしてみましたよ

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

プラグイン作成者様のダウンロード先

他にも シャドウをかける要素を傾けて、それに併せてシャドウをかけることも可! 今回は影にのみ絞って紹介してみましたので、そちらは ダウンロード先の こちら からどうぞ!

最近の記事

Sponsored