Einfachstes CSS für “rotes Benachrichtigungsabzeichen” mit Zählung

Question 1

Ich muss die beliebte rote Benachrichtigungsanzeige mit einer Anzahl wie der unten gezeigten anzeigen. Es scheint schwierig zu sein, etwas zu bekommen, das browserübergreifend gut aussieht. Beispielsweise scheinen verschiedene Browser Paddings 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 gegen die Verwendung von Javascript, aber reines CSS ist natürlich vorzuziehen

Geben Sie hier die Bildbeschreibung ein

Question 2

Der beste Weg, dies zu erreichen, ist die Verwendung 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>

Question 3

Hier ist eine, die eine Animation enthält, wenn sich die Zählung ä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 Globussymbol und jQuery Transit für die Animation.

Question 4

Wahrscheinlich absolute Positionierung:

<div id="globe" style="height: 30px; width: 30px; position: relative;">
 <img src="https://stackoverflow.com/globe.gif" />
 <div id="notification" style="position: absolute; top: 0; right;0;">1</div>
</div>

Sowas in der Art. Offensichtlich möchten Sie die Einzelheiten ändern und wahrscheinlich Hintergrundbilder verwenden. Der Punkt ist, die absolute Positionierung zu betonen, die zumindest nach meinen Erfahrungen über Browser hinweg wirklich konsistent ist.

Question 5

Auszeichnung:

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

Question 6

Ich bin sicher, dass die Antworten zur absoluten Positionierung richtig sind. Zu Versuchszwecken 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>

Question 7

EIN ansprechbar Lösung mit schriftbezogener Größenanpassung und Formgebung

Wie andere Antworten sagen, ist die absolute Positionierung mit einem relativ positionierten Elternteil eine sehr zuverlässige Methode, um den Indikator in der oberen rechten Ecke (oder einer beliebigen Ecke, die Sie bevorzugen) zu positionieren.

Aber es gibt noch andere sehr wichtige Überlegungen:

Größe: nicht nur in Bezug auf das, was es markiert, sondern auch, was passiert, wenn die Nummer lang wird?
Form: Idealerweise rund, aber was passiert, wenn die Zahl lang wird?
Schwebendes Erscheinungsbild: Es sollte so aussehen, als ob es über der Ecke schwebt, anstatt sich darin zu befinden.
Rand: Optional, abhängig von den beteiligten Farben, benötigen Sie möglicherweise einen subtilen Rand oder Schatten.
Barrierefreiheit: ordnungsgemäße Kennzeichnung der Benachrichtigung, damit sie für Sehbehinderte zugänglich ist.

Tun Sie das oben in px Einheiten, wie es die akzeptierte Antwort tut, ist sehr chaotisch, spröde und überhaupt nicht ansprechbar.

Das folgende CSS adressiert alle oben genannten Probleme auf elegante, ansprechende Weise:

.notification {

  /* circle shape, size and position */
  position: absolute;
  right: -0.7em;
  top: -0.7em;
  min-width: 1.6em; /* or width, explained below. */
  height: 1.6em;
  border-radius: 0.8em; /* or 50%, explained below. */
  border: 0.05em solid white;
  background-color: red;

  /* number size and position */
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.8em;
  color: white;
}

Wichtige Dinge:

Das Element mit der .notification class wird in der oberen rechten Ecke des Elements angezeigt, das sie enthält.

Zum Beispiel wird es in der oberen rechten Ecke dieser Mailbox-Schaltfläche angezeigt:
```
<button class="mailbox">📥 Inbox
    <div class="notification" role="status">42</div>
</button>
```
Wenn seine Position falsch aussieht, überprüfen Sie die wahren Grenzen des übergeordneten Elements, um es zu debuggen.
Wenn Sie möchten, dass der Indikator ein Kreis ist, egal wie groß die Zählung ist, ändern Sie ihn min-width zu width und einstellen border-radius zu 50%. Das obige CSS ist so konzipiert, dass es sich horizontal dehnt, wenn die Anzahl zunimmt, wie unten gezeigt (und wie die Posteingänge so vieler Leute 🤣).
Für die Zugänglichkeit sollten Sie Folgendes einbeziehen role="status" auf dem Benachrichtigungselement, wie oben gezeigt.

Hier ist eine Live-Demo zusammen mit einem Schieberegler, damit Sie sehen können, wie es auf Änderungen der Schriftgröße reagiert:

/* IGNORE this Javascript part. 
   It's just here to let you change the size with
   a slider. Press Run and try it.                  */

var boxes = document.getElementsByClassName("mailbox");

function updateFontSize(size) {
  for (var i = 0; i < boxes.length; i++) {
    boxes[i].style.fontSize = size + "px";
  }
}

var px = getComputedStyle(boxes[0]).fontSize

var label = document.getElementById("label");
label.innerHTML = px

var slider = document.getElementById('slider');
slider.value = px.slice(0, -2)
slider.onchange = () => {
  label.innerHTML = slider.value + "px";
  updateFontSize(slider.value);
}

.mailbox {
  position: relative;
  font-size: 16px;
  line-height: 2.5em;
  margin: 0.3em;
}

.notification {
  /* circle shape, size and position */
  position: absolute;
  right: -0.7em;
  top: -0.7em;
  min-width: 1.6em; /* or width, explained below. */
  height: 1.6em;
  border-radius: 0.8em; /* or 50%, explained below. */
  border: 0.05em solid white;
  background-color: red;

  /* number size and position */
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.8em;
  color: white;
}

<p>Font size:
  <span id="label">16</span>
  <input id="slider" type="range" min="6" max="66" step="1" value="16"></p>

<button class="mailbox">📨 Unread
    <div class="notification" role="status">3</div>
</button>
<button class="mailbox">📥 Inbox
    <div class="notification" role="status">42</div>
</button>
<button class="mailbox">🗑 Junk
    <div class="notification" role="status">1630</div>
</button>

Vergleich der akzeptierten Antwort:

Um den Unterschied zu sehen, führen Sie diese Live-Demo des Ansatzes der akzeptierten Antwort aus:

var boxes = document.getElementsByClassName("mailbox");

function updateFontSize(size) {
  for (var i = 0; i < boxes.length; i++) {
    boxes[i].style.fontSize = size + "px";
  }
}

var px = getComputedStyle(boxes[0]).fontSize

var label = document.getElementById("label");
label.innerHTML = px

var slider = document.getElementById('slider');
slider.value = px.slice(0, -2)
slider.onchange = () => {
  label.innerHTML = slider.value + "px";
  updateFontSize(slider.value);
}

.mailbox {
  display: inline-block;
  position: relative;
  padding: 10px 10px;
  font-size: 16px;
}

.notification {
  background-color: #fa3e3e;
  border-radius: 2px;
  color: white;
  padding: 1px 3px;
  font-size: 10px;
  position: absolute;
  top: 0;
  right: 0;
}

<p>Font size:
  <span id="label">16</span>
  <input id="slider" type="range" min="6" max="66" step="1" value="16"></p>

<button class="mailbox">📨 Unread
    <div class="notification" role="status">3</div>
</button>
<button class="mailbox">📥 Inbox
    <div class="notification" role="status">42</div>
</button>
<button class="mailbox">🗑 Junk
    <div class="notification" role="status">1630</div>
</button>