Le CSS le plus simple pour les notifications «rouges» de style Facebook


87

J'ai besoin d'une notification de style facebook, mais obtenir quelque chose qui ressemble à un navigateur croisé semble délicat. Par exemple, différents navigateurs semblent traiter les rembourrages différemment, ce qui entraîne des notifications étranges.

Quel est le meilleur moyen multi-navigateurs de s'assurer que les notifications s'affichent correctement? Pas défavorable à l'utilisation de javascript, mais css pur est bien sûr préférable

entrez la description de l'image ici


7
Facebook utilise CSS3 - si l'utilisateur n'a pas de navigateur qui le prend en charge, il existe d'autres règles pour qu'il se dégrade. Par exemple, les utilisateurs d'IE n'obtiendraient pas de coins arrondis.
Chris Baker

vraiment? c'est une excellente information.
ming yeow

Réponses:


172

La meilleure façon d'y parvenir est d'utiliser le 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>


1
Remplacez <div id = "notif_Container"> par <div id = "noti_Container"> pour que cela fonctionne
Vackup le

3
Bravo pour le support ie7, 8 et 9. Ie6 fonctionne un peu aussi, mais je m'en fiche plus :)
Benjamin Crouzier

1
C'est génial, j'ai dû le mettre dans la section <li> d'un onglet Jquery pour que ça marche, mais ça marche très bien.
sueur

Cela fonctionne même si j'ai utilisé plusieurs fois dans une page en remplaçant simplement l'identifiant du conteneur.
Web_Developer

34

En voici un qui inclut une animation pour le moment où le nombre 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.


2
@AmbiguousTk il est servi par un plugin de transition jquery.transit.min.js Ou à la place vous pouvez utiliser: code$ counter.css ({opacity: 0}) .text (val) .css ({top: '-10px'}). animer ({haut: '-1px', opacité: 1}, 500); code
Marcel Djaman

Merci beaucoup! Économise mon temps.
Adrian P.

4

absolutePositionnement probable :

<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 ca. Évidemment, vous voudriez changer les détails et probablement utiliser des images d'arrière-plan. Le but est de mettre l'accent sur le positionnement absolu qui est vraiment cohérent entre les navigateurs, du moins dans mes expériences.


1

Balisage:

<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

Je suis sûr que les réponses sur le positionnement absolu sont correctes. Par souci d'expérience, j'ai essayé de créer une solution SVG uniquement. Le résultat est loin d'être idéal, peut-être que quelqu'un connaît une solution plus élégante à un puzzle svg similaire? :)

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>
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.