ファンシーな画像装飾: アウトラインと複雑なアニメーション

この XNUMX 部構成のシリーズの最後の XNUMX つの記事では、グラデーションを使って、 エレメント。 最後の XNUMX 番目の記事では、CSS を使用してさらに多くのテクニックを探ります。 outline 財産。 私たちは一般的に使用しているため、奇妙に聞こえるかもしれません outline 要素の周りに単純な線を引く — ちょっと似ている border ただし、一度に描画できるのは XNUMX つの側面すべてのみであり、ボックス モデルの一部ではありません。

とはいえ、もっと多くのことができるので、この記事で実験したいと思います。

最初の例から始めましょう — ホバーするとクールなアニメーションで消えるオーバーレイです:

画像に要素を追加することでこれを達成できますが、それが私たちが挑戦していることです このシリーズでやること。 代わりに、CSS に手を伸ばすことができます。 outline 負のオフセットを持つことができ、その要素をオーバーラップできるというプロパティと活用。

img {
  --s: 250px; /* the size of the image */
  --b: 8px;   /* the border thickness*/
  --g: 14px;  /* the gap */
  --c: #4ECDC4;

  width: var(--s);
  aspect-ratio: 1;
  outline: calc(var(--s) / 2) solid #0009;
  outline-offset: calc(var(--s) / -2);
  cursor: pointer;
  transition: 0.3s;
}
img:hover {
  outline: var(--b) solid var(--c);
  outline-offset: var(--g);
}

トリックは、 outline 画像サイズの半分の厚さで、負の値で画像サイズの半分だけオフセットします。 色に半透明性を追加すると、オーバーレイが作成されます。

残りは何が起こるかです :hover. を更新します outline 両方のアウトライン間の移行により、クールなホバー効果が生まれます。 同じテクニックを使用して、移動しないフェード効果を作成することもできます。 outline しかし、それを透明にします。

この画像では半分の画像サイズを使用する代わりに、非常に大きな画像サイズを使用しています。 outline 厚さの値 (100vmax) CSS マスクの適用中。 これにより、画像のサイズを知る必要がなくなりました — このトリックはあらゆるサイズで機能します!

を使用すると問題が発生する可能性があります 100vmax Safariの大きな価値として。 その場合は、前のトリックを検討してください。 100vmax 半分の画像サイズで。

私たちは物事をさらに進めることができます！ たとえば、単に余分な部分を切り取る代わりに outline、形状を作成し、派手なリビール アニメーションを適用できます。

かっこいいでしょ？ の outline 黄色のオーバーレイを作成するものです。 の clip-path 余分な部分を切り取る outline 星の形を取得します。 次に、ホバーすると、色が透明になります。

ああ、代わりにハートが欲しいですか？ 私たちは確かにそれを行うことができます!

私たちが作成できるすべての可能な組み合わせを想像してみてください。 私たちがしなければならないことは、CSS マスクおよび/または clip-path そしてそれを outline 騙す。 ひとつのソリューション、無限の可能性！

そして、はい、これも間違いなくアニメーション化できます。 それを忘れないようにしましょう clip-path アニメート可能で、 mask これは、このシリーズの最初の XNUMX つの記事で非常に詳細に説明したグラデーションに依存しています。

私は知っています、アニメーションは少しグリッチです。 これは、本番サイトで使用される「最終製品」というよりも、アイデアを説明するためのデモです。 より自然な移行のために物事を最適化したいと考えています。

を使用したデモはこちら mask 代わりは。 それは私が最後にあなたをからかったものです 最後の記事:

あなたは、 outline プロパティはそれほど素晴らしいことができましたか？ ファンシーな画像装飾用のツールボックスに追加してください。

すべてのものを組み合わせてください！

グラデーション、マスク、クリッピング、アウトラインを使用した多くのトリックを学習したので、グランド フィナーレの時間です。 このシリーズの締めくくりとして、過去数週間で学んだことをすべて組み合わせて、テクニックを紹介するだけでなく、これらのアプローチがいかに柔軟でモジュール化されているかを示しましょう。

これらのデモを初めて見た場合は、追加の divs ラッパーと疑似要素が多数使用されていると思うかもしれません。 しかし、すべては直接上で起こっています エレメント。 これらの高度な形状と効果を得るために必要な唯一のセレクタです!

包み込む

ここ数週間、この XNUMX 部構成のシリーズに付き合ってくれてありがとう。 シンプルな画像を人目を引くインタラクティブなものに変えるさまざまなテクニックをたくさん調べました。 私たちがカバーしたすべてを使用しますか? 確かにそうではありません！ しかし、これが、グラデーションや mask, clip-path, outline.

そして、私たちはたったXNUMXつですべてを行いました エレメント！ 余分な div ラッパーと疑似要素はありません。 確かに、これは私たち自身に課せられた制約ですが、CSS を調査し、一般的なユース ケースに対する革新的なソリューションを見つけようとするきっかけにもなりました。 したがって、追加のマークアップを HTML に追加する前に、CSS がそのタスクを処理できるかどうかを検討してください。