長い間透過 PNG の処理が、単純に文字だけの場合にのみ使えるというようなおまけの処理でしたが、いろいろと対応しました。
透過時の透過部分表示
透過の効果を明確にする為に、画像の親要素の DIV の背景に灰色のチェックのパターンを表示しています。
透過時にドロップシャドウ
いままでドロップシャドウは、内部で作成した背景をぼかして使用していました。もちろん、背景透過でなければなにも問題は無いのですが、文字だけをぼかしてそのまた後ろに背景を作成する事ができないので、背景透過の場合は文字側で、透過度の違う黒文字をずらして重ねた影を使ってドロップシャドウを使えるようにしました。
この文字でのドロップシャドウは斜めに少しづつ透過度の違う文字を重ねて使用しているので、ぼかした場合よりもシャープになります。ですが、全く無いよりもはるかに見栄えがするようになります。
また、現時点では影の濃さは一種類ですので、Shadow チェックボックスの左端のみに反応するようになっています。
透過時に背景画像とドロップシャドウ
今まで、背景画像を使ってドロップシャドウを使用した場合は背景画像もぼけてしまいました。
しかし今回の更新で、背景画像を使ってドロップシャドウも使いたい場合は、透過PNG 処理を行えば目的を達成する事ができるようになりました。
そして、このサンプルでは、全面に画像を使用していますが、透過 PNG を背景画像にしてその PNG の透過部分を有効にする事もできます。
背景画像にふきだし画像を追加
もっと多くのふきだし画像を追加する予定ですが、もともとこのふきだしの中に文字を入れるという事が目的での整備でした。このような処理を、DUAL・横・縦・はんこ(はんこにはドロップシャドウはありません)で可能になっています。
▼ DUAL
▼ 横
▼ 縦
▼ はんこ
書体見本ページ
フリーフォントのライセンス情報
posted by
at 2017-12-16 22:54
|
フリーフォントで簡単ロゴ作成
|
|
