Einfachste CSS für "rote" Benachrichtigungen im Facebook-Stil

86

Ich brauche eine Benachrichtigung im Facebook-Stil, aber es scheint schwierig, etwas zu bekommen, das über den Browser hinweg gut aussieht. Beispielsweise scheinen verschiedene Browser Auffüllungen unterschiedlich zu behandeln, was zu seltsam aussehenden Benachrichtigungen führt.

Was ist der beste browserübergreifende Weg, um sicherzustellen, dass die Benachrichtigungen gut angezeigt werden? Nicht nachteilig für die Verwendung von Javascript, aber reines CSS ist natürlich vorzuziehen

Geben Sie hier die Bildbeschreibung ein

ming yeow
quelle
7
Facebook verwendet CSS3 - wenn der Benutzer keinen Browser hat, der dies unterstützt, gibt es andere Regeln, die eine Verschlechterung bewirken. Zum Beispiel würden IE-Benutzer keine abgerundeten Ecken bekommen.
Chris Baker
Ja wirklich? Das sind großartige Informationen.
Ming Yeow

Antworten:

168

Der beste Weg, dies zu erreichen, ist die absolute Positionierung :

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

Titus
quelle
1
Ändern Sie <div id = "notif_Container"> in <div id = "noti_Container">, damit es funktioniert
Vackup
3
Daumen hoch für ie7, 8 und 9 Unterstützung. Ie6 funktioniert irgendwie auch, aber es ist mir egal :)
Benjamin Crouzier
1
Das ist großartig, ich musste es in den Abschnitt <li> einer Jquery-Registerkarte einfügen, damit es funktioniert, aber es funktioniert großartig.
verschwitzten
Es funktioniert sogar, wenn ich es mehrmals auf einer Seite verwendet habe, indem ich nur die ID des Containers ersetze.
Web_Developer
34

Hier ist eine, die eine Animation enthält, wenn sich die Anzahl ändert.

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

Es verwendet Font Awesome für das Globus-Symbol und jQuery Transit für die Animation.

Rahil Sondhi
quelle
2
@AmbiguousTk wird von einem Übergangs-Plugin jquery.transit.min.js bereitgestellt. Stattdessen können Sie Folgendes verwenden: code$ counter.css ({opacity: 0}) .text (val) .css ({top: '-10px'}). animieren ({oben: '-1px', Deckkraft: 1}, 500); code
Marcel Djaman
Vielen Dank! Spart mir Zeit.
Adrian P.
4

Wahrscheinlich absolutePositionierung:

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

Sowas in der Art. Natürlich möchten Sie die Details ändern und wahrscheinlich Hintergrundbilder verwenden. Es geht darum, die absolute Positionierung hervorzuheben, die zumindest nach meinen Erfahrungen in allen Browsern wirklich konsistent ist.

Dustin Laine
quelle
1

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 
    ...
}
neebz
quelle
0

Ich bin sicher, dass die Antworten zur absoluten Positionierung richtig sind. Aus Versuchsgründen habe ich versucht, eine reine SVG-Lösung zu erstellen. Das Ergebnis ist alles andere als ideal. Vielleicht kennt jemand eine elegantere Lösung für ein ähnliches SVG-Puzzle? :) :)

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