画像を矩形以外の形状で表示したい人のためのチュートリアル

画像にPNGマスクを使用して、ブラシストローク状、サークル状など、矩形とは異なる形状で表示するチュートリアルを紹介します。 デモページ もう一つのサークル状のデモは、下記ページのギャラリーのサムネイルとして使用されています。 Roundfolio 画像の枚数が少ないのであれば個別に画像を作成してもよいかもしれませんが、このデモのように数多くあると、このテクニックを使用した方がより効率よく実装できます。 [ad#ad-2] 画像の作り方 画像は3種類が必要で、全て同じサイズにします。 ロールオーバー用の画像 ※透過PNG画像 マスク用の画像 ※透過PNG画像 ベースとなる画像 サークル状に使用する画像3種類 制作：HTML, CSS, JavaScript HTML ロールオーバーとマスク用に2つの空span要素を使用します。 <a href="images/gallery-full.jpg

[kkeisuke]

PNGマスク

[warriorking]

画像を矩形以外の形状で表示したい人のためのチュートリアル | コリス

[gotack]

ブラシでこすった風のサムネイルや丸いサムネイルなど

[tsuki-rs]

おぉ！このテクニックイイね！！

[kadokurarara]

丸いサムネイルとか使いどころたくさん。

[ku_marin]

pngでマスク処理

[Donca]

✔ 画像を矩形以外の形状で表示したい人のためのチュートリアル