エントリーの編集
エントリーの編集は全ユーザーに共通の機能です。
必ずガイドラインを一読の上ご利用ください。
Clip Pathで画像内の任意の箇所にスポットライトを当てる
記事へのコメント0件
- 注目コメント
- 新着コメント
このエントリーにコメントしてみましょう。
注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています
- バナー広告なし
- ミュート機能あり
- ダークモード搭載
関連記事
Clip Pathで画像内の任意の箇所にスポットライトを当てる
Result CSSで任意の箇所にスポットライトを当てる、というもの やってる事は一番下のレイヤーに画像、2... Result CSSで任意の箇所にスポットライトを当てる、というもの やってる事は一番下のレイヤーに画像、2つ目のレイヤーに透過オーバーレイ、 3つ目のレイヤーに1つ目の画像と同じ画像を用意し、円状にくり抜いて重ねる、という感じです css.img-wrapper {/*親*/ display: grid; max-width: 600px; margin: 20px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.8); } .img {/*1つ目のレイヤー*/ width: 100%; grid-area: 1 / 1; } .img--highlight {/*3つ目でくり抜き*/ clip-path: circle(100px at 55% 65%); } .img-layer {/*2つ目のレイヤーの透過オーバーレイ*/ backgrou