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

no-imageレスポンシブ対応のシンプルなLightboxプラグイン前のページ

続きを読むボタンを実装できる「ReadMorePlugin」次のページno-image

関連記事

  1. CSS Only Fab Icon Menu

    CSS

    CSSで実装できるコンパクトで可愛いメニュー「CSS Only Fab Icon Menu」

    CSS Only Fab Icon MenuはCSSによるコンパクトで…

  2. CSS

    CSSの:beforeと:afterを使ってちょっとした装飾をつけてみる

    CSSの:beforeと:afterを使ってちょっとした装飾をつけるこ…

  3. nth-child()とnth-last-child()

    CSS

    CSSのnth-child()とnth-last-child()の使い方をまとめてみる

    毎回使おうとする度に記憶が曖昧になっちゃってるんでここにまとめておこう…

  4. CSS

    CSS3でシンプルで簡単なボタンを作ってみる

    CSS3を使って簡単なボタンを作ってみました。画像を使わなくてもCSS…

  5. CSS

    リストを横並びにした際に簡単に均等にすることができるdisplay:table-cellを使ってみる…

    リストを横並びにした際にli要素の幅を簡単に均等にすることができるdi…

  6. CSS

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

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

最近の記事

  1. Anker Bolder LC30
  2. BG-R10
  3. EOS R6

アーカイブ

PAGE TOP