clip-path使ってみた

CSSのclip-pathを使って「真ん中を切り抜いたマスク」を作成したお話しです。

Transcript

1. clip-path使ってみた
   

   View Slide

2. このマスクの部分、皆さんならどう実装しますか？
   物件登録時に所在地
   を指定するモーダル
   

   View Slide

3. 選ばれたのは…
   

   View Slide

4. clip-pathでした。

   

   View Slide

5. clip-pathの基本的な使い方
   clip-path: 　

   clip-path:[ || ]
   clip-source：URLでSVG要素を参照

   basic-shape：CSS Shapes仕様で定義されている基本シェイプ機能を指定（inset, circle, ellipse, poligon）

   geometry-box：basic-shapeと組み合わせて指定すると、basic-shapeでのリファレンスボックスのようになります。

   ※具体的な指定方法は不明です。

   

   View Slide

6. https://bennettfeely.com/clippy/
   CSS generator 『Clippy』
   ① ⑩
   ⑨
   ② ③ ⑧
   ④ ⑤
   ⑥
   ⑦
   ① ② ③ ④ ⑥ ⑦ ⑧ ⑨
   ⑤ ⑩
   

   View Slide

7. 468px
   468px
   1198px
   30.5% 30.5%
   39%
   10.2%
   10.2%
   79.6%
   588px
   𝒙
   𝐲
   

   View Slide

8. clip-path: polygon(
   0% 0%,
   0% 100%,
   30.5% 100%,
   30.5% 10.2%,
   69.5% 10.2%,
   69.5% 89.8%,
   30.5% 89.8%,
   30.5% 100%,
   100% 100%,
   100% 0%
   );
   ①
   ②
   ③
   ④
   ⑤
   ⑥
   ⑦
   ⑧
   ⑨
   ⑩
   ① ⑩
   ⑨
   ② ③ ⑧
   ④ ⑤
   ⑥
   ⑦
   

   View Slide

9. 
   .modal-map__mask{
   position: absolute;
   top: 0;
   left: 0;
   background-color: rgba(0, 0, 0, .7);
   width: 1198px;
   height: 588px;
   clip-path: polygon(0% 0%, 0% 100%,
   30.5% 100%, 30.5% 10.2%, 69.5% 10.2%,
   69.5% 89.8%, 30.5% 89.8%, 30.5% 100%,
   100% 100%, 100% 0%);
   z-index: 9;
   }
   

   View Slide

10. できた…
    

    View Slide

11. と思いきや…
    

    View Slide

12. レスポンシブ対応ができていない …
    

    View Slide

13. widthを100%にすればええんや！
    

    View Slide

14. 切り抜き部分も可変になってしまっている …
    

    View Slide

15. この部分 ＝ 1198px - 100%
    

    View Slide

16. (1198px - 100%)の半分の値分左にずらせばええんや！
    

    View Slide

17. @include breakpoint-down(desktop) {
    left: calc((100% - 1198px) / 2);
    }
    

    View Slide

18. 完成。
    

    View Slide

19. おまけ
    clip-pathでアニメーション
    https://jsfiddle.net/takahori/jhpd4nxm/136/
    

    View Slide