ゲーミフィケーションを考える際、作業を行った報酬としてバッジを提供することが有ります。 例えばfoursquareやロケタッチなどの大きなサービスでは、全てのバッジを個別の画像で作成してますが、個人で作るような小さなWebサービスでは、なかなか個別の画像を用意することは出来ません。 そこで、今回はcssだけを使用して見栄えのするバッジを作ってみます。 また、デザインの分野に不慣れな人でも簡単に作ることが出来るよう、今回は作成の過程も紹介します。 今回は例として、”よくできました”の文字を装飾していくことにします。 まずは装飾無し。普通の文字です。 ソース <a&g…