web-dev-qa-db-ja.com

CSSで新しい長い影のトレンドを作成する方法は？

フラットUI とともに「ロングシャドウ」と呼ばれる新しいトレンドがあります。
これは写真の例です：

by Luky Vj クレジット

私はそれが本当に好きで、今、私のサイトにそのような効果が欲しいです。しかし、私は写真を作りません、私はCSSでそれをしたいです！ （またはHTML5、jQueryなど）。

私はすでにそのためのジェネレーターを見つけました（ Juani RuizEchazúによる長い影ジェネレーター ）が、生成されたCSSは本当にぎこちなく見えます。

例：

.shape {
    text-shadow: rgb(20, 144, 120) 1px 1px,
    rgb(20, 144, 120) 2px 2px,
    rgb(20, 144, 120) 3px 3px,
    rgb(20, 144, 120) 4px 4px,
    rgb(20, 144, 120) 5px 5px,
    rgb(20, 144, 120) 6px 6px,
    rgb(20, 144, 120) 7px 7px,
    rgb(20, 144, 120) 8px 8px,
    rgb(20, 144, 120) 9px 9px,
    rgb(20, 144, 120) 10px 10px,
    rgb(20, 144, 120) 11px 11px,
    rgb(20, 144, 120) 12px 12px,
    rgb(20, 145, 121) 13px 13px,
    rgb(20, 146, 122) 14px 14px,
    rgb(20, 147, 123) 15px 15px,
    rgb(20, 148, 123) 16px 16px,
    rgb(20, 149, 124) 17px 17px,
    rgb(20, 150, 125) 18px 18px,
    rgb(20, 151, 126) 19px 19px,
    rgb(21, 152, 126) 20px 20px,
    rgb(21, 153, 127) 21px 21px,
    rgb(21, 154, 128) 22px 22px,
    rgb(21, 155, 129) 23px 23px,
    rgb(21, 156, 129) 24px 24px,
    rgb(21, 157, 130) 25px 25px,
    rgb(21, 158, 131) 26px 26px,
    rgb(21, 159, 132) 27px 27px,
    rgb(22, 160, 133) 28px 28px;
    box-shadow: rgb(28, 37, 48) 1px 1px,
    rgb(28, 37, 48) 2px 2px,
    rgb(28, 37, 48) 3px 3px,
    rgb(28, 37, 48) 4px 4px,
    rgb(28, 37, 48) 5px 5px,
    rgb(28, 37, 49) 6px 6px,
    rgb(28, 37, 49) 7px 7px,
    rgb(28, 38, 49) 8px 8px,
    rgb(28, 38, 49) 9px 9px,
    rgb(29, 38, 49) 10px 10px,
    rgb(29, 38, 49) 11px 11px,
    rgb(29, 38, 50) 12px 12px,
    rgb(29, 38, 50) 13px 13px,
    rgb(29, 38, 50) 14px 14px,
    rgb(29, 39, 50) 15px 15px,
    rgb(29, 39, 50) 16px 16px,
    rgb(29, 39, 50) 17px 17px,
    rgb(29, 39, 51) 18px 18px,
    rgb(29, 39, 51) 19px 19px,
    rgb(30, 39, 51) 20px 20px,
    rgb(30, 39, 51) 21px 21px,
    rgb(30, 39, 51) 22px 22px,
    rgb(30, 40, 51) 23px 23px,
    rgb(30, 40, 52) 24px 24px,
    rgb(30, 40, 52) 25px 25px,
    rgb(30, 40, 52) 26px 26px,
    rgb(30, 40, 52) 27px 27px,
    rgb(30, 40, 52) 28px 28px,
    rgb(30, 40, 52) 29px 29px,
    rgb(31, 41, 53) 30px 30px,
    rgb(31, 41, 53) 31px 31px,
    rgb(31, 41, 53) 32px 32px,
    rgb(31, 41, 53) 33px 33px,
    rgb(31, 41, 53) 34px 34px,
    rgb(31, 41, 53) 35px 35px,
    rgb(31, 41, 54) 36px 36px,
    rgb(31, 41, 54) 37px 37px,
    rgb(31, 42, 54) 38px 38px,
    rgb(31, 42, 54) 39px 39px,
    rgb(32, 42, 54) 40px 40px,
    rgb(32, 42, 54) 41px 41px,
    rgb(32, 42, 55) 42px 42px,
    rgb(32, 42, 55) 43px 43px,
    rgb(32, 42, 55) 44px 44px,
    rgb(32, 43, 55) 45px 45px,
    rgb(32, 43, 55) 46px 46px,
    rgb(32, 43, 55) 47px 47px,
    rgb(32, 43, 56) 48px 48px,
    rgb(32, 43, 56) 49px 49px,
    rgb(33, 43, 56) 50px 50px,
    rgb(33, 43, 56) 51px 51px,
    rgb(33, 43, 56) 52px 52px,
    rgb(33, 44, 56) 53px 53px,
    rgb(33, 44, 57) 54px 54px,
    rgb(33, 44, 57) 55px 55px,
    rgb(33, 44, 57) 56px 56px,
    rgb(33, 44, 57) 57px 57px,
    rgb(33, 44, 57) 58px 58px,
    rgb(33, 44, 57) 59px 59px,
    rgb(34, 45, 58) 60px 60px;
    background-color: rgb(22, 160, 133);
    height: 150px;
    width: 150px;
    font-size: 75px;
    line-height: 150px;
    text-align: center;
}

