ハート型写真を作る

自在な形に縁どる

star

ビスケットなど丸や星の形に縁どった菓子がありますが、ハート型に象った写真を飾りたいと思うときがあります。

いくつものフィルターが用意されたアプリケーションが公開されていますが、自在な形に縁どる写真を、手作りにて3行のhtmlコードで実現しています。

写真とフィルターを用意する

girl1今回はハート型に切り取る方法ですが、切り取る型をここではフィルターと呼びますが、この閉じられた図形を変更すれば、もっと複雑な形にも応用可能です。

用意する材料は、かたどる写真と型(フィルター)です。その他に、ちょっとしたHTMLの初歩的な知識が必要です。

①原写真、キュートな女性の写真をお借りしました。フィルター内にチャームポイントが収まるような絵柄が良いでしょう。

②フィルターとなる型の画像を作ります。閉じた図形(今回はハート型)をheart1含む画像を作るため、paint.netなどの画像作成アプリを用意します。写真に切り抜く部分を透明色に、背景色を白に指定します。

透明色にするには、paint.netを起動し、「魔法の杖」で透明にしたい部分をクリックして、[編集→切り取り]と選択します。

切り取りは「閉じられた形」でないとうまくいきません。8のような形ならば、上下にわたり2回操作します。

背景色は一般には白になっています。白でない場合は、[選択範囲の塗りつぶし]で変更します。

htmlで重ね書きする

原写真を先に表示し、2枚目のフィルター画像を重ね書きします。フィルター効果により透明色部分のみ浮彫になります。img要素のopacity属性により、透明度を設定し、背景をうっすら表示する表現も可能です。

おまけとして、キャプションを付けてみました。重ね書きにはposition: relativeとposition: absoluteを使っています。

<p><span style="font-size: 18pt;">表示例</span></p>
<span style="font-size: 20px; color: violet;">ハート型写真</span>
<div style="position: relative; width: 638; height: 520;"><img src="http://aidesign.lolipop.jp/wp-content/uploads/2016/10/girl.png" alt="lady" width="638" height="520" /><br />
<img style="position: absolute; top: 0px; left: 0px;" src="http://aidesign.lolipop.jp/wp-content/uploads/2016/10/alpha.png" alt="alpha" width="638" height="520" /> <span style="font-size: 24px; color: lightblue; position: absolute; top: 40px; left: 45px; width: 150px;">婉然、麗しい</span> <span style="font-size: 24px; color: pink; position: absolute; top: 40px; left: 400px; width: 150px;">可憐、雅びな</span></div>

表示例

ハート型写真
lady
alpha 婉然、麗しい 可憐、雅びな

コメントを残す

下記項目は必須ですがメールアドレスは公開されません。名前はニックネームをお使いください。

CAPTCHA