最流行的Facebook风格“红色”通知 [英] Easiest css for Facebook style "red" notifications

问题描述

我需要一个Facebook风格的通知，但得到一些看起来不错的跨浏览器似乎棘手。例如，不同的浏览器似乎处理paddings不同，导致奇怪的看起来通知。

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.

什么是最好的跨浏览器的方式来确保通知显示出来？不利于使用javascript，但纯CSS当然更好

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

推荐答案

实现这一目标的最佳方法是使用绝对定位。以下是实现徽章效果的方法：

The best way to achieve this is by using absolute positioning. Here's how you can achieve the badge effect:

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

这篇关于最流行的Facebook风格“红色”通知的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！