[フレーム]
はてなブックマークアプリ

サクサク読めて、
アプリ限定の機能も多数!

アプリで開く

気に入った記事をブックマーク

  • 気に入った記事を保存できます
    保存した記事の一覧は、はてなブックマークで確認・編集ができます
  • 記事を読んだ感想やメモを書き残せます
  • 非公開でブックマークすることもできます
適切な情報に変更

エントリーの編集

loading...

エントリーの編集は全ユーザーに共通の機能です。
必ずガイドラインを一読の上ご利用ください。

タイトルガイドライン

このページのオーナーなので以下のアクションを実行できます

タイトル、本文などの情報を
再取得することができます
コメントを非表示にできます コメント表示の設定

ブックマークしました

ここにツイート内容が記載されます https://b.hatena.ne.jp/URLはspanで囲んでください

Twitterで共有

ONにすると、次回以降このダイアログを飛ばしてTwitterに遷移します

232users がブックマーク コメント 19

ガイドラインをご確認の上、良識あるコメントにご協力ください

0 / 0
入力したタグを追加

現在プライベートモードです 設定を変更する

おすすめタグタグについて

よく使うタグ

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

ガイドラインをご確認の上、良識あるコメントにご協力ください

0 / 0
入力したタグを追加

現在プライベートモードです 設定を変更する

おすすめタグタグについて

よく使うタグ

はてなブックマーク

はてなブックマークで
関心をシェアしよう

みんなの興味と感想が集まることで
新しい発見や、深堀りがもっと楽しく

ユーザー登録

アカウントをお持ちの方はログインページへ

記事へのコメント19件

  • 注目コメント
  • 新着コメント
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化できるんじゃね?

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

2014年10月08日 リンク

その他
hatebuman
(・B!・)

その他
solidstatesociety
manaちゃんが罠はってる

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

その他
vlxst1224
vlxst1224 水玉コラとかに使うなよ!絶対だぞ!

2014年10月08日 リンク

その他
BRITAN
ほほう

その他
C_L
裸に見える画像ジェネレーター

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

その他
qrac_jp
おおお!!SVGのパスでマスクできるのか。

その他
hedeyoshi
マスクかけられるんだすごい。

その他

注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています

リンクを埋め込む

以下のコードをコピーしてサイトに埋め込むことができます

プレビュー
アプリのスクリーンショット
いまの話題をアプリでチェック!
  • バナー広告なし
  • ミュート機能あり
  • ダークモード搭載
アプリをダウンロード

関連記事

usersに達しました!

さんが1番目にブックマークした記事「SVGクリッピングマ...」が注目されています。

気持ちをシェアしよう

ツイートする

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

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

ブックマークしたユーザー

  • axcelbkm2024年04月30日 axcelbkm
  • sky_20072021年08月23日 sky_2007
  • satoshiiiiii2019年07月10日 satoshiiiiii
  • kjtec2019年06月06日 kjtec
  • mizuumi172018年08月26日 mizuumi17
  • k_ume752018年04月04日 k_ume75
  • hirokikodama2018年02月19日 hirokikodama
  • asagi_c2017年11月10日 asagi_c
  • moomoo122017年11月02日 moomoo12
  • saqurai01182017年09月11日 saqurai0118
  • putchom2017年07月15日 putchom
  • tomotan_uki2017年05月13日 tomotan_uki
  • f503kk2017年01月12日 f503kk
  • hachiame2017年01月06日 hachiame
  • haniworks2016年11月17日 haniworks
  • hatekats2016年09月17日 hatekats
  • aircutterminator2016年09月14日 aircutterminator
  • sadakoa2016年06月15日 sadakoa
すべてのユーザーの
詳細を表示します

ブックマークしたすべてのユーザー

同じサイトの新着

同じサイトの新着をもっと読む

いま人気の記事

いま人気の記事をもっと読む

いま人気の記事 - テクノロジー

いま人気の記事 - テクノロジーをもっと読む

新着記事 - テクノロジー

新着記事 - テクノロジーをもっと読む

同時期にブックマークされた記事

いま人気の記事 - 企業メディア

企業メディアをもっと読む

はてなブックマーク

公式Twitter

はてなのサービス

Copyright © 2005-2025 Hatena. All Rights Reserved.
設定を変更しましたx

AltStyle によって変換されたページ (->オリジナル) /