Najłatwiejszy css dla „czerwonych” powiadomień w stylu Facebooka

88

Potrzebuję powiadomienia w stylu Facebooka, ale uzyskanie czegoś, co wygląda ładnie w różnych przeglądarkach, wydaje się trudne. Na przykład różne przeglądarki wydają się inaczej traktować wypełnienia, co powoduje dziwnie wyglądające powiadomienia.

Jaki jest najlepszy sposób na zapewnienie ładnego wyświetlania powiadomień w różnych przeglądarkach? Nie jest to niekorzystne dla używania javascript, ale oczywiście preferowany jest czysty css

wprowadź opis obrazu tutaj

ming yeow
źródło
7
Facebook używa CSS3 - jeśli użytkownik nie ma przeglądarki, która go obsługuje, istnieją inne reguły, które go degradują. Na przykład użytkownicy IE nie otrzymaliby zaokrąglonych rogów.
Chris Baker
naprawdę? to świetna informacja.
ming yeow

Odpowiedzi:

172

Najlepszym sposobem na osiągnięcie tego jest użycie pozycjonowania bezwzględnego :

/* 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
źródło
1
Zmień <div id = "notif_Container"> na <div id = "noti_Container">, aby działało
Vackup
3
Kciuki w górę za obsługę IE7, 8 i 9. To znaczy trochę działa również, ale już mnie to nie obchodzi :)
Benjamin Crouzier
1
To jest niesamowite, musiałem umieścić go w sekcji <li> zakładki Jquery, aby działało, ale działa świetnie.
spocony
Działa nawet, gdy używałem go wielokrotnie na stronie, po prostu zastępując identyfikator kontenera.
Web_Developer
34

Oto jeden, który obejmuje animację, gdy zmienia się liczba.

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

Animacja z 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);
});

Używa Font Awesome dla ikony globu i jQuery Transit do animacji.

Rahil Sondhi
źródło
2
@AmbiguousTk obsługiwane przez wtyczkę przejściową jquery.transit.min.js Lub zamiast tego możesz użyć: code$ counter.css ({opacity: 0}) .text (val) .css ({top: '-10px'}). animuj ({top: '-1px', krycie: 1}, 500); code
Marcel Djaman
Wielkie dzięki! Oszczędza mój czas.
Adrian P.
4

Prawdopodobnie absolutepołożenie:

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

Coś w tym stylu. Oczywiście chciałbyś zmienić szczegóły i prawdopodobnie użyć obrazów tła. Chodzi o to, aby podkreślić absolutne pozycjonowanie, które jest naprawdę spójne w różnych przeglądarkach, przynajmniej z moich doświadczeń.

Dustin Laine
źródło
1

Narzut:

<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
źródło
0

Jestem pewien, że odpowiedzi dotyczące pozycjonowania bezwzględnego są prawidłowe. Ze względu na eksperyment próbowałem stworzyć rozwiązanie tylko w formacie SVG. Wynik jest daleki od ideału, może ktoś zna bardziej eleganckie rozwiązanie podobnej układanki svg? :)

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
źródło