それで、グラフィックスを必要とせずにこれを行う簡単で、きれいで、より良い方法はありますか？

グラフィックを使用しない理由の説明

私は創造的で珍しくて傑出したアニメーションが大好きです。ですから、この長い影は本当に美しいものだと思います。

私は自分の心の中にアニメーションを持っています。
「Stackoverflow」のようなテキストがあります。このテキストにCSS -transitionを追加します。このテキストにカーソルを合わせると、滑らかなtext-shadow。
デモでの考え方
簡単。しかし、この長い影はどのように表示されますか？それは素晴らしいことだ。しかし、このアニメーションだけでは巨大なCSSになります。理不尽。

だから私はあなたにスマートヘッドを頼む。簡単なCSS-Trickを知っていますか、それともJavaScriptや他のライブラリでこれを実現する方法がありますか？それから私は私の小さな考えよりも多くの驚くべき効果があると思います...

csscss3shadow
34
Michael Schmidt

Sassでこれを行う方法については、このチュートリアルをご覧ください。 http://css-tricks.com/metafizzy-effect-with-sass/

完全な結果でこのCodePenを見てください： http://codepen.io/hugo/pen/nwivF

上記の例は、純粋なCSSでそれを行う唯一の方法であり、非常に奇妙に見えますが、トランジションなどを使用してテキストの影を調整できます。

13
Lost Left Stack

約1週間後、現時点では無駄のないアニメーション可能なソリューションはありません。
しかし、最も重要な要件を無視すると、さまざまな可能性があります。
だから、私が見つけたこれらすべての可能性の概要を少し作りたいと思います。

CSSのみ

暗いテキストシャドウソリューション
最初の解決策は、投稿したサンプルコードです。それは非常にかさばりますが、結果はサンプル画像と本当に似ています。しかし、transitionを使用してこのコードをアニメーション化する場合は、非常に大きなCSSコードになります。
結論

+ Very similar to the original effect on pictures
+ An only CSS way
+ Possible to generate CSS only animations
- Generate big bunch of CSS code
- Hard to create animations

ツールと例
唯一のCSS方法を生成するための最良のツールの1つは、 Juani RuizEchazú によるLong Shadow Generatorです。

rgbaを使用した太いテキストシャドウソリューション
Michael Mendelsohn 's answer 彼はrgbaを使用してopacityを追加し、かなりのフェードアウト効果を生成することを提案しています。ただし、グラフィックスのようなこのような効果は生成されません。
結論

+ An only CSS way
+ Possible to generate CSS only animations
+ Could be a slimmer CSS code than without rgba
+ Could be easier to generate animations
- Not similar to the original effect
- For a longer shadow, it will be again a lot of CSS

ツールと例
Michael Mendelsohnの答えを読んでください。インターネットでサンプル/ツールが見つからず、作成する時間もありませんでした。私のケースでは許容できるソリューションではないからです。

SCSSを使用した暗い影付きソリューション
最初のソリューションのLoC（コード行）を削減するには、 Front End Guy SCSSを使用することをお勧めします。コードはよりスリムになりますが、見苦しく、理解しにくくなります。非常に大きいままです結論

