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チュートリアルまとめ

    CSS

    CSS初心者のための役立つ75のチュートリアルまとめ

    とても便利で役立つチュートリアル集「75 CSS Tutorial f…

  2. Animated Transition Effects
  3. CSSグラデーションジェネレーター「Gradientoo」

    CSS

    直感的な操作感!CSSグラデーションを作成できるジェネレーター「Gradientoo」

    CSSのグラデーションを作成できる素敵なジェネレーター「Gradien…

  4. CSS

    ulのリストを横並びにしてtext-alignを適用させる方法

    ちょっと悩んじゃいました。ulのli要素を横並びにしてそれにtext-…

  5. Epic Spinners

    CSS

    CSSによる素敵なスピナーコレクション「Epic Spinners」

    Epic SpinnersはCSSで作成された素敵なスピナーコレクショ…

  6. CSSでテキストを縦にするやり方

    CSS

    CSSでテキストを縦の位置にするやり方

    ちょっと便利そうだったのでメモがてらご紹介。CSSでテキストを縦の位置…

最近の記事

  1. JOK-350 WH
  2. 1460 COLLAR ウォータープルーフ 8ホールブーツ
  3. スターバックス ハウスブレンド

アーカイブ

PAGE TOP