透過の効果を明確にする為に、画像の親要素の DIV の背景に灰色のチェックのパターンを表示しています。
透過時にドロップシャドウ
いままでドロップシャドウは、内部で作成した背景をぼかして使用していました。もちろん、背景透過でなければなにも問題は無いのですが、文字だけをぼかしてそのまた後ろに背景を作成する事ができないので、背景透過の場合は文字側で、透過度の違う黒文字をずらして重ねた影を使ってドロップシャドウを使えるようにしました。
この文字でのドロップシャドウは斜めに少しづつ透過度の違う文字を重ねて使用しているので、ぼかした場合よりもシャープになります。ですが、全く無いよりもはるかに見栄えがするようになります。
また、現時点では影の濃さは一種類ですので、Shadow チェックボックスの左端のみに反応するようになっています。
透過時に背景画像とドロップシャドウ
今まで、背景画像を使ってドロップシャドウを使用した場合は背景画像もぼけてしまいました。
しかし今回の更新で、背景画像を使ってドロップシャドウも使いたい場合は、透過PNG 処理を行えば目的を達成する事ができるようになりました。
そして、このサンプルでは、全面に画像を使用していますが、透過 PNG を背景画像にしてその PNG の透過部分を有効にする事もできます。
背景画像にふきだし画像を追加
もっと多くのふきだし画像を追加する予定ですが、もともとこのふきだしの中に文字を入れるという事が目的での整備でした。このような処理を、DUAL・横・縦・はんこ(はんこにはドロップシャドウはありません)で可能になっています。
▼ DUAL
▼ 横
▼ 縦
▼ はんこ
]]>
今回、主に背景に設定しやすい 最大サイズ 800 x 400 の画像を 12 枚用意しました。『通常画像(背面チェックボックスを ON)』の欄にある画像は、選択すると『画像を背面で表示する』チェックボックスが ON になります。( URL の w=780 の部分を変更すると幅を指定できますが、800 以内の表示状態であれば、自動的に幅は設定されます )
この機能で作成したサンプルは以下のようになります。(ランダムで表示されたものをフォントサイズ調整して縦幅調整したものです)
一度選択した地域は、localStorage に保存するので、次回からは選択した地域が最初が表示されています。
URL だけ解っていても、リンクとして存在しないと右クリックしてダウンロードできない場合、これを使用するとその場でリンクを作成します。また、同時にその URL を使用した HTML もコピーして利用できるようにします。
では、JPG の場合、ぱくたそのこの画像で 37.82k です。
この画像は、オリジナルで 5760×3840 ですが、Google の Picasa で URL 縮小して 600px で表示しています。それに対してリアルタイムで『フリーフォントで簡単ロゴ作成』で加工したのがこれ。
