һ
 ¼ע

QQ¼

ֻһٿʼ

̳ WEBҳǰ뿪 ǰ̨ű

ʹ CSS3 ɫͶЧϢѿ

[]
13533 happy175 2013-6-12 18:54:04
| ʾȫ¥
1F

ϵ½עᣬύѣø๦ܣϴزIJޣ

Ҫ ¼ ſػ鿴ûʺţ¼ע  

x


ִWeb߿ʵִֵ֧Ķ뾯ϢǺܳģΪĬϵJavaScriptʽԼƵƯʽܲЭ܇塣ʹ߲ҳֽܸõʵָѺõûĵ·
̳һܰѼҪҳϷCSS3֪ͨһûԵЩ֪ͨʹ𽥵ʧսǴDOMƳΪһȤĸӹܣһһťԵһµľҳ涥ز鿴һҵʾʾԶǽһõ˽⡣

ʵʾ C Դ

ҳ
, ҪļΪindex.html style.css. ҽGoogle CDNϵµjQuery . HTMLǷdz򵥵,ΪֻҪھһЩı. еJavaScript뱻ҳĵײ,ԽʡHTTPʱ.
  1. <!doctype html>
  2. <html lang="en-US">
  3. <head>
  4.   <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
  5.   <title>CSS3 Notification Boxes Demo</title>
  6.   <link rel="shortcut icon" href="http://designshack.net/favicon.ico">
  7.   <link rel="icon" href="http://designshack.net/favicon.ico">
  8.   <link rel="stylesheet" type="text/css" media="all" href="style.css">
  9.   <script type="text/javascript" src="httPS://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  10. </head>
ƴ
ͷⲿļ HTML5ĵ淶 . ǺܸΪֻǽһ򵥵ʾ. ʾҶͬʽ C ɹĺʹ. һЩ羯Ϣ, ûд,ΪҸעЧ.
  1. <div id="content">
  2.   <!-- Icons source http://dribbble.com/shots/913555-Flat-Web-Elements -->
  3.   <div class="notify successbox">
  4.     <h1>Success!</h1>
  5.     <span class="alerticon"><img src="images/check.png" alt="checkmark" /></span>
  6.     <p>Thanks so much for your message. We check e-mail frequently and will try our best to respond to your inquiry.</p>
  7.   </div>
  8.   
  9.   <div class="notify errorbox">
  10.     <h1>Warning!</h1>
  11.     <span class="alerticon"><img src="images/error.png" alt="error" /></span>
  12.     <p>You did not set the proper return e-mail address. Please fill out the fields and then submit the form.</p>
  13.   </div>
  14.   
  15.   <p>Click the error boxes to dismiss with a fading effect.</p>
  16.   
  17.   <p>Add more by appending dynamic HTML into the page via jQuery. Plus the notifications are super easy to customize.</p>
  18.   
  19.   <div class="btns clearfix">
  20.     <a href="#" id="newSuccessBox" class="flatbtn">New Success Box</a>
  21.     <a href="#" id="newAlertBox" class="flatbtn">New Alert Box</a>
  22.   </div>
  23. </div><!-- [url=home.php?mod=space&uid=2722]@end[/url] #content -->
ƴ
ÿͼļ ѵPSD UIƷ. Щͼ걻ҵΪʵĴС.Ҫ/ϢͼԱɫԼ. .notify ӵÿһϢDIV. DIVӰ.
.successbox .errorbox Ǹıɫalertϸ. ԿҵIJҳalert. ÿҳײİťҳ·׷һµalert.
Դ΢http://weibo.com/techued Դ΢Źںţweb-tech
ʹõ ٱ ظ
 ¥| happy175 2013-6-12 18:56:10
| ʾȫ¥
2F
CSS ʽ  ҲὫ̫ CSS õϸڣЩ֮ǰĽ̳кˡҴһĬϵŰ棬 #content divСһjQueryҳ¾Ԫصĺ
  1. <p>/** typography **/
  2. h1 {
  3.   font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  4.   font-size: 2.5em;
  5.   line-height: 1.5em;
  6.   letter-spacing: -0.05em;
  7.   margin-bottom: 20px;
  8.   padding: .1em 0;
  9.   color: #444;
  10. position: relative;
  11. overflow: hidden;
  12. white-space: nowrap;
  13. text-align: center;
  14. }
  15. h1:before,
  16. h1:after {
  17.   content: "";
  18.   position: relative;
  19.   display: inline-block;
  20.   width: 50%;
  21.   height: 1px;
  22.   vertical-align: middle;
  23.   background: #f0f0f0;
  24. }
  25. h1:before {   
  26.   left: -.5em;
  27.   margin: 0 0 0 -50%;
  28. }
  29. h1:after {   
  30.   left: .5em;
  31.   margin: 0 -50% 0 0;
  32. }
  33. h1 > span {
  34.   display: inline-block;
  35.   vertical-align: middle;
  36.   white-space: normal;
  37. }</p><p>p {
  38.   display: block;
  39.   font-size: 1.35em;
  40.   line-height: 1.5em;
  41.   margin-bottom: 22px;
  42. }</p><p>
  43. /** page structure **/
  44. #w {
  45.   display: block;
  46.   width: 750px;
  47.   margin: 0 auto;
  48.   padding-top: 30px;
  49. }</p><p>#content {
  50.   display: block;
  51.   width: 100%;
  52.   background: #fff;
  53.   padding: 25px 20px;
  54.   padding-bottom: 35px;
  55.   -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
  56.   -moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
  57.   box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
  58. }</p><p>.flatbtn {
  59.   -webkit-box-sizing: border-box;
  60.   -moz-box-sizing: border-box;
  61.   box-sizing: border-box;
  62.   display: inline-block;
  63.   outline: 0;
  64.   border: 0;
  65.   color: #f9f8ed;
  66.   text-decoration: none;
  67.   background-color: #b6a742;
  68.   border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  69.   font-size: 1.2em;
  70.   font-weight: bold;
  71.   padding: 12px 22px 12px 22px;
  72.   line-height: normal;
  73.   text-align: center;
  74.   vertical-align: middle;
  75.   cursor: pointer;
  76.   text-transform: uppercase;
  77.   text-shadow: 0 1px 0 rgba(0,0,0,0.3);
  78.   -webkit-border-radius: 3px;
  79.   -moz-border-radius: 3px;
  80.   border-radius: 3px;
  81.   -webkit-box-shadow: 0 1px 0 rgba(15, 15, 15, 0.3);
  82.   -moz-box-shadow: 0 1px 0 rgba(15, 15, 15, 0.3);
  83.   box-shadow: 0 1px 0 rgba(15, 15, 15, 0.3);
  84. }
  85. .flatbtn:hover {
  86.   color: #fff;
  87.   background-color: #c4b237;
  88. }
  89. .flatbtn:active {
  90.   -webkit-box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.1);
  91.   -moz-box-shadow:inset 0 1px 5px rgba(0, 0, 0, 0.1);
  92.   box-shadow:inset 0 1px 5px rgba(0, 0, 0, 0.1);
  93. }
  94. </p>
