CSS 線形グラデーション凹型長方形遷移効果の実装

この記事では、線形グラデーションの凹四角形の遷移効果の難しさやアイデアについて説明します。主に、凹四角形の実装、凹四角形への線形グラデーションの追加、線形グラデーションの背景色の遷移について紹介します。より良い実装ソリューションをお持ちの場合は、コメントセクションでお気軽にご相談ください。

その上

凹型長方形の実装

このスタイルを実装するきっかけとなったのは、CSS を使用して凹角を実現するインターネットの記事です。この記事では、Chrome タブの凹角効果を実現する方法について説明されており、おおよそ次のようになります。

これを実現するには、 radial-gradientグラデーションを使用します。グラデーションのぼかし距離を 0 に減らすと、円形の境界がはっきりと表示されます。 このアイデアに従うと、凹んだ長方形のスタイルを実現できます。グラデーションのpositionを調整して中心点の位置を制御し、放射状の円のサイズを調整して凹面の曲率を制御します。以下を参照してください。

MDN の放射状グラデーション デモでデバッグできます。

背景: 放射状グラデーション(300px 300px at 112px 0, #eee 75%, #333 75%);

細かい点

1. 放射状グラデーションのぼかし距離が 0 の場合、円形の境界線に明らかなギザギザのエッジが表示されます。ぼかし距離を 1 ピクセル増やすと、ギザギザのエッジをなくすことができます。 （これが伝説のアンチエイリアシング？）
2. Android 4.4.4 は放射状グラデーションと互換性がありません。

線形グラデーションの凹型長方形

前のセクションでは、凹四角形を実装しました。では、凹四角形に線形グラデーションを設定するにはどうすればよいでしょうか。背景は既に使用されています。放射状グラデーションと線形グラデーションの両方を設定することはできません。

画像を切り取る効果を得るには、 mask-imageを使用します。以下は MDN からの例です。

MDN の例では、5 つの尖った星の SVG を使用して、緑色の背景に緑色の 5 つの尖った星を切り取ります。グラデーションの凹型長方形を実現するには、凹型長方形の形状を使用して線形グラデーションの背景を切り取ります。

mask-imageを使用して形状とbackgroundを設定し、線形グラデーションを設定します。

.xxx {
  背景: 線形グラデーション(115度, #ff66ff, #4db8ff);
  マスク画像: 放射状グラデーション(300px 300px at 112px 0, rgba(255, 255, 255, 0) 75%, #333 75%);
}

効果：

細かい点

マスクイメージは、モバイルデバイス上で放射状グラデーションよりも互換性が高く、Android 4.4.4 でサポートされています。

グラデーション背景色の変化

背景画像自体はトランジションアニメーションをサポートしていませんが、いくつかの高度な操作によって実現できます。Zhang Xinxu 先生の記事で詳しく説明されています。

https://www.zhangxinxu.com/wordpress/2020/08/background-image-animation/

https://www.zhangxinxu.com/wordpress/2018/03/background-gradient-transtion/

背景画像はトランジションアニメーションをサポートしていませんが、不透明度はサポートしています。前の線形グラデーション凹型四角形に別の疑似要素を追加し、疑似要素の背景色を別の線形グラデーション色に設定してから、疑似要素の不透明度を制御して、線形グラデーションのトランジション効果を実現します。

これで、CSS 線形グラデーション凹型長方形トランジション効果の実装に関するこの記事は終了です。より関連性の高い CSS 線形グラデーション凹型長方形トランジション コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。