最简单的CSS风格的"红色"通知

Question

我需要一个Facebook风格的通知,但是获得看起来很好的跨浏览器的东西似乎很棘手.例如,不同的浏览器似乎以不同方式处理填充,导致看起来很奇怪的通知.

什么是确保通知显示良好的最佳跨浏览器方式？对使用javascript没有不利影响,但纯css当然更可取

Answer 1

实现这一目标的最佳方法是使用绝对定位:

/* 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>

Answer 2

这是包含计数更改时的动画的一个.

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})

使用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作为globe图标,使用jQuery Transit作为动画.

Answer 3

A responsive solution using font-relative sizing and shaping

The above image is a snapshot of running the Live Demo below. Scroll down and try it yourself. Scroll further down to see a demo of the currently accepted answer.

正如其他答案所说，相对定位的父级的绝对定位是将指示器定位在右上角（或您喜欢的任何角）的非常可靠的方法。

但还有其他非常重要的考虑因素：

1. 大小：不仅与它的标签相关，而且还与数字变长时会发生什么有关？
2. 形状：理想的是圆形，但是如果数字变长会发生什么？
3. 漂浮外观：它应该看起来漂浮在角落上方，而不是在里面。
4. 边框：可选，根据所涉及的颜色，您可能需要微妙的边框或阴影。
5. 可访问性：正确标记通知，以便视力障碍者可以访问。

按照接受的答案以单位执行上述px操作非常混乱、脆弱，而且根本不响应。

以下 CSS 以优雅的响应方式解决了上述所有问题：

.notification {

  /* circle shape, size and position */
  position: absolute;
  right: -0.7em;
  top: -0.7em;
  min-width: 1.6em; /* or width, explained below. */
  height: 1.6em;
  border-radius: 0.8em; /* or 50%, explained below. */
  border: 0.05em solid white;
  background-color: red;

  /* number size and position */
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.8em;
  color: white;
}

关键事项：

1. 具有该类的元素.notification将显示在包含该类的元素的右上角。

   例如它将显示在该邮箱按钮的右上角：

   <button class="mailbox"> Inbox
       <div class="notification" role="status">42</div>
   </button>
   

   如果其位置看起来错误，请使用浏览器的开发工具检查父元素的真实边界进行调试。

2. 如果您希望无论计数有多大，指示器都是一个圆圈，请更改min-width为width并设置border-radius为50%。上面的 CSS 设计为在计数变大时水平拉伸，如下所示（就像很多人的收件箱一样）。

3. 为了实现可访问性，您应该包含role="status"在通知元素中，如上所示。

现场演示

这是一个现场演示，以及一个滑块，以便您可以看到它如何响应字体大小的变化：

/* IGNORE this Javascript part. 
   It's just here to let you change the size with
   a slider. Press Run and try it.                  */

var boxes = document.getElementsByClassName("mailbox");

function updateFontSize(size) {
  for (var i = 0; i < boxes.length; i++) {
    boxes[i].style.fontSize = size + "px";
  }
}

var px = getComputedStyle(boxes[0]).fontSize

var label = document.getElementById("label");
label.innerHTML = px

var slider = document.getElementById('slider');
slider.value = px.slice(0, -2)
slider.onchange = () => {
  label.innerHTML = slider.value + "px";
  updateFontSize(slider.value);
}

.mailbox {
  position: relative;
  font-size: 16px;
  line-height: 2.5em;
  margin: 0.3em;
}

.notification {
  /* circle shape, size and position */
  position: absolute;
  right: -0.7em;
  top: -0.7em;
  min-width: 1.6em; /* or width, explained below. */
  height: 1.6em;
  border-radius: 0.8em; /* or 50%, explained below. */
  border: 0.05em solid white;
  background-color: red;

  /* number size and position */
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.8em;
  color: white;
}

<p>Font size:
  <span id="label">16</span>
  <input id="slider" type="range" min="6" max="66" step="1" value="16"></p>

<button class="mailbox"> Unread
    <div class="notification" role="status">3</div>
</button>
<button class="mailbox"> Inbox
    <div class="notification" role="status">42</div>
</button>
<button class="mailbox"> Junk
    <div class="notification" role="status">1630</div>
</button>

比较接受的答案：

要查看差异，请运行已接受答案方法的现场演示：

var boxes = document.getElementsByClassName("mailbox");

function updateFontSize(size) {
  for (var i = 0; i < boxes.length; i++) {
    boxes[i].style.fontSize = size + "px";
  }
}

var px = getComputedStyle(boxes[0]).fontSize

var label = document.getElementById("label");
label.innerHTML = px

var slider = document.getElementById('slider');
slider.value = px.slice(0, -2)
slider.onchange = () => {
  label.innerHTML = slider.value + "px";
  updateFontSize(slider.value);
}

.mailbox {
  display: inline-block;
  position: relative;
  padding: 10px 10px;
  font-size: 16px;
}

.notification {
  background-color: #fa3e3e;
  border-radius: 2px;
  color: white;
  padding: 1px 3px;
  font-size: 10px;
  position: absolute;
  top: 0;
  right: 0;
}

<p>Font size:
  <span id="label">16</span>
  <input id="slider" type="range" min="6" max="66" step="1" value="16"></p>

<button class="mailbox"> Unread
    <div class="notification" role="status">3</div>
</button>
<button class="mailbox"> Inbox
    <div class="notification" role="status">42</div>
</button>
<button class="mailbox"> Junk
    <div class="notification" role="status">1630</div>
</button>