ƴ
ЧĿҳַdz򵥡κϤǰҳ˶ӦֲܹԼʽСƽťʹƣµľ洰ڡͬģҸÿ .notifyԪصڲʽ
  1. /** notifications **/
  2. .notify {
  3.   display: block;
  4.   background: #fff;
  5.   padding: 12px 18px;
  6.   max-width: 400px;
  7.   margin: 0 auto;
  8.   cursor: pointer;
  9.   -webkit-border-radius: 3px;
  10.   -moz-border-radius: 3px;
  11.   border-radius: 3px;
  12.   margin-bottom: 20px;
  13.   box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 2px 0px;
  14. }

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

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

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

  20. .notify .alerticon {
  21.   display: block;
  22.   text-align: center;
  23.   margin-bottom: 10px;
  24. }
ƴ
һЩҵIJʾõĬϼ衣Ϣ֪ͨڶ޶Ϊ 400px ͨʹ margin: 0 auto ҳоСͬʱҸͼΪָָ룬û֪ԪؿɵҪһ jQuery ¼ڻȡûȡ֪ͨڵĵӦ

Դ΢http://weibo.com/techued Դ΢Źںţweb-tech
ʹõ ٱ ظ ֧
 ¥| happy175 2013-6-12 18:59:54
| ʾȫ¥
3F

RE:jQuery- ʹ CSS3 ɫͶЧϢѿ

jQuery
ҵJSʵִͬIJȼ#content DIVеκ.notifyԪءһû.notifyԪأҪ֪ͨе͸Ϊ0%display: noneȻDOMƳ()Ԫء
  1. <p>$(function(){
  2.   $('#content').on('click', '.notify', function(){
  3.     $(this).fadeOut(350, function(){
  4.       $(this).remove(); // after fadeout remove from DOM
  5.     });
  6.   });
  7. </p>
ƴ
ϤjQueryȶѡеЩ֡Dzѡ#contentdivѰκ.notify֪ͨ鿴һjQuery .on() ĵע⵽ǿԴһѡΪڶҳ汻Ⱦ¡ һStack Overflowɫdzϸؽ

ҵĽűһֽûʱҳ·ť֮һťID#newSuccessBox #newAlertBoxûʱǻֹͣHREFֵĬΪ֮ԴһµHTML鲢ǰҳϡ
  1. <p>  // handle the additional windows
  2.   $('#newSuccessBox').on('click', function(e){
  3.     e.preventDefault();
  4.     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');
  5.   });
  6.   $('#newAlertBox').on('click', function(e){
  7.     e.preventDefault();
  8.     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');
  9.   });
  10. });
  11. </p>
ƴ
ÿԼıһھHTMLĸ/ճHTMLݴ洢һַjQueryѡתΪһҿʹprependTo()ѡDIVʹµľҳϷµĺҲͬķʽΪǵHTMLþ̬HTMLӲĺȫͬ
ʵʾ C Դ
Դ΢http://weibo.com/techued Դ΢Źںţweb-tech
ʹõ ٱ ظ ֧
 ¥| happy175 2013-6-12 19:00:51
| ʾȫ¥
4F
Դ΢http://weibo.com/techued Դ΢Źںţweb-tech
ʹõ ٱ ظ ֧
б

ֹ

̳¡ͼƬѷϴվԭתԻ,µİȨԭ
վַİȨ֪ͨǵĹԱ,Ա(Email:admin@websjy.com)ʱȡȨɾ
ܾκκʽڱ̳л񹲺͹ִ!

QQ| 42011102000510|Archiver|ֻ|Դ ( ICP14013341-1

GMT+8, 2019-8-25 08:19

Powered by Discuz! X3.2

ԴԴվ  ԴAPPӦ֮

ٻظ ض б