创建CSS3警示框渐变动画
来源:GBin1.com
现代的网页设计技术已经允许开发人员在大多数浏览器中快速实现所支持的动画,其中消息警示是非常普遍的。由于默认的JavaScript警示框往往设计不佳和过于侵入式,这导致开发人员想到找出一个更友好的用户界面解决方案。在本教程中,我会解释如何可以将CSS3警示框放在页面主体的顶部,然后, 用户可以通过点击让警示框消失,最终从DOM中删除。作为一个有趣的附加功能,我还提供了按钮,在这里你可以点击到页面顶部追加新的警示框。查看以下示例 演示,进一步了解我们的设计概念。
创建页面
首先我们需要命名“index.html”和“style.css”两个文件夹,我引用了由谷歌代码内容分发网络承载的最新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="data: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="data: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则允许我们改变警示 框的色彩和细节。在我的演示中你能见到页面加载两个现有的警示消息,每个底部的按钮作用是追加新的警示框。
CSS消息框风格
我创建了一批默认的排版,在内部使用#content集中包装元素。这将允许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);
}
网站布局要保持简单,这样效果才明显。熟悉前端Web开发的人都应该能够将这些类移植到自己的样式表中,我使用的风格特征是扁平按钮生成新的警示框。同样,我已经更新了.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%的不透明度,然后把()元素从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="data: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="data: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警示框渐变动画的更多相关文章
- 巧妙使用 CSS3 的褪色和动画效果制作消息提醒框
现代Web设计技术允许开发者快速实现大多数浏览器支持的动画.我想警告消息是很常见的,因为默认的JavaScript警告框的样式往往(与你自己设计的漂亮样式)很不协调很囧.这使开发者步入找出哪种解决方案 ...
- Magic CSS3 – 创建各种神奇的交互动画效果
Magic CSS3 Animations 动画是一个独特的 CSS3 动画特效包,你可以自由地使用您的 Web 项目中.只需简单的在页面上引入 CSS 样式: magic.css 或者压缩版本 ma ...
- 16款创建CSS3动画的jQuery插件
jQuery插件是用来扩展jQuery原型对象的方法. 本文搜集了用来为你的站点创建CSS3动画的一些jQuery插件. 1. jQuery Smoove Smoove 简化了CSS3转换效果.使得页 ...
- CSS3 文字渐变动画
背景剪裁 语法:background-clip: border-box || padding-box || context-box || no-clip || text 本次用到的就是: -webki ...
- CSS3全览_动画+滤镜
CSS3全览_动画+滤镜 目录 CSS3全览_动画+滤镜 1. 列表和生成的内容 2. 变形 3. 过渡 4. 动画 5. 滤镜, 混合, 裁剪和遮罩 6. 针对特定媒体的样式 作者: https:/ ...
- css3中变形与动画(三)
transform可以实现矩阵变换,transition实现属性的平滑过渡,animation意思是动画,动漫,这个属性才和真正意义的一帧一帧的动画相关.本文就介绍animation属性. anima ...
- 【转】如何建立一个样式新颖的CSS3搜索框
在线演示 搜索框大概是web开发中最常用的UI元素之一,我想基本没有必要去介绍如何使用它.无论是网站还是web应用,都会为了增强用户体验而添加它,那么你是不是也想过设计一个别致的搜索框? 在今天的文章 ...
- [CSS3] 学习笔记-CSS动画特效
在CSS3中,出现了很多出彩的效果,例如2D.3D以及过度.动画和多列等.这些效果为页面设计添加了很多的可选设计. 1.2D.3D转换 转换,是使元素改变尺寸.形状.位置的一种效果:通过CSS3转换, ...
- 纯CSS3实现打火机火焰动画
HTML5已经越来越流行起来了,尤其是移动互联网的发展,更是带动了HTML5的迅猛发展,我们也是时候学习HTML5了,以防到时候落伍.今天给大家介绍10款效果惊艳的HTML5应用,方便大家学习,也将应 ...
随机推荐
- 生成自签名CA+SSL证书
1.创建CA证书配置CA.cnf文件 [ req ] distinguished_name = req_distinguished_name x509_extensions = root_ca [ r ...
- Linux用户密码文件/etc/shadow相关
(1).密码文件 [root@xuexi ~]# head -3 /etc/shadow root:$6$kcgcu794R0VP3fDL$aYN8XUbtWvZ4QQtT2xVW.N2CgE3YLP ...
- 【JavaScript】JS将Java的Timestamp转为Date类型
遇到一个小需求,由于要填充日期插件里的数据,前台要把java后台传来的Date类型的数据转成YYYY-MM-DD格式的时间数据.通过json传输,Java的Date类型的数据自动转成了时间戳,例如 “ ...
- hdu 4747 Mex( 线段树? 不,区间处理就行(dp?))
Mex Time Limit: 15000/5000 MS (Java/Others) Memory Limit: 65535/65535 K (Java/Others)Total Submis ...
- 【计算几何】【分类讨论】Gym - 101243I - Land Division
题意:给你一个n个点的凸包,让你切一刀,使得它变成一个m边形和一个K边形,问你切的这一刀最短是多少. 如果m+K==n+4,那么一定切在两条边上,但是由于两个线段间的最短距离,至少会经过一条线段的一个 ...
- 【线段树(单点修改,区间求和)】HDU1166 - 敌军布阵
hdu1166 敌兵布阵,单点修改,区间求和. [ATTENTION]MAXN要开成节点数的4倍,开得不够会提示TLE. #include<iostream> #include<cs ...
- memcache注意点
Memcached存储单个item最大数据是在1MB内,如果数据超过1M,存取set和get是都是返回false,而且引起性能的问题. 我们之前对排行榜的数据进行缓存,由于排行榜在我们所有sql se ...
- Codeforces Beta Round #1 C. Ancient Berland Circus 计算几何
C. Ancient Berland Circus 题目连接: http://www.codeforces.com/contest/1/problem/C Description Nowadays a ...
- WPF Interaction框架简介(一)——Behavior
在WPF 4.0中,引入了一个比较实用的库——Interactions,这个库主要是通过附加属性来对UI控件注入一些新的功能,除了内置了一系列比较好用的功能外,还提供了比较良好的扩展接口.本文这里简单 ...
- ASP.NET Core管道深度剖析
ASP.NET管道 以IIS 6.0为例,在工作进程w3wp.exe中,利用Aspnet_ispai.dll加载.NET运行时(如果.NET运行时尚未加载).IIS 6引入了应用程序池的概念,一个工作 ...