+ Very similar to the original effect
+ An only CSS way
+ Possible to generate CSS only animation
+ Slimmer CSS than without SCSS...
- ... but it will be remain a bulky CSS
- Not everybody is familiar with SCSS so the code is going to be incomprehensible
- Hard to create animations

ツールと例
Codepen Example があり、異なるオブジェクト（アイコン、フォントなど）でSCSSを使用して長い影の効果を作成する方法を示します

JavaScriptのみ

JavaScriptのみでCSSを生成します
ser1724911 's answer は、JavaScriptを使用してCSSを生成する方法を説明しています。バックグラウンドでは、この大量のコードが再び作成されますが、JavaScriptコードは、 「ハードコーディングされた」CSS。アニメーションも同じ方法で可能です（user1724911の答えを見てください）。
結論

+ Very similar to the original effect
+ To develop code is a lot slimmer
+ Animations are easy and lean to create
- In the background, there is this big bulky CSS code
- performance

ツールと例
user1724911の回答を見て、アニメーションのコードも確認してください。小さな例を作成しました。 1つのHTMLタグとJavaScriptの小さな行だけで。 Codepenの例

jQueryプラグイン
Long-Shadow用の小さな jQueryプラグイン も見つかりました。非常に使いやすいですが、（私の意見では）い影効果を生成します。
結論

+ Extreme easy-to-use
- Very ugly effect

ツールと例
このプラグインを見つけました here 。

グラフィックとJavaScript

ギークの問題
本当に素晴らしい、素晴らしいロングシャドウ効果を持つサイトがあります。サイトは We Are Impero 。ということで、私はImperoチームに、この素​​晴らしい効果をどのように生成するかを尋ねました。

すべてカスタム設計および構築されています。作業するフレームワークはありません、それは非常に難しいミッションでした！

したがって、グラフィックとJavaScriptを使用して自作します。
結論

+ Most wonderful long-shadow effect i've ever seen
- Self made. And it was a hard work.
- Graphic, CSS & JavaScript are required

ツールと例
楽しんでください We are Impero 's website。

グラフィックのみ

Photoshopの作業
したがって、この効果を画像として作成する方法もあります。これが最も簡単な方法であり、「オリジナル」です。しかし、悲しいことにアニメートできません...または、写真にカーソルを合わせると、アニメーションでgifを作成して表示しますか？あんまり ：-）
結論

+ The "original" effect
+ most adaptable
- Not animatable

ツールと例
Webには、Long-Shadowの例がたくさんあります。 Googleで検索してください。 Awwwards Photoshopでこの長い影の効果を作成する方法についてのクールな記事を作成しました。

ありがとうございます、回答、アイデア、インスピレーション、議論に感謝します。あなたがいなければ、私はたった1つの解決策しか持てないからです。
将来的には、そのようなものをより簡単に作成できるようになるかもしれません。

乾杯dTDesign

10
Michael Schmidt

これは私のコードです、私は私のサイトでそれを使用しています：

.longShadow{
    color:#fff;
    text-shadow:1px 1px rgba(0,0,0,0.01),
    2px 2px rgba(0,0,0,0.03),
    3px 3px rgba(0,0,0,0.025),
    4px 4px rgba(0,0,0,0.02),
    5px 5px rgba(0,0,0,0.015),
    6px 6px rgba(0,0,0,0.01),
    7px 6px rgba(0,0,0,0.01),
    8px 8px rgba(0,0,0,0.01),
    9px 8px rgba(0,0,0,0.01),
    10px 10px rgba(0,0,0,0.01),
    11px 11px rgba(0,0,0,0.01),
    12px 12px rgba(0,0,0,0.01),
    13px 13px rgba(0,0,0,0.01),
    14px 14px rgba(0,0,0,0.01),
    15px 15px rgba(0,0,0,0.01),
    16px 16px rgba(0,0,0,0.01),
    17px 17px rgba(0,0,0,0.01),
    18px 18px rgba(0,0,0,0.01),
    19px 19px rgba(0,0,0,0.01),
    20px 20px rgba(0,0,0,0.01),
    21px 21px rgba(0,0,0,0.01),
    22px 22px rgba(0,0,0,0.01),
    23px 23px rgba(0,0,0,0.01);
}
7
Zuhair Taha

Javascriptを使用してテキストのシャドウプレーンを生成できます。これを見てください：

