ゲーミフィケーションでよく使われるバッジをcssだけで作成する
ゲーミフィケーションを考える際、作業を行った報酬としてバッジを提供することが有ります。 例えばfoursquareやロケタッチなどの大きなサービスでは、全てのバッジを個別の画像で作成してますが、個人で作るような小さなWebサービスでは、なかなか個別の画像を用意することは出来ません。 そこで、今回はcssだけを使用して見栄えのするバッジを作ってみます。 また、デザインの分野に不慣れな人でも簡単に作ることが出来るよう、今回は作成の過程も紹介します。 今回は例として、”よくできました”の文字を装飾していくことにします。 まずは装飾無し。普通の文字です。 ソース <a&g…
続きを読む
[jQuery]iframeを動的に追加して,googlemapを表示させる
2012年2月2日
(カテゴリ: JavaScript:jquery)
htmlの中でjQueryを使用して動的にiframeをappendするサンプルです。 例では、入力された住所を元にgooglemapを表示しています。 ソース: <input type="text" id="txtAddress" value="東京都千代田区丸の内一丁目" size="30" /> <input type="button" id="btnTest" value="iframe追加"/> <div style…
続きを読む