Самый простой css для Facebook стиль "красные" уведомления

Question

Самый простой css для Facebook стиль "красные" уведомления

Мне нужно уведомление в стиле facebook, но получить что-то, что выглядит красиво кросс-браузер кажется сложным. Например, различные браузеры, по-видимому, обрабатывают прокладки по-разному, что приводит к странным уведомлениям.

каков лучший кросс-браузерный способ обеспечения красивого отображения уведомлений? Не отрицательно к использованию javascript, но чистый css, конечно, предпочтительнее

enter image description here

582 5

javascript html css user-interface user-experience

5 ответов:

Comments

Ничего не найдено.

Titus · Accepted Answer · 2018-07-29 19:19:08

лучший способ добиться этого с помощью абсолютное позиционирование:

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

Rahil Sondhi · Accepted Answer · 2016-01-30 08:57:37

вот тот, который включает в себя анимацию, когда количество изменений.

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

анимация с помощью 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);
});

Он использует шрифт Awesome для значка глобуса и jQuery Transit для анимации.

bh88 · Accepted Answer · 2011-04-21 20:56:21

довольно хороший учебник, чтобы вы начали.

http://rndnext.blogspot.com/2009/02/creating-badge-icon-plugin-with-jquery.html

Dustin Laine · Accepted Answer · 2011-04-21 20:57:12

наверное absolute местоположение:
<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>
что-то подобное. Очевидно, вы хотели бы изменить специфику и, вероятно, использовать фоновые изображения. Дело в том, чтобы подчеркнуть абсолютное позиционирование, которое оно действительно согласовано в браузерах, по крайней мере, в моем опыте.

neebz · Accepted Answer · 2011-04-21 20:58:08

разметка:

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