<html>
 <head>
  <style>
   body { // in this example I used 'body' as animated content
    font-weight: bold;
    font-size: 65px;
    color:rgb(155,155,155);
    transition: text-shadow 0.5s linear;
    -moz-transition: text-shadow 0.5s linear;
    -webkit-transition: text-shadow 0.5s linear;
    -o-transition: text-shadow 0.5s linear;
    text-shadow: 1px 1px 0px rgba(0,0,0,1);
   }
  </style>
  <script> // here we can add some styles, generated by js.
   var text_shadow = '';
   for(var p = 0; p < 100; p++)
   {
    text_shadow += (text_shadow? ', ' : '') + 2*p + 'px '+ 2*p +'px 1px rgba(0,0,0,' + 1/(p+1) + ')';
   }
   document.head.innerHTML += "<style> body:hover { text-shadow: " + text_shadow + ";  } </style>";
  </script>
 </head>
 <body>Stackoverflow</body>
</html>

しかし、このようなコードは、遅いCPU（一部のテキストでは100プレーン）にとっては困難です...これを念頭に置いてください。

2
Victor.Palyvoda

別のアプローチをお勧めします。複数のテキストシャドウを回避することはできませんが、代わりにrgba（0,0,0、val）を使用してみてください。ここで、valは.5〜0の間の数値です。 。

これを試して：

text-shadow: 1px 1px 1px rgba(0,0,0,.5),2px 2px 1px rgba(0,0,0,.4),3px 3px 1px rgba(0,0,0,.3),4px 4px 1px rgba(0,0,0,.2),5px 5px 1px rgba(0,0,0,0.1)

必要な距離と反復回数を使用できます。ただの提案。

2
itsmikem

最初の試みはCSSのみを使用し、もう1つの試みはCSSとカスタム背景PNG画像を使用します。

  • 1。 CSSのみ（まだ良くない）

私はこの画像の代わりに透明な背景で：beforeと：afterを使用しようとしましたが、今のところはまだ十分ではありません。

あなたはここで自分自身を見ることができます、私は影の右側に小さなバグがありました

enter image description here

http://codepen.io/gfra/pen/KtoDB

私はまだそれに取り組んでいますが、ここの誰かが時間があれば、あなたは助けて大歓迎です。

  • 2 CSSおよびPNG画像（見栄えが良い）

画像を使用することは最も効率的なソリューションではなく、ページの読み込みに1つのhttpリクエストが追加されることを知っていますが、画像を配信するCDNがあるので、これは私のWebサイトのパフォーマンスの問題ではありません。

結果は完璧とはほど遠いですが、パフォーマンスの問題を気にするならかなり良い結果が得られます。この方法を使用したのは、ページに追加する長い影がたくさんあり、ページの読み込み時にjqueryがあまり機能しないようにするためです。

私はまだdiv/aの内容に合わせて自動調整する方法を見つけようとしています。今のところ、必要な寸法に合わせていくつかのマジックナンバーがあります。

Long shadows with CSS and PNG image

http://codepen.io/gfra/pen/DLzxC

1
Gfra54

LESSCSSを使用している場合、このミックスインは、ミックスインを使用してフラットな長いシャドウを作成します。

https://github.com/zensimilia/less-long-shadow

私は自分のサイトでそれを使用していますが、うまく機能しています

1
amitgur

私が考えているのは、長い影を使用する別の方法は、色でreactangleを作成することです（Googleの影にカラーピッカーを使用します）そして、画像とそれを揃えます。それはあなたの問題を解決する必要があります。ダイヤモンドについてはこちらをご覧ください

#diamond {
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-bottom-color: red;
    position: relative;
    top: -50px;
         }
#diamond:after {
    content: '';
    position: absolute;
    left: -50px;
    top: 50px;
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-top-color: red;
           }
0
user2681033

クレジット画像を見ると、多くのCSSになります： http://cssdeck.com/labs/google-fonts-css-longshade-icon

/* Google Font flat longshade Icon in pure css
   Create with love by @LukyVj 
   Inspired by so much people an works over the internet.
*/

