カテゴリー
開発関連

css clip-pathとなかよし

楽しいよね

ってことで最近よくご一緒するcss clip-path

つい頼っちゃう。

CSSのclip-pathプロパティでいろいろ簡単に実装できる、便利な使い方と実装のポイント | コリス

https://coliss.com/articles/build-websites/operation/css/how-to-use-css-clip-path.html
CSS clip-path の使い方 / Web Design Leaves

https://www.webdesignleaves.com/pr/css/css_clip_path.html
個人的にはcircleが便利

SCSSサンプルコード

@mixin cliping {
    overflow: hidden;
    &:before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: #fff;
        opacity: 0.15;
        clip-path: circle(0 at center);
    }
    &:hover:before {
        clip-path: circle(200px at center);
        transition: 0.8s $easeOutCubic;
    }
}```
ってな感じ。コレは固定値だけど変数にすればもっと汎用性出る(興味あればコリスさんに書いてあるよ)ちょう便利。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください