CSS3 フェード効果とアニメーション効果を巧みに使用してメッセージ リマインダーを作成する box_html/css_WEB-ITnose

最新の Web デザイン テクノロジを使用すると、開発者はほとんどのブラウザでサポートされるアニメーションを迅速に実装できます。デフォルトの JavaScript アラート ボックスのスタイルは (独自のデザインの美しいスタイルと比較して) 多くの場合、非常に一貫性がなく、扱いにくいため、警告メッセージは非常に一般的だと思います。これにより、開発者は、よりユーザーフレンドリーなインターフェイスを実現するにはどのソリューションが適しているかを判断することになります。

このチュートリアルでは、Web ページの上部に表示されるいくつかの CSS3 通知ボックスをまとめる方法を説明したいと思います。ユーザーはこれらの通知ボックスをクリックしてフェードアウトさせ、最終的には DOM から削除できます。楽しい追加機能として、クリックして新しいアラート ボックスをページの上部に追加できるボタンも追加しました。私のサンプルデモをダウンロードしてチェックして、これから何をするのかをよりよく理解してください。

実践的なデモンストレーション – ソース コードをダウンロード

ページを構築

まず、Google CDN から最新の jQuery ライブラリを呼び出して、「index.html」と「style.css」という名前の 2 つのファイルを作成する必要があります。アラート ボックスにテキストを追加するだけで済むため、すべての JavaScript コードがページの下部に追加されるため、HTTP リクエストの時間が節約されます。

6

7

8

9

10

< lt;

< -equiv = "Content-Type" content = "text/html;charset=utf-8" > < title >CSS3 通知ボックスのデモ < href = " http://designshack.net/favicon.ico" > リンク rel = "icon" href = " http://designshack.net/favicon.ico" > = "スタイルシート" タイプ = "text/css" メディア = "all" href = "style.css" > スクリプト タイプ = "text/javascript" src = " https://ajax.googleapis .com /ajax/libs/jquery/1.9.1/jquery.min.js" >

headコードは外部呼び出しファイルとHTML5ドキュメント仕様を設定します単純な例を作成しているだけなので、それほど複雑ではありません。プロンプト ウィンドウには、成功とエラーの 2 つの異なるスタイルを定義しました。警告ボックスやメッセージ ボックスなど、その他のスタイルも定義しました。

1

2

3

4

5

6

7

8

9

10 11

12

13

14

15

16

17

18

19

20

21

22

23

< div id = "コンテンツ" >

<ソース http://dribbble.com/shots/913555-Flat-Web-Elements -->

< div class = "notify successbox" >

成功!

<スパンクラス = "アラートコン" >< img src = "images/check.png" alt = "チェックマーク" />

メッセージありがとうございます。私たちは電子メールを頻繁にチェックし、お問い合わせにできる限りお答えするよう努めます。

< div クラス = "エラーボックスに通知" >

警告!

<スパンクラス = "アラートコン" >< img src = "images/error.png" alt = "エラー" />

返信用メールアドレスが正しく設定されていません。フィールドに記入してフォームを送信してください。

< p >エラー ボックスをクリックすると、フェード効果が表示されて消えます。

< p >jQuery を介して動的 HTML をページに追加して、さらに追加します。さらに、通知は非常に簡単にカスタマイズできます。

< div クラス = "btns クリアフィックス" >

< a href = "#" id = "newSuccessBox" class = " flatbtn" >新しいサクセスボックス

每个图标文件来自免费的PSD和UI作品。 これらの画像は、適切なサイズに調整されています。警告/情報画像が必要な場合は、独自に変更することができます。 この種類名 .notify がメッセージ DIV に追加されました。 DIV の阴影と文字の種類を決定します。 私たちの監視サイトに 2 つの警告メッセージが追加されているのを確認できます。 各トップ面の下部のボタンポイントに、上下方向に新しいアラートポートを追加できます。このようにして、jQuery がトップ面の最上部に新しい警告要素の子領域を追加するように構築されました。 3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

/**タイポグラフィ **/

h 1 {

font-family : 'Helvetica Neue' 、 Helvetica 、 Arial 、もし ;

フォントサイズ : 2.5em ;

行の高さ : 1.5em ;

文字間隔 : -0.05em ;

margin-bottom : 20px ;

パディング: 。 1em 0 ;

カラー: #444 ;

位置 : 相対的;

オーバーフロー : 非表示 ;

ホワイトスペース : nowrap ;

text-align : 中央;

}

h 1: 前、

h 1: 後 {

content : "" ;

位置 : 相対的;

表示 : インラインブロック ;

幅 : 50% ;

高さ: 1px ;

垂直配置 : 中央 ;

背景 : #f0f0f0 ;

}

h 1: 前 {

左 : -。 5em;

マージン : 0 0 0 -50% ;

}

h 1: {

左 : の後。 5em;

マージン : 0 -50% 0 0 ;

}

h 1 >スパン {

表示 : インラインブロック ;

垂直配置 : 中央 ;

ホワイトスペース : 通常 ;

}

p {

表示 : ブロック ;

フォントサイズ : 1.35em ;

行の高さ : 1.5em ;

margin-bottom : 22px ;

}

/**ページ構造 **/

#w {

表示 : ブロック ;

幅 : 750px ;

マージン : 0 自動 ;

パディングトップ : 30px ;

}

#content {

表示 : ブロック ;

幅 : 100% ;

背景 : #fff ;

パディング: 25px 20px ;

パディングボトム : 35px ;

-webkit-box-shadow: rgba( 0 , 0 , 0 , 0.1 ) 0px 1px 2px 0px ;

-moz-box-shadow: rgba( 0 , 0 , 0 , 0.1 ) 0px 1px 2px 0px ;

