EDIT

【CSS】clip-path で手軽に図形デザイン

｜2023/09/06 ｜2
アイキャッチ

先日とあるブログを見ていたら、プロフィールカードのサムネ画像が斜めにカットされたデザインになってて、これどうやってるのかなとソースコードを覗いてみたら、CSSに clip-path という未知のプロパティが使われていた。

調べてみると clip-path は SVG の様に座標を指定するだけで画像や背景を手軽に好きな形にクリッピング(トリミング)できるらしい。

ファビコンコリス
サムネイル
CSSのclip-pathプロパティでいろいろ簡単に実装できる、便利な使い方と実装のポイント
CSSのclip-pathプロパティは、非常に便利です。 セクションの区切りを斜めにしたり、ボタンに波紋のエフェクトをつけたり、スクロールして要素がビューポートに入った時にアニメーションで表示されたり
https://coliss.com/articles/build-websites/operation/css/how-to-use-css-clip-path.html

トップページリストのサムネで実験

例えば当ブログのトップページリストのサムネ画像を clip-path:polygon で斜めにカットしてみるとこんな感じに。

img {
  clip-path: polygon(0 0, 98% 0, 85% 100%, 0 100%);
  -webkit-clip-path: polygon(0 0, 98% 0, 85% 100%, 0 100%); /*Safari 対応*/
}
demoアイキャッチ

オリジナル SNS シェアボタン 【JavaScript 版】(2021/05/14: コードをアップデートしました)

元々ツイート用のブックマークレットとして使っていた JavaScript コードをシェアボタン用に改造してみました。JavaScript 化することにより、ツイート時の不具合が解消されています。Twitter 以外の SNS のコードもついでに JavaScript 化させてありますが機能的な変化…

QooQ カスタマイズ

8 2021/05/10

サムネに合わせてスニペットを左に寄せてみた。なんかカッコいいよね(´▽｀)
(このデザインに変えようかなあ…)

ラベルのデザインが手軽に

実はサムネに適用する前に既に別のところで clip-path を導入しています。

各所のラベルのデザインがラベル型になっているのはもうお馴染みかと思いますが、この形を実現するために今まではCSS疑似要素を使っていたのですが、clip-path を使った成形に変更しました。

疑似要素だと、微調整をしても画面の解像度やラベル名のフォントによっては◀部分がずれてしまったりするという欠点があったのですが、clip-path を使えばそういう問題が解消できるのです。しかもコードもシンプル化出来るというメリットも。

疑似要素と clip-path の比較と特徴

ほとんどの環境では全く同じ様に見えてると思いますが、閲覧環境によっては疑似要素の方の形が微妙に崩れてるかもしれません。

疑似要素

  • 細かい微調整が必要。
  • フォントや解像度や高さによって◀がズレたりレイアウトが崩れてしまう。
  • IEでも表示可能。

See the Pen Label Background demo (plesdo) by Fujiyan (@fujiyanx) on CodePen.

clip-path

  • コードがシンプル。
  • 形が崩れる心配がない。
  • 非表示部分はポインターイベントの取得不可(マウスオーバーしても無反応)
    左側の◀の上下部分、カーソルは変化しますが、色は変わりません。
  • IE非対応。

See the Pen Label Background demo (clip-path) by Fujiyan (@fujiyanx) on CodePen.

ということで、(IEのことを無視すれば)メリットしかないですよね。

トップページで導入するかどうかは未定だけど、他の所でも応用できそうなので、色々試してみよう。(その後プロフィールウィジェットやサムネ付きページャーで導入しました)