Facebook样式“红色”通知的最简单的CSS


87

我需要一个Facebook风格的通知,但是要获得跨浏览器看起来不错的东西似乎很棘手。例如,不同的浏览器似乎对填充物有不同的处理,从而导致看起来很奇怪的通知。

确保通知良好显示的最佳跨浏览器方式是什么?使用JavaScript并不不利,但是纯CSS当然是可取的

在此处输入图片说明


7
Facebook使用CSS3-如果用户没有支持它的浏览器,则存在其他规则,因此它会降级。例如,IE用户不会四舍五入。
克里斯·贝克

真?那是很棒的信息。
铭耀

Answers:


172

最好的方法是使用绝对定位

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


1
将<div id =“ notif_Container”>更改为<div id =“ noti_Container”>以使其工作
Vackup 2012年

3
赞成ie7、8和9。IE6还可以工作,但是我不在乎了:)
本杰明·克鲁兹耶

1
这太棒了,我不得不将其放在Jquery选项卡的<li>部分中以使其工作,但效果很好。
满头大汗

即使我在页面中多次使用,也只需替换容器的ID即可。
Web_Developer

34

这是一个包含动画的计数变化时的动画。

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,为动画使用jQuery Transit。


2
@AmbiguousTk由过渡插件jquery.transit.min.js提供服务,或者您也可以使用:code$ counter.css({opacity:0}).text(val).css({top:'-10px'})。 animate({top:'-1px',opacity:1},500); code
Marcel Djaman 2013年

非常感谢!节省时间。
Adrian P.

4

大概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>

这样的事情。显然,您可能想更改细节并可能使用背景图像。关键是要强调绝对的定位,至少在我的经验中,绝对定位在所有浏览器中都是一致的。


1

标记:

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

0

我确信有关绝对定位的答案是正确的。为了进行实验,我尝试制作仅SVG的解决方案。结果远非理想,也许有人知道类似svg拼图的更优雅的解决方案?:)

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>
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.