使用 CSS3 的褪色和動畫效果構建訊息提醒框

oschina發表於2013-06-13
CSSS3動畫

　　現代Web設計技術允許開發者快速實現大多數瀏覽器支援的動畫。我想警告訊息是很常見的，因為預設的JavaScript警告框的樣式往往（與你自己設計的漂亮樣式）很不協調很囧。這使開發者步入找出哪種解決方案能更好地實現更友好的使用者介面的道路。

　　在這個教程中我想解釋一下我們如何能把幾個將要出現在網頁上方的CSS3通知框放在一起。使用者可以點選這些通知框使它們逐漸淡出消失，最終將他們從DOM中移除。作為一個有趣的附加功能，我還包括了一個按鈕，你可以點選它來新增一個新的警告框到頁面頂部。你可以下載檢視一下我的示例演示，以對我們將做的事情有一個更好的瞭解。

實際演示 – 下載原始碼

　建立頁面

　　首先, 我們需要建立兩個檔案命名為“index.html” 和 “style.css”. 我將從Google CDN上呼叫最新的jQuery 庫. HTML是非常簡單的,因為我們只需要在警告框里加入一些文字. 所有的JavaScript程式碼被加在了頁面的底部,這樣可以節省HTTP請求時間.

<!doctype html>
<html lang="en-US">
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
  <title>CSS3 Notification Boxes Demo</title>
  <link rel="shortcut icon" href="http://designshack.net/favicon.ico">
  <link rel="icon" href="http://designshack.net/favicon.ico">
  <link rel="stylesheet" type="text/css" media="all" href="style.css">
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>

　　頭部程式碼設定了外部呼叫檔案和 HTML5文件規範 . 不是很複雜因為我們只是建立一個簡單的示例. 對於提示視窗我定義兩個不同的樣式 – 成功的和錯誤的. 還有一些其它風格的例如警告框和資訊框, 但是我沒有建立更多的,因為我更關注的是效果.

<div id="content">
  <!-- Icons source http://dribbble.com/shots/913555-Flat-Web-Elements -->
  <div class="notify successbox">
    <h1>Success!</h1>
    <span class="alerticon"><img src="images/check.png" alt="checkmark" /></span>
    <p>Thanks so much for your message. We check e-mail frequently and will try our best to respond to your inquiry.</p>
  </div>
  
  <div class="notify errorbox">
    <h1>Warning!</h1>
    <span class="alerticon"><img src="images/error.png" alt="error" /></span>
    <p>You did not set the proper return e-mail address. Please fill out the fields and then submit the form.</p>
  </div>
  
  <p>Click the error boxes to dismiss with a fading effect.</p>
  
  <p>Add more by appending dynamic HTML into the page via jQuery. Plus the notifications are super easy to customize.</p>
  
  <div class="btns clearfix">
    <a href="#" id="newSuccessBox" class="flatbtn">New Success Box</a>
    <a href="#" id="newAlertBox" class="flatbtn">New Alert Box</a>
  </div>
</div><!-- @end #content -->

　　每個圖示檔案來自 免費的PSD 和UI作品. 這些圖示被我調整為適當的大小.如何你需要警告/資訊圖示你可以變變顏色建立成你自己的. 這個類名 .notify 被新增到每一個訊息DIV上. 它定義了DIV的陰影和字型型別.

　　其它的類例如 .successbox 和 .errorbox 充許我們改變顏色和alert視窗裡的細節. 你可以看到在我的測試頁里載入了兩個alert視窗. 每個頁面底部的按鈕點選後可以在頁上下方追加一個新的alert視窗.

　CSS 盒子樣式

　　我不會將太多 CSS 重置的細節，那些在我之前的教程中很明瞭了。我建立了一個預設的排版，並將內建 #content 的div居中。這樣建立了一個允許jQuery在頁面最上面新增新警告元素的盒子區域。

/** typography **/
h1 {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 2.5em;
  line-height: 1.5em;
  letter-spacing: -0.05em;
  margin-bottom: 20px;
  padding: .1em 0;
  color: #444;
	position: relative;
	overflow: hidden;
	white-space: nowrap;
	text-align: center;
}
h1:before,
h1:after {
  content: "";
  position: relative;
  display: inline-block;
  width: 50%;
  height: 1px;
  vertical-align: middle;
  background: #f0f0f0;
}
h1:before {    
  left: -.5em;
  margin: 0 0 0 -50%;
}
h1:after {    
  left: .5em;
  margin: 0 -50% 0 0;
}
h1 > span {
  display: inline-block;
  vertical-align: middle;
  white-space: normal;
}

p {
  display: block;
  font-size: 1.35em;
  line-height: 1.5em;
  margin-bottom: 22px;
}


