ウェブサービスに使えるメッセージボックスのCSSスタイル4種

SPONSORED LINK

Pocket

以前「ウェブサービスのアラートメッセージなんかに使える小粋なCSSスタイルまとめ」を紹介しましたが、それに絡めて続編メモということで。

CSS Message Boxes for different message types」なる記事です。ウェブサービスで必要そうな次の4つのメッセージボックスに関するCSSのマークアップを紹介しています。

  • 情報メッセージ
  • msg_info.gif

  • 成功メッセージ
  • msg_success.gif

  • 警告メッセージ
  • msg_warn.gif

  • エラーメッセージ
  • msg_error.gif

実際のマークアップは以下のようになりますね。これにスタイルをつけていくだけです(詳細は元記事参照)。

<div class="info">Info message</div>
<div class="success">Successful operation message</div>
<div class="warning">Warning message</div>
<div class="error">Error message</div>

jQueryとあわせてぼやーんと消したりするとそれっぽいアプリ(謎)になりますね。開発のお供にいかがでしょうか。コーディングの詳細は元記事をご覧ください。

» CSS Message Boxes for different message types

ツイッターもやっています!

SPONSORED LINK

  1. No comments yet.

  1. No trackbacks yet.