box-shadow: rgba( 0 , 0 , 0 , 0.1 ) 0px 1px 2px 0px ;

}

. flatbtn {

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

ボックスサイズ: ボーダーボックス;

表示 : インラインブロック ;

概要 : 0 ;

境界線 : 0 ;

カラー: #f9f8ed ;

テキスト装飾 : なし ;

背景色 : #b6a742 ;

境界線の色 : rgba( 0 , 0 , 0 , 0.1 ) rgba( 0 , 0 , 0 , 0.1 ) rgba( 0 , 0 , 0 , 0.25 );

フォントサイズ : 1.2em ;

font-weight : 太字;

パディング: 12px 22px 12px 22px ;

行の高さ : 通常 ;

text-align : 中央;

垂直配置 : 中央 ;

カーソル : ポインタ ;

text-transform : 大文字 ;

text-shadow : 0 1px 0 rgba( 0 , 0 , 0 , 0.3 );

-webkit-border-radius: 3px ;

-moz-border-radius: 3px ;

ボーダー半径: 3px ;

-webkit-box-shadow: 0 1px 0 rgba( 15 , 15 , 15 , 0.3 );

-moz-box-shadow: 0 1px 0 rgba( 15 , 15 , 15 , 0.3 );

box-shadow: 0 1px 0 rgba( 15 , 15 , 15 , 0.3 );

}

. flatbtn:hover {

色 : #fff ;

背景色 : #c4b237 ;

. flatbtn:active {

-webkit-box-shadow: inset 0 1px 5px rgba( 0 , 0 , 0 , 0.1 );

-moz-box-shadow: インセット 0 1px 5px rgba( 0 , 0 , 0 , 0.1 );

box-shadow: インセット 0 1px 5px rgba( 0 , 0 , 0 , 0.1 );

Web ページのレイアウトをより目を引くものにするのは非常に簡単です。フロントエンド Web 開発に精通している人であれば、これを独自のスタイルシートに移植できるはずです。このフラット ボタンで特別なテンプレートを使用し、新しいアラート ウィンドウを生成しました。同様に、各 .notify クラス要素の内部スタイルを更新しました。

1 2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

/**通知 **/

.通知 {

ディスプレイ: ブロック;

パディング: 12px 18px;

マージン: 0 自動;ウェブキット-ボーダー-半径: 3px;

-moz-border-radius: 3px;

margin-bottom: 20px;

ボックスシャドウ: rgba(0, 0, 0, 0.3) 0px ;

}

.notify h 1 { margin-bottom : 6px ; }

.successbox h 1 { color : #678361 }

.errorbox h 1 { color : #6f423b ;

.successbox h 1: 前、.successbox h 1: 後 { 背景 : #cad8a9 ; }

.errorbox h 1: 前、 .errorbox h 1: 後 { 背景 : #d6b8b7 }

。 Notify.alerticon {

Display: Block;

Text-Align: Center;

Margin-Bottom;

}}

このレイアウト例では、いくつかのデフォルトの仮定を設定しました。すべてのメッセージ通知ウィンドウは幅 400 ピクセルに制限され、margin: 0 auto を使用してページの中央に配置されます。また、要素がクリック可能であることがユーザーにわかるように、マウス アイコンを指ポインターに更新しました。ユーザーによるキャンセル通知ウィンドウのクリックを取得し、対応する関数を実行するには、jQuery イベント リスナーを作成する必要があります。

jQuery アニメーション

私の JS コードは実際に 2 つの異なる操作を実行します。まず、#content DIV 内に含まれる既存の .notify 要素を検出します。ユーザーが .notify ボックス要素をクリックしたら、通知ボックスを 0% の透明度 (表示: なし) にフェードしてから、DOM から要素を Remove() する必要があります。

1

2

3

4

5

6

$( function (){

$( '#content' ) .on( 'クリック' , '.notify' , Function () {

$ (this).Fadeout (350, function () {

$ (this) .remove (); // fMove from discom }}); jQuery に慣れている方は、最初はこのセレクターについて少し奇妙に感じるかもしれません。#content div を選択していませんが、jQuery の .on( を見ると、このコンテンツ コンテナー内の .notify 通知ボックスを探しています。 . ) メソッドのドキュメントを参照すると、2 番目のパラメーターとして別のセレクターを渡すことができます。このセレクターは、ページがレンダリングされた後に更新されます。この概念について詳しく説明した素晴らしい投稿があります

。このスクリプトでは、ユーザーがページの下部にある 2 つのボタンのいずれかをクリックするとチェックします。これらの 2 つのボタンの ID は、ユーザーがクリックするたびに、HREF 値の読み込みを停止します。新しい HTML ブロックを作成し、ページの先頭に追加します

8

9 10

// 追加のウィンドウを処理します

$( '#newSuccessBox' ).on( 'click' , function (e ){

e.preventDefault();

var samplehtml = $( '< div class="notify successbox">

成功!

正しい返信用電子メール アドレスを設定していないため、フィールドに入力して送信してください。フォーム.

).prependTo( '#content ' ).on( 'click' ,

e.preventDefault();

var samplehtml = $( '

警告!

フィールドに入力してフォームを送信してください。 ;/p>

' ).prependTo(

})

}); 各関数には、アラートボックスに使用するHTML。この HTML コンテンツは文字列に保存され、jQuery セレクターを使用してオブジェクトに変換されます。 prependTo() メソッドを使用してこのコンテンツ DIV を選択し、ページの上部に新しいアラート ボックスを表示できます。 HTML コードは静的 HTML でハードコーディングされたボックスとまったく同じであるため、すべての新しいボックスも同じ方法で閉じることができます。