@import url(http://fonts.googleapis.com/css?family=Marck+Script);
body {
    -webkit-font-smoothing: antialiased;
    background: #333;
    overflow: hidden;
}
.container {
    width: 245px;
    margin: 180px auto;
}
div.icon {
    /*transform*/
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    float: left;
    width: 245px;
    height: 245px;
    margin: 5px;
    display: block;
    background: rgb(150, 150, 150);
    font-family: "Marck Script",  sans-serif;
    text-align:center;
    font-size: 13em;
    font-weight: 500;
    line-height:.75;
    border-radius:15px;
    overflow:hidden;
}

div.icon:after {
    top: 0px;
    color: rgba(255, 255, 255, 0.9);
    width: 100%;
    height: 100%;
    display: block;
    overflow: hidden;
    position: relative;
    text-align: center;
    padding-top: 54.05px;
    box-sizing: border-box;
    /*box-shadow*/
    -webkit-box-shadow: 1px 1px 0px #000 ;
    -moz-box-shadow:1px 1px 0px #000 ;
    box-shadow:1px 1px 0px #000 ;
}
/*The shadow of the squares */
.icon:before {
    content: '';
    display: block;
    float: left;
    width: 136%;
    height: 136%;
    position: absolute;
    margin: 29%;
    /*transform*/
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    /*linear-gradient*/
    background: -webkit-gradient(linear,60.06% 107.04%,39.94% -7.04%,from(rgba(0,0,0,.1)),to(rgba(0,0,0,0)));
    background: -webkit-linear-gradient(100deg,rgba(0,0,0,.1),rgba(0,0,0,0));
    background: -moz-linear-gradient(100deg,rgba(0,0,0,.1),rgba(0,0,0,0));
    background: -o-linear-gradient(100deg,rgba(0,0,0,.1),rgba(0,0,0,0));
    background: linear-gradient(100deg,rgba(0,0,0,.1),rgba(0,0,0,0));
}

.gf:after {
   -webkit-font-smoothing: antialiased;
    content: "F";
    background: #dd473d;
    text-shadow: 1px 1px 0 rgba(0,0,0,.15),138px 138px 0px #a83027, 137px 137px 0px #a83027, 136px 136px 0px #a83027,135px 135px 0px #a83027, 134px 134px 0px #a83027, 133px 133px 0px #a83027,132px 132px 0px #a83027, 131px 131px 0px #a83027, 130px 130px 0px #a83027, 129px 129px 0px #a83027, 128px 127px 0px #a83027, 126px 126px 0px #a83027,125px 125px 0px #a83027, 124px 124px 0px #a83027, 123px 123px 0px #a83027,122px 122px 0px #a83027, 121px 121px 0px #a83027, 120px 120px 0px #a83027, 119px 118px 0px #a83027, 117px 116px 0px #a83027, 115px 114px 0px #a83027,113px 113px 0px #a83027, 112px 112px 0px #a83027, 111px 111px 0px #a83027, 110px 110px 0px #a83027, 109px 109px 0px #a83027, 108px 108px 0px #a83027, 107px 107px 0px #a83027, 106px 106px 0px #a83027, 105px 105px 0px #a83027, 104px 104px 0px #a83027, 103px 103px 0px #a83027, 102px 102px 0px #a83027, 101px 101px 0px #a83027, 100px 100px 0px #a83027, 99px 99px 0px #a83027, 98px 98px 0px #a83027, 97px 97px 0px #a83027, 96px 96px 0px #a83027, 95px 95px 0px #a83027, 94px 94px 0px #a83027, 93px 93px 0px #a83027, 92px 92px 0px #a83027, 91px 91px 0px #a83027, 90px 90px 0px #a83027, 80px 80px 0px #a83027, 79px 79px 0px #a83027, 78px 78px 0px #a83027, 77px 77px 0px #a83027, 76px 76px 0px #a83027, 75px 75px 0px #a83027, 74px 74px 0px #a83027, 73px 73px 0px #a83027, 72px 72px 0px #a83027, 71px 71px 0px #a83027, 70px 70px 0px #a83027, 69px 69px 0px #a83027, 68px 68px 0px #a83027, 67px 67px 0px #a83027, 66px 66px 0px #a83027, 65px 65px 0px #a83027,64px 64px 0px #a83027, 63px 63px 0px #a83027, 62px 62px 0px #a83027, 61px 61px 0px #a83027, 60px 60px 0px #a83027, 59px 59px 0px #a83027, 58px 58px 0px #a83027, 57px 57px 0px #a83027, 56px 56px 0px #a83027, 55px 55px 0px #a83027, 54px 54px 0px #a83027, 53px 53px 0px #a83027, 52px 52px 0px #a83027, 51px 51px 0px #a83027, 50px 50px 0px #a83027, 49px 49px 0px #a83027, 48px 48px 0px #a83027, 47px 47px 0px #a83027, 46px 46px 0px #a83027, 45px 45px 0px #a83027, 44px 44px 0px #a83027, 43px 43px 0px #a83027, 42px 42px 0px #a83027, 41px 41px 0px #a83027, 40px 40px 0px #a83027, 39px 39px 0px #a83027, 38px 38px 0px #a83027, 37px 37px 0px #a83027, 36px 36px 0px #a83027, 35px 35px 0px #a83027, 34px 34px 0px #a83027, 33px 33px 0px #a83027,32px 32px 0px #a83027, 31px 31px 0px #a83027, 30px 30px 0px #a83027, 29px 29px 0px #a83027, 28px 28px 0px #a83027, 27px 27px 0px #a83027, 26px 26px 0px #a83027, 25px 25px 0px #a83027, 24px 24px 0px #a83027, 23px 23px 0px #a83027, 22px 22px 0px #a83027, 21px 21px 0px #a83027, 20px 20px 0px #a83027, 19px 19px 0px #a83027, 18px 18px 0px #a83027, 17px 17px 0px #a83027, 16px 16px 0px #a83027, 15px 15px 0px #a83027, 14px 14px 0px #a83027, 13px 13px 0px #a83027, 12px 12px 0px #a83027, 11px 11px 0px #a83027, 10px 10px 0px #a83027, 9px 9px 0px #a83027, 8px 8px 0px #a83027, 7px 7px 0px #a83027, 6px 6px 0px #a83027, 5px 5px 0px #a83027, 4px 4px 0px #a83027, 3px 3px 0px #a83027, 2px 2px 0px #a83027, 1px 1px 0px #a83027, 15px 1px 0px #a83027,16px 2px 0px #a83027,17px 3px 0px #a83027,18px 4px 0px #a83027,19px 5px 0px #a83027,20px 6px 0px #a83027,21px 7px 0px #a83027,22px 8px 0px #a83027,
23px 9px 0px #a83027,
24px 10px 0px #a83027,
25px 11px 0px #a83027,
26px 12px 0px #a83027,
27px 13px 0px #a83027,
28px 14px 0px #a83027,
29px 15px 0px #a83027,
30px 16px 0px #a83027 , 
31px 17px 0px #a83027,
32px 18px 0px #a83027,
33px 19px 0px #a83027,
34px 20px 0px #a83027,
35px 21px 0px #a83027,
36px 22px 0px #a83027,
37px 23px 0px #a83027,
38px 24px 0px #a83027,
39px 25px 0px #a83027,
40px 26px 0px #a83027,
41px 27px 0px #a83027,
42px 28px 0px #a83027,
43px 29px 0px #a83027,
44px 30px 0px #a83027,
45px 31px 0px #a83027,
46px 32px 0px #a83027;
}
0
o_O

最良の方法は、jqueryフラットシャドウを使用することです。

https://github.com/peachananr/flat-shadow

使用法

これをWebサイトで使用するには、ここにある最新のjQueryライブラリとjquery.flatshadow.jsをドキュメントのに含めるだけで、次のようにhtmlマークアップと関数呼び出しを実行します。

<div class="flat-icon"> FLAT </div>
<div class="flat-icon"> UI </div>

...

$(".flat-icon").flatshadow({
  color: "#2ecc71", // Background color of elements inside. (Color will be random if left unassigned)
  angle: "SE", // Shadows direction. Available options: N, NE, E, SE, S, SW, W and NW. (Angle will be random if left unassigned)
  fade: true, // Gradient shadow effect
  boxShadow: "#d7cfb9" // Color of the Container's shadow
});

さらなるカスタマイズ

Jquery.flatshadow.jsを使用すると、次のようにマークアップにdata-colorとdata-angleを追加するだけで、個々の要素に異なる効果を適用できます。

<div data-color="#2ecc71" data-angle="NE" class="flat-icon"> FLAT </div>
<div data-color="#1ABC9C" data-angle="NW" class="flat-icon"> UI </div>

次に示すように、色と角度のグローバルオプションを削除します。

$(".flat-icon").flatshadow({
  fade: true,
  boxShadow: "#d7cfb9"
});

これで、関数を複数回呼び出すことなく、個々の要素ごとに独自の効果が得られます。

0
pabloRN