最简单的Facebook风格的“红色”通知的CSS
我需要一个Facebook风格的通知，但得到一些看起来不错的跨浏览器似乎棘手。 例如，不同的浏览器似乎不同的处理填充，导致看起来很奇怪的通知。
什么是确保通知很好地显示的最佳的跨浏览器方式？ 不使用javascript，但纯CSS是当然可取的
实现这个最好的方法是使用绝对定位 ：
/* Create the blue navigation bar */ .navbar { background-color: #3b5998; font-size: 22px; padding: 5px 10px; } /* Define how each icon button should look like */ .button { color: white; display: inline-block; /* Inline elements with width and height. TL;DR they make the icon buttons stack from left-to-right instead of top-to-bottom */ position: relative; /* All 'absolute'ly positioned elements are relative to this one */ padding: 2px 5px; /* Add some padding so it looks nice */ } /* Make the badge float in the top right corner of the button */ .button__badge { background-color: #fa3e3e; border-radius: 2px; color: white; padding: 1px 3px; font-size: 10px; position: absolute; /* Position the badge within the relatively positioned button */ top: 0; right: 0; } <!-- Font Awesome is a great free icon font. --> <link href="font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/> <div class="navbar"> <div class="button"> <i class="fa fa-globe"></i> <span class="button__badge">2</span> </div> <div class="button"> <i class="fa fa-comments"></i> <span class="button__badge">4</span> </div> </div>
这里有一个包括计数改变时的animation。
http://jsfiddle.net/rahilsondhi/FdmHf/4/
<ul> <li class="notification-container"> <i class="icon-globe"></i> <span class="notification-counter">1</span> </li>
.notification-container { position: relative; width: 16px; height: 16px; top: 15px; left: 15px; i { color: #fff; } } .notification-counter { position: absolute; top: -2px; left: 12px; background-color: rgba(212, 19, 13, 1); color: #fff; border-radius: 3px; padding: 1px 3px; font: 8px Verdana; } $counter .css({opacity: 0}) .text(val) .css({top: '-10px'}) .transition({top: '-2px', opacity: 1})
animation与jQuery：
$('button').click(function() { var $counter = $('.notification-counter') var val = parseInt $counter.text(); val++; $counter.css({opacity: 0}).text(val).css({top:'-10px'}).animate({top: '-1px', opacity: 1}, 500); });
它使用Font Awesome作为地球图标和jQuery Transit作为animation。
可能absolute定位：
<div id="globe" style="height: 30px; width: 30px; position: relative;"> <img src="/globe.gif" /> <div id="notification" style="position: absolute; top: 0; right;0;">1</div> </div>
就是这样 显然你会想改变细节，并可能使用背景图像。 关键是要强调它在浏览器中真正一致的绝对定位，至less在我的经验中是如此。
/* Create the blue navigation bar */ .navbar { background-color: #3b5998; font-size: 22px; padding: 5px 10px; } /* Define how each icon button should look like */ .button { color: white; display: inline-block; /* Inline elements with width and height. TL;DR they make the icon buttons stack from left-to-right instead of top-to-bottom */ position: relative; /* All 'absolute'ly positioned elements are relative to this one */ padding: 2px 5px; /* Add some padding so it looks nice */ } /* Make the badge float in the top right corner of the button */ .button__badge { background-color: #fa3e3e; border-radius: 2px; color: white; padding: 1px 3px; font-size: 10px; position: absolute; /* Position the badge within the relatively positioned button */ top: 0; right: 0; }
<!-- Font Awesome is a great free icon font. --> <link href="font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/> <div class="navbar"> <div class="button"> <i class="fa fa-globe"></i> <span class="button__badge">2</span> </div> <div class="button"> <i class="fa fa-comments"></i> <span class="button__badge">4</span> </div> </div>
标记：
<div id="ContainerDiv"> <div id="MainImageDiv"> //Add the image here or whatever you want </div> <div id="NotificationDiv"> </div> </div>
CSS：
#NotificationDiv { position: absolute; left: -10 //use negative values to push it above the #MainImageDiv top: -4 ... }
首先，我们将创build一个包含通知的一些脸书图标的导航栏。 Facebook风格的导航栏
此外，通知栏中的通知将被看到。 然后我们将使用CSS，在通知图标上放置一个计数器，并使用display:none;来隐藏通知栏display:none; 。
在这里检查演示： http : //hackbino.ml/facebook-style-popup-notifications-using-html-css-jquery/
代码（通知栏出现在点击，看演示）
*{margin: 0px; font-family: sans-serif; font-size: 15px;} body{ background:#3B5998; } a{ text-decoration: none; color:inherit; } .navContainer{ width:auto; margin:auto; padding:10px; } ul{ width:145px; height:45px; position: relative; margin: auto; } li{ margin: 0; padding: 0; list-style: none; position: absolute; top: 50px; height: 25px; display: block; } #requests,#messages,#notifications{ width:25px; } #requests{ left: 0px; background: url('http://www.binolabs.ml/facebook-style-popup-notification-using-html-css-jquery-hackbinohttp://img.dovov.comfacebook-icons.png') 0 -77px; } #messages{ left:80px; background: url('http://www.binolabs.ml/facebook-style-popup-notification-using-html-css-jquery-hackbinohttp://img.dovov.comfacebook-icons2.png') 0 -65px; } #notifications{ left: 160px; background: url('http://www.binolabs.ml/facebook-style-popup-notification-using-html-css-jquery-hackbinohttp://img.dovov.comfacebook-icons.png') 0 -150px; } #counter{ background-color: #fa3e3e; border-radius: 2px; color: #fff; padding: 1px 3px; font-size: 10px; position: absolute; top:-5px; right:-5px; } #requests:hover{ background: url('http://www.binolabs.ml/facebook-style-popup-notification-using-html-css-jquery-hackbinohttp://img.dovov.comfacebook-icons.png') 0 -100px; } #messages:hover{ background: url('http://www.binolabs.ml/facebook-style-popup-notification-using-html-css-jquery-hackbinohttp://img.dovov.comfacebook-icons2.png') 0 -88px; } #notifications:hover{ } #notification_bar{ display: none; width: 250px; height: 300px; background: #fff; position: absolute; left: -190px; top: 40px; border-radius: 5px; } #arrowUp { position: absolute; top: -8px; right: 40px; width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 8px solid white; } #notification_bar_header{ position: absolute; width: 250px; border-bottom: 1px solid #e2e2e2; top: 0px; padding-top:5px; padding-bottom:5px; border-radius:5px 5px 0px 0px; color: #333; } #notification_bar_footer{ position: absolute; width: 250px; border-top: 1px solid #e2e2e2; bottom: 0px; padding-top:5px; padding-bottom:5px; border-radius:0px 0px 5px 5px; text-align: center; color: #333; background: #e9eaed; }
<!DOCTYPE html> <html> <head> <title>Facebook Like Notifications | HackBino</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="navContainer"> <ul> <li id="requests"></li> <li id="messages"></li> <li id="notifications"> <span id="counter">10</span> <div id="notification_bar"> <div id="arrowUp"></div> <div id="notification_bar_header"><p> Notifications</p></div> <div id="notification_bar_footer"><a href="#">See All</a></div> </div> </li> </ul> </div> </body> </html>
