Javascript Facebook 风格的“红色”通知最简单的 css
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5747863/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Easiest css for Facebook style "red" notifications
提问by ming yeow
I need a facebook style notification, but getting something that looks nice cross browser seems tricky. For example, different browsers seem to treat paddings differently, resulting in weird looking notifications.
我需要一个 facebook 风格的通知，但获得一些看起来不错的跨浏览器似乎很棘手。例如，不同的浏览器似乎以不同的方式处理填充，从而导致看起来很奇怪的通知。
What is the best cross-browser way of ensuring the notifications show up nicely? Not adverse to using javascript, but pure css is of course preferable
确保通知显示良好的最佳跨浏览器方式是什么？不反对使用javascript，但纯css当然更可取
回答by Titus
The best way to achieve this is by using absolute positioning:
实现这一目标的最佳方法是使用绝对定位：
/* Create the blue navigation bar */
.navbar {
background-color: #3b5998;
font-size: 22px;
padding: 5px 10px;
}
/* Define what 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="https://maxcdn.bootstrapcdn.com/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>回答by Rahil Sondhi
Here's one that includes animation for when the count changes.
这是一个包括计数变化时的动画。
http://jsfiddle.net/rahilsondhi/FdmHf/4/
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 with jQuery:
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);
});
It uses Font Awesome for the globe icon and jQuery Transit for the animation.
它使用 Font Awesome 作为地球图标，使用 jQuery Transit 作为动画。
回答by Dustin Laine
Probably absolutepositioning:
大概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>
Something like that. Obviously you would want to change the specifics and probably use background images. The point is to emphasis the absolute positioning which it really consistent across browsers, at least in my experiences.
类似的东西。显然，您希望更改细节并可能使用背景图像。重点是强调它在浏览器中真正一致的绝对定位，至少在我的经验中是这样。
回答by neebz
Markup:
标记：
<div id="ContainerDiv">
<div id="MainImageDiv"> //Add the image here or whatever you want </div>
<div id="NotificationDiv"> </div>
</div>
Css:
css：
#NotificationDiv {
position: absolute;
left: -10 //use negative values to push it above the #MainImageDiv
top: -4
...
}
回答by nektobit
I am sure that the answers about absolute positioning are correct. For the sake of experiment, I tried to make an SVG-only solution. The result is far from ideal, maybe someone knows a more elegant solution to a similar svg puzzle? :)
我确信关于绝对定位的答案是正确的。为了实验，我尝试制作一个仅限 SVG 的解决方案。结果远非理想，也许有人知道类似 svg 难题的更优雅的解决方案？:)
http://jsfiddle.net/gLdsco5p/3/
http://jsfiddle.net/gLdsco5p/3/
<svg width="64" height="64" viewBox="0 0 91 91">
<rect id="Artboard1" x="0" y="0" width="90.326" height="90.326" style="fill:none;"/>
<g id="Artboard11" serif:id="Artboard1">
<g id="user-circle-o" transform="matrix(2.69327,0,0,2.69327,7.45723,7.45723)">
<path d="M14,0C21.734,0 28,6.266 28,14C28,21.688 21.766,28 14,28C6.25,28 0,21.703 0,14C0,6.266 6.266,0 14,0ZM23.672,21.109C25.125,19.109 26,16.656 26,14C26,7.391 20.609,2 14,2C7.391,2 2,7.391 2,14C2,16.656 2.875,19.109 4.328,21.109C4.89,18.312 6.25,16 9.109,16C10.375,17.234 12.093,18 14,18C15.907,18 17.625,17.234 18.891,16C21.75,16 23.11,18.312 23.672,21.109ZM20,11C20,7.687 17.312,5 14,5C10.688,5 8,7.688 8,11C8,14.312 10.688,17 14,17C17.312,17 20,14.312 20,11Z" style="fill:rgb(190,190,190);fill-rule:nonzero;"/>
</g>
<g transform="matrix(1,0,0,1,1.36156,0)">
<circle cx="63.708" cy="18.994" r="9.549" style="fill:rgb(255,0,0);"/>
</g>
<g transform="matrix(1.66713,0,0,1.66713,-51.5278,-2.33264)">
<text id="counter" x="68.034px" y="15.637px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:7.915px;fill:white;">1</text>
</g>
</g>
</svg>
