先日とあるブログを見ていたら、プロフィールカードのサムネ画像が斜めにカットされたデザインになってて、これどうやってるのかなとソースコードを覗いてみたら、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 対応*/ }
オリジナル SNS シェアボタン 【JavaScript 版】(2021/05/14: コードをアップデートしました)
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のことを無視すれば)メリットしかないですよね。
トップページで導入するかどうかは未定だけど、他の所でも応用できそうなので、色々試してみよう。(その後プロフィールウィジェットやサムネ付きページャーで導入しました)
コメントを投稿
別ページに移動します2 件のコメント (新着順)
ふじやん
accoさん、こんにちは。
ほんと手軽で便利ですよねえ。
色々アイデアが思いつきそうですが、うちではとりあえず↓のサムネ付きページャーに取り入れてみました。
acco
すごくシンプルなコードでいろんな形が作れるなんてサイコーです。