Alerts.css

CSS

シンプルでピュアなCSSによるアラート実装「Alerts.css」

Alerts.cssはシンプルでピュアなCSSを使ったアラートを実装できるのが特徴です。さりげないフェードアニメーションによるシンプルなアラートがとても素敵ですね。

Alerts.css

デモ

デモには「Normal alerts」と「Fixed alerts」の2タイプが用意されています。それぞれのリンク先から実際のデモ動作を見ることが可能です。Normal alertsではページを読み込んだ際にアラートが表示され、Fixed alertsではボタンをクリックすることでアラートが表示されます。

Fiexd alertsのボタンには、Top Left、Top Right、Bottom Left、Bottom Rightという4つのボタンが用意されており、ボタンによってアラートの表示される位置が異なります。

どちらのデモもアラートは下から上へスライドしながらフェードアニメーションで表示するようになっています。

デザインもクリーンな印象で、インパクトが強めのものではなく、さりげなく表示できるアラートを実装したいという人にはピッタリです。

Alerts.css

関連記事

  1. CSS

    CSS3でフォントサイズを指定する単位は「rem」がとても便利

    CSS3から新しく出来たフォントサイズ指定の単位「rem」がとても便利…

  2. (cs)spinner

    CSS

    CSSだけでミニマルなローディングアニメーションを実装できる「(cs)spinner」

    CSSだけでローディングアニメーションを実装できる「(cs)spinn…

  3. CSS

    CSSだけを使ったストライプ(斜め・水平・垂直など)の作り方

    CSSだけを使ったストライプの作り方「Stripes in CSS」が…

  4. CSS

    よく見かけるblockquoteの左上と右下にダブルクォートつけるやつをCSSだけで作ってみる

    blockquoteのデザインって色んなパターンがあって面白いですよね…

  5. CSSで文字の長さに合わせる

    CSS

    CSSで文字の長さにwidthを合わせてbacgroundやborderを表示させるやり方

    CSSでブロック要素のwidthを文字の長さに合わせるやり方をご紹介し…

  6. littlebox

    CSS

    CSSだけで作られたシンプルで可愛いアイコンセット「littlebox」

    littleboxは画像を用いずにCSSだけで作られたシンプルなアイコ…

最近の記事

  1. EH-NA0B
  2. KPS-88
  3. Happy Plugs AIR1
  4. cheero Stream 10000mAh
  5. BOSE HOME SPEAKER 300

アーカイブ

PAGE TOP