CSS/JS: 画像を不規則な形に切り取ってテープで貼り付けるテクニック(翻訳)

概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: Glue Cross-Browser Responsive Irregular Images with Sticky Tape 公開日: 2017/07/10 著者: Ana Tudor ブログサイト: css-tricks.com 注: 英語記事執筆の時点からブラウザのバージョンが進んでいるため、本記事内の細かなCodePen埋め込み表示は元記事のCodePen表示と若干異なっている可能性があります。また、ブラウザによってもCodePen表示が若干異なる可能性があります。 CSS/JS: 画像を不規則な形に切り取ってテープで貼り付けるテクニック(翻訳) この間、Vasilis van Gemert氏のサイト「Atlas of Makers」のことがふと頭をよぎりました。とても面白く風変わりなこのサイトに惹かれて調べてみたところ、ここはまさに学ぶ価値のあるサイトであると確信できました。このサイトには数年におよび記事やよもやま話がたくさん詰まっていますが、サイト制作に使われている機能が実にクールなのです。このサイトの技法にはCSS Grid、カスタムプロパティ、blendモードや、SVGまで動員されていますが、それにもかかわらずなぜかそれほど知られていません。 このサイトでは四角でない不定形の画像の作成にSVGを使っており、まるでページに蛍光テープやスコッチテープで貼り付けたかのように表示されています(スコッチテープエフェクト)。本記事では、ブラウザだけで作業できるシンプルな手法でこの技法を再現する方法について解説します。それでは始めましょう。 訳注: 以下、原文のscotch tapeは単に「テープ」と表記します。 1. 画像のポリゴン頂点座標の取得 まずは題材選びから。こちらのsnow leopard(ユキヒョウ)画像を例として使うことにします。 続いて、このsnow leopardの輪郭に合わせてざっくりポリゴンで囲みます。今回はClippy(作: Bennett Feely)というサービスを使いました。CSSのclip-pathは現時点ではクロスブラウザではないため、ここでは使いません(使いたい方はMicrosoft Edgeのフォーラムで投票してください: ログイン不要です)。Clippyはとても素晴らしいサービスで、うんざりするほどのボタンやらオプションやらを装備した画像レタッチソフトウェアを使わずに、ポリゴンの頂点のデータだけをきわめて高速に取り出せます。 次は画像のカスタムURLとカスタム寸法を設定します。Clippyではviewportのサイズに沿って寸法を制限できますが、ここでは実際の画像のサイズはまったく重要ではありません(特に、最終出力は%値だけで指定されるため)。この画像にはアスペクト比2:3だけを指定することにします。 Clippyでカスタム寸法とURLを指定する場所は上のスクリーンショットに印をつけてあります。カスタム寸法の縦横比は2:3になるようにする必要があります。幅は540 = 2*270、高さは810 = 3*270とします。 作業を説明しやすくするため、Show outside clip-pathオプションをオンにしておきます。 続いて、カスタムポリゴンをクリッピングパスで使えるように、すべての頂点を選択し、パスをきちんと閉じてから頂点の位置を適当に調整します。 ネコの輪郭をごく大まかに外側からなぞるようにカスタムポリゴンの点を選択すると、CSSのclip-pathコードが生成されます。 2. ブラウザのdeveloper … Continue reading CSS/JS: 画像を不規則な形に切り取ってテープで貼り付けるテクニック(翻訳)