Webやアプリのデザイントレンドを紹介。たまに雑談。

Browse By

[GENERATOR] Web 2.0 Badges – Web2.0っぽいバッジのジェネレータ

  • Pocket
  • このエントリーをはてなブックマークに追加

Web2.0っぽいバッジのジェネレーター。よくサイト右上や左上にある“Beta”みたいなアレをサクっと作れます。永遠にβ版っていうのがなぜかかっこイイ、そんな風潮にどんどん乗っかっていこうという趣旨のサイトにはもってこいですね。まず右側にズラっと並んでるベースデザインを選んで、その後中に書くテキストやフォントの種類・大きさ・色をチョイスして“Apply”ボタンを押せば適用されます。出力された画像は右クリックしたりして保存しましょう。ただしマックのSafari環境ではうまく反映・出力がされませんでした。なぜか下までスクロールして戻ると適用されてたりして、ちょっとコツがいります。これでPNGフォーマットだったら良かったんだけどな。

またこうして作った画像を、サイトの右上に横幅可変で表示したい場合は、イメージにclass指定して、CSSで以下のように記述すればオッケー。

.class名 {
position:absolute;
top: 0;
right: 0;
}

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください