CSSでペルソナ5風 hoverエフェクト を作ってみた
この記事は最終更新日から3年以上が経過しています。
概要
z-index: auto; を理解する
_概要_medium.com
作りたかったもの
こんなやつ
できたもの
コード
雑な解説
- clip-path で作った図形を２つ重ね合わせることで実現している。
- clip-path 使うと Stacking context が発生して子要素との重ね合わせが大変になるので、before / after の擬似要素に clip-path を適用している
- 青の五角形と赤の平行四辺形を重ねて、
mix-blend-mode: color-dodge;で重なった部分を白にしている - 通常だと after/子要素/before/親要素 の順に重なるが、文字が入ってる子要素を一番上に重ねたかったのでz-indexで順番を入れ替えて子要素が一番上に来るようにしている
CSSでペルソナ5風 hoverエフェクト を作ってみた