/** page structure **/
#w {
  display: block;
  width: 750px;
  margin: 0 auto;
  padding-top: 30px;
}

#content {
  display: block;
  width: 100%;
  background: #fff;
  padding: 25px 20px;
  padding-bottom: 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;
  box-sizing: border-box;
  display: inline-block;
  outline: 0;
  border: 0;
  color: #f9f8ed;
  text-decoration: none;
  background-color: #b6a742;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  font-size: 1.2em;
  font-weight: bold;
  padding: 12px 22px 12px 22px;
  line-height: normal;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(0,0,0,0.3);
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 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 {
  color: #fff;
  background-color: #c4b237;
}
.flatbtn:active {
  -webkit-box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.1);
  -moz-box-shadow:inset 0 1px 5px rgba(0, 0, 0, 0.1);
  box-shadow:inset 0 1px 5px rgba(0, 0, 0, 0.1);
}

讓效果更醒目的網頁佈局非常簡單。任何熟悉前端網頁開發的人都應該能夠將其移植到自己的樣式表中。我在這個扁平按鈕中使用了特殊的樣好似，並生成新的警告視窗。同樣的，我更新了每個 .notify類元素的內部樣式。

/** notifications **/
.notify {
  display: block;
  background: #fff;
  padding: 12px 18px;
  max-width: 400px;
  margin: 0 auto;
  cursor: pointer;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  margin-bottom: 20px;
  box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 2px 0px;
}

.notify h1 { margin-bottom: 6px; }

.successbox h1 { color: #678361; }
.errorbox h1 { color: #6f423b; }

.successbox h1:before, .successbox h1:after { background: #cad8a9; }
.errorbox h1:before, .errorbox h1:after { background: #d6b8b7; }

.notify .alerticon { 
  display: block;
  text-align: center;
  margin-bottom: 10px;
}

　　我設定了一些在我的佈局示例中執行良好的預設假設。所有訊息通知視窗都被限定為 400px 寬，並通過使用 margin: 0 auto 在頁面中居中。同時，我更新了滑鼠圖示為手指指標，這樣使用者就知道該元素可點選。我們需要建立一個 jQuery 事件監聽器以用於獲取使用者對取消通知視窗的點選，並執行相應函式。

　jQuery動畫

　　我的JS程式碼實際執行了兩個不同的操作。我們首先檢測包含在#content DIV中的任何現有.notify元素。一旦使用者點選這個.notify框元素，我們需要淡出這個通知盒到透明度為0%（display: none），然後從DOM中移除()此元素。

$(function(){
  $('#content').on('click', '.notify', function(){
    $(this).fadeOut(350, function(){
      $(this).remove(); // after fadeout remove from DOM
    });
  });

　　如果你熟悉jQuery，可能首先對這個選擇器感到有些奇怪。我們並不是選擇#content這個div，而是在尋找這個內容容器裡面的任何.notify通知框。如果你檢視一下jQuery的 .on() 方法文件，你會注意到我們可以傳遞另外一個選擇器來作為第二個引數，它將在頁面被渲染後更新。 這是一個Stack Overflow裡出色的帖子，它非常詳細地解釋了這個概念。

　　我的指令碼的另一部分將會檢查使用者何時點選了頁面下方的兩個按鈕之一。這兩個按鈕的ID是#newSuccessBox 和 #newAlertBox。無論使用者何時點選，我們會停止載入HREF值的預設行為，代之以建立一個新的HTML塊並前置在頁面上。

  // handle the additional windows
  $('#newSuccessBox').on('click', function(e){
    e.preventDefault();
    var samplehtml = $('<div class="notify successbox"> <h1>Success!</h1> <span class="alerticon"><img src="images/check.png" alt="checkmark" /></span> <p>You did not set the proper return e-mail address. Please fill out the fields and then submit the form.</p> </div>').prependTo('#content');
  });
  $('#newAlertBox').on('click', function(e){
    e.preventDefault();
    var samplehtml = $('<div class="notify errorbox"> <h1>Warning!</h1> <span class="alerticon"><img src="images/error.png" alt="error" /></span> <p>You did not set the proper return e-mail address. Please fill out the fields and then submit the form.</p> </div>').prependTo('#content');
  });
});

　　每個函式都有它自己的變數，來包含一個我用於警告框的HTML的複製/貼上映象。這個HTML內容儲存在一個字串中用jQuery選擇器轉化為一個物件。我可以使用prependTo()方法選擇這個內容DIV使新的警告框出現在頁面的最上方。所有新的盒子也可以同樣的方式被解除，因為它們的HTML程式碼和用靜態HTML硬編碼的盒子完全相同。

css3 notification alert windows messages jquery tutorial

實際演示 – 下載原始碼

　　英文原文：Building CSS3 Notification Boxes With Fade Animations

相關文章