18845


興味本位で、jQueryUIを作ろうとしています。  
styleでもjQueryを使った描画でも構いませんが、例えば、

height 400px width 400pxの要素があり、内接円(半径200px)に囲まれた部分以外をhide()する。  
また、内接円を縦に2等分し、その頂点P1, P2および、円の中心oから真横に1/2r進んだ点を通る曲線Aから、等分された円の円周にかけて、  
whiteからgrayに向けて徐々に濃くなるシャドウをかけることはできるのでしょうか？

実際にはカレンダーを右下から傾き[y=-x]の方向にめくる動作をリアルにUIとして実装しようとしており、めくられた部分は背後に隠れた要素が表示されたようにするため、画像は使わないという前提です。

上手く表現できず申し訳ございませんが、このように、2次関数などの内側外側のみ要素を見え隠しする、また、グラデーションでシャドウをあてることは可能なのでしょうか。


CC BY-SA 3.0
2015-11-14T15:40:48.553
18820
2015-11-15T09:01:43.427
8396
question
javascript jquery css jquery-ui
JSである数式をグラフ化した時の外側を隠す&シャドウをかける


要素の切り抜きに限って書きます。

Canvas要素や、SVG要素の中でしたら当然の事ながら何でも出来ます。  
しかし、任意のHTML要素の形を自由に操るのは、今の所いろいろ面倒くさいです。  
CSSとSVGのClipping・Maskingは統合される予定らしいので、将来は手軽に出来るようになるかもしれません。  
本当に要素をぐにゅぐにゃ変形させていなくとも、それらしく見せるテクニックはいろいろあるので、既存のライブラリを参考・使用するなどしてごまかすのがよいのではないでしょうか。  
[turnjs](http://www.turnjs.com/)はよく出来ていると思います（使い易いかは別ですが）。

一応、円形に切り抜く例を三つ挙げて置きます。

[code]

    .wrap{
     border-style: solid;
     border-color: orange;
    }
    .sample{
     display: inline-block;
     width: 180px;
     height: 180px;
     color: white;
     background-color: darkblue;
     text-align: center;
     font-size: 14px;
     line-height: 18px;
     font-family: monospace;
    }
    .sample:hover{
     background-color: yellowgreen;
    }
    #clip_url{
     clip-path: url(#cpath_circle);
     -webkit-clip-path: url(#cpath_circle);
    }
    #clip_circle{
     clip-path: circle(50%);
     -webkit-clip-path: circle(50%);
    }
    #radius{
     border-radius: 50%;
     overflow: hidden;
    }
[/code]

[code]

    <div class="wrap">
     <pre id="clip_url" class="sample">+------------------+
    |--clip path url---|
    |--clip path url---|
    |--clip path url---|
    |--clip path url---|
    |--clip path url---|
    |--clip path url---|
    |--clip path url---|
    |--clip path url---|
    +------------------+</pre>
    </div>
    <div class="wrap">
     <pre id="clip_circle" class="sample">+------------------+
    |-clip path circle-|
    |-clip path circle-|
    |-clip path circle-|
    |-clip path circle-|
    |-clip path circle-|
    |-clip path circle-|
    |-clip path circle-|
    |-clip path circle-|
    +------------------+</pre>
    </div>
    <div class="wrap">
     <pre id="radius" class="sample">+------------------+
    |--border radius---|
    |--border radius---|
    |--border radius---|
    |--border radius---|
    |--border radius---|
    |--border radius---|
    |--border radius---|
    |--border radius---|
    +------------------+</pre>
    </div>
    
    
    <svg width="0" height="0">
     <defs>
      <clipPath id="cpath_circle">
       <circle cx="90" cy="90" r="90"/>
      </clipPath>
     </defs>
    </svg>
[/code]

### clip-path: url(#cpath_circle);

切り抜く形をSVG要素の`clipPath`で指定する方法です。  
SVGは操作しやすいので、これが一番強力だと思います。  
しかし、相対的な値を指定した時に基準として参照されるのが、パスを含んでいるSVG要素のサイズであったりと、現状はあまり使い易くないです。  
さらにChrome系では座標の原点がおかしいですし、いろいろ実験中という感じです。  
Firefoxではだいぶましな気がします。

### clip-path: circle(50%);

CSS のみで完結する方法です。  
例ではcircleで円にしていますが、polygonを使えばどの様な形でも作れるはずです。  
Firefoxではまだサポートされていません。

### border-radius: 50%;

どのブラウザでも安定した結果が得られるのでは無いでしょうか。  
作れる形は限られていますが、transformと組み合わせる等でそれっぽく見せる事は出来ると思います。


CC BY-SA 3.0
2015-11-15T09:01:43.427
18845
2015-11-15T09:01:43.427
3054
18820
answer