it-swarm.com.de

Das einfachste CSS für "rote" Benachrichtigungen im Facebook-Stil

Ich benötige eine Benachrichtigung im Facebook-Stil, aber etwas zu bekommen, das gut aussieht, erscheint mir schwierig. Beispielsweise scheinen verschiedene Browser Füllungen unterschiedlich zu behandeln, was zu seltsam aussehenden Benachrichtigungen führt.

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

enter image description here

78
ming yeow

Dies erreichen Sie am besten mit 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>
155
Titus

Hier ist eine Animation, die anzeigt, wann 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 Globussymbol und jQuery Transit für die Animation.

33
Rahil Sondhi
4
bh88

Wahrscheinlich absolute Positionierung:

<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 möglicherweise Hintergrundbilder verwenden. Es geht darum, die absolute Positionierung hervorzuheben, die für alle Browser wirklich konsistent ist, zumindest nach meinen Erfahrungen.

3
Dustin Laine

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