SVGクリッピングマスクにチャレンジ！静止画像も動画も、SVGで切り抜こう！

SVGクリッピングマスクにチャレンジ！静止画像も動画も、SVGで切り抜こう！Webクリエイターボックスでちょこちょこ取り上げてきたSVG。今回は第四弾！SVGを使ったクリッピングマスクを紹介します。今までは画像に透過PNGを重ねてマスクを表現できましたが、高解像度ディスプレイに対応させたり、マスク自体に効果をつけるならSVGが便利かなーと思います。サムネイル画像にフレームをつけたり、デザインのアクセントとして使えるので、ぜひマスターしてくださいね！ SVG のクリッピングマスク基礎1. 画像を用意それではさっそく試してみましょう！まずは切り抜かれる画像を用意し、img タグで表示します。この時画像に mask というクラスを与えておきます。 <img class="mask" src="images/rose.jpg" alt="Rose" /> 2. マスクの型を用意Illustrato

[vlxst1224]

水玉コラとかに使うなよ！絶対だぞ！

[kenjiro_n]

水玉コラージュを連想して自分も心の汚れた大人だというのを再認識したのはさておき、久々にはてブマンを見かけた。

[haniworks]

“ -webkit-clip-path: url(#svgPath); clip-path: url(#svgPath);”

[mzkzzz]

IE9なんかね…もう相手にしちゃだめなんだなぁ…マスクしたいなぁ…

[UDONCHAN]

有用情報

[takuman8]

SVG色々と面白そう

[kiyo560808]

動画もできるとか、すごい。

[uunfo]

SVGパス

[richard_raw]

なるほど、こういうことも出来るんですね。（小並感）

[mobojp]

これは勉強になる。楽しそうだし覚えとこ。

[naosim]

SVG最強！ミルなんとかもこれでWeb化できるんじゃね？

[hatebuman]

(・B!・)

[solidstatesociety]

manaちゃんが罠はってる

[shibuyads]

おっさん // SVGクリッピングマスクにチャレンジ！静止画像も動画も、SVGで切り抜こう！ | Webクリエイターボックス

[BRITAN]

ほほう

[C_L]

裸に見える画像ジェネレーター

[yosi0422jp]

おおーこのアイディアは良いなあ＞　SVGクリッピングマスクにチャレンジ！静止画像も動画も、SVGで切り抜こう！ | Webクリエイターボックス

[qrac_jp]

おおお！！SVGのパスでマスクできるのか。

[hedeyoshi]

マスクかけられるんだすごい。