Le css le plus simple pour les notifications "rouges" de style Facebook

Question

J'ai besoin d'une notification de style facebook, mais obtenir quelque chose qui soit agréable à regarder sur plusieurs navigateurs semble délicat. Par exemple, les différents navigateurs semblent traiter les paddings différemment, ce qui donne des notifications au look bizarre.

Quel est le meilleur moyen de faire en sorte que les notifications s'affichent correctement dans les différents navigateurs ? Je ne suis pas opposé à l'utilisation de javascript, mais le css pur est bien sûr préférable.

Answer 1

La meilleure façon d'y parvenir est d'utiliser positionnement absolu :

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

En voici un qui comprend une animation lorsque le compte change.

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

Il utilise Font Awesome pour l'icône du globe et jQuery Transit pour l'animation.

Answer 3

Un bon tutoriel pour vous aider à démarrer.

http://rndnext.blogspot.com/2009/02/creating-badge-icon-plugin-with-jquery.html

Answer 4

Probablement absolute positionnement :

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

Quelque chose comme ça. Il est évident que vous voudrez changer les spécificités et probablement utiliser des images de fond. Le but est de mettre l'accent sur le positionnement absolu, qui est vraiment cohérent d'un navigateur à l'autre, du moins d'après mon expérience.

Answer 5

Markup :

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