Самый простой CSS для «красных» уведомлений в стиле Facebook

87

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

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

введите описание изображения здесь

мин да
источник
7
Facebook использует CSS3 - если у пользователя нет браузера, который его поддерживает, существуют другие правила, которые ухудшают его работу. Например, пользователи IE не получат закругленных углов.
Крис Бейкер
действительно? это отличная информация.
ming yeow

Ответы:

172

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

/* 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
Измените <div id = "notif_Container"> на <div id = "noti_Container">, чтобы он работал
Vackup,
3
Большое спасибо за поддержку ie7, 8 и 9. Ie6 вроде как работает, но меня больше не волнует :)
Бенджамин Крузье 08
1
Это круто, мне пришлось поместить его в раздел <li> на вкладке JQuery, чтобы он работал, но работает отлично.
потный
Он работает, даже если я использовал его несколько раз на странице, просто заменив идентификатор контейнера.
Web_Developer 03
34

Вот тот, который включает анимацию при изменении счетчика.

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

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

Рахил Сонди
источник
2
@AmbiguousTk обслуживается плагином перехода jquery.transit.min.js Или вместо этого вы можете использовать: code$ counter.css ({opacity: 0}) .text (val) .css ({top: '-10px'}). анимировать ({top: '-1px', opacity: 1}, 500); code
Марсель Джаман
Большое спасибо! Экономит мое время.
Адриан П.
4

Вероятно 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>

Что-то такое. Очевидно, вы захотите изменить детали и, возможно, использовать фоновые изображения. Дело в том, чтобы подчеркнуть абсолютное позиционирование, которое действительно согласовано во всех браузерах, по крайней мере, по моему опыту.

Дастин Лайн
источник
1

Разметка:

<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
источник
0

Я уверен, что ответы об абсолютном позиционировании верны. Ради эксперимента я попытался сделать решение только для SVG. Результат далек от идеала, может кто знает более изящное решение подобной 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>
нектобить
источник