建立CSS3警示框漸變更畫

時間 2019-12-01

標籤建立 css3 css 警示漸變欄目 CSS 简体版

原文原文鏈接

來源：GBin1.comjavascript

現代的網頁設計技術已經容許開發人員在大多數瀏覽器中快速實現所支持的動畫，其中消息警示是很是廣泛的。因爲默認的JavaScript警示框每每設計不佳和過於侵入式，這致使開發人員想到找出一個更友好的用戶界面解決方案。在本教程中，我會解釋如何能夠將CSS3警示框放在頁面主體的頂部，而後，用戶能夠經過點擊讓警示框消失，最終從DOM中刪除。做爲一個有趣的附加功能，我還提供了按鈕，在這裏你能夠點擊到頁面頂部追加新的警示框。查看如下示例演示，進一步瞭解咱們的設計概念。html

在線演示——下載源代碼前端

建立頁面

首先咱們須要命名「index.html」和「style.css」兩個文件夾，我引用了由谷歌代碼內容分發網絡承載的最新jQuery庫。HTML至關簡單，由於咱們只須要建立一些虛擬文本警示框。全部的JavaScript已添加到頁面底部，以減小HTTP請求。java

<!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文檔類型。並不難理解，由於咱們只是構建一個示例演示。對於警示窗口，設置了兩種不一樣的風格——成功和錯誤。固然還有其餘的設計風格，但我沒有建立備用樣式，我想更專一於效果。jquery

<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 of flat elements和 UI部分，我能夠用勾號和X錯誤按鈕來縮放和調整這些圖標矢量形狀。若是你須要一個警告/信息類的圖標，它應該能夠自定義顏色和風格。經常使用的類.notify被添加到每一個消息框中，將產生框架陰影效果和內部字體樣式。其餘的類好比.successbox和.errorbox則容許咱們改變警示框的色彩和細節。在個人演示中你能見到頁面加載兩個現有的警示消息，每一個底部的按鈕做用是追加新的警示框。css3

CSS消息框風格web

我建立了一批默認的排版，在內部使用#content集中包裝元素。這將容許jQuery在頁面頂部追加新的警示元素。ajax

/** 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);
}

網站佈局要保持簡單，這樣效果才明顯。熟悉前端Web開發的人都應該可以將這些類移植到本身的樣式表中，我使用的風格特徵是扁平按鈕生成新的警示框。一樣，我已經更新了.notify類內部每一個元素的風格。windows

/** 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%的不透明度，而後把（）元素從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能更詳細的解釋這個概念。個人腳本其餘部分能檢查到用戶是否點擊了頁面底部任何一個按鈕，這些按鈕運用IDs #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()而後選擇content div，最終新的警示框就能出如今頁面的最頂部。全部新的警示框也能夠用一樣的方式刪除，這是由於它們的HTML代碼是徹底相同的靜態HTML硬編碼。

在線演示——下載源代碼

via 極客標籤

來源：建立CSS3警示框漸變更畫