CSS più semplice per notifiche "rosse" in stile Facebook


88

Ho bisogno di una notifica in stile Facebook, ma ottenere qualcosa di bello cross browser sembra complicato. Ad esempio, browser diversi sembrano trattare le imbottiture in modo diverso, risultando in notifiche dall'aspetto strano.

Qual è il miglior modo cross-browser per garantire che le notifiche vengano visualizzate correttamente? Non è contrario all'uso di javascript, ma ovviamente è preferibile il css puro

inserisci qui la descrizione dell'immagine


7
Facebook utilizza CSS3: se l'utente non ha un browser che lo supporti, ci sono altre regole in modo che si degradi. Ad esempio, gli utenti di IE non otterrebbero angoli arrotondati.
Chris Baker

veramente? questa è un'ottima informazione.
ming yeow

Risposte:


172

Il modo migliore per ottenere ciò è utilizzare il posizionamento assoluto :

/* 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
Cambia <div id = "notif_Container"> in <div id = "noti_Container"> per farlo funzionare
Vackup

3
Pollice in alto per il supporto ie7, 8 e 9. Ie6 funziona anche bene, ma non mi interessa più :)
Benjamin Crouzier

1
È fantastico, ho dovuto inserirlo nella sezione <li> di una scheda Jquery per farlo funzionare, ma funziona alla grande.
sudato

Funziona anche se l'ho usato più volte in una pagina semplicemente sostituendo l'id del contenitore.
Web_Developer

34

Eccone uno che include l'animazione per quando il conteggio cambia.

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

Animazione con 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);
});

Utilizza Font Awesome per l'icona del globo e jQuery Transit per l'animazione.


2
@AmbiguousTk è servito da un plugin di transizione jquery.transit.min.js Oppure puoi usare: code$ counter.css ({opacity: 0}) .text (val) .css ({top: '-10px'}). animare ({top: '-1px', opacity: 1}, 500); code
Marcel Djaman

Molte grazie! Mi fa risparmiare tempo.
Adrian P.

4

Probabilmente absoluteposizionamento:

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

Qualcosa del genere. Ovviamente vorresti cambiare le specifiche e probabilmente usare immagini di sfondo. Il punto è sottolineare il posizionamento assoluto che è davvero coerente tra i browser, almeno nelle mie esperienze.


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

0

Sono sicuro che le risposte sul posizionamento assoluto siano corrette. Per motivi di sperimentazione, ho provato a creare una soluzione solo SVG. Il risultato è tutt'altro che ideale, forse qualcuno conosce una soluzione più elegante per un puzzle svg simile? :)

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>
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.