Facebook 스타일 "빨간색"알림을위한 가장 쉬운 CSS

Facebook 스타일 "빨간색"알림을위한 가장 쉬운 CSS

---

나는 페이스 북 스타일 알림이 필요하지만, 멋진 크로스 브라우저를 얻는 것이 까다로워 보인다. 예를 들어, 다른 브라우저는 패딩을 다르게 처리하는 것처럼 보이므로 이상하게 보이는 알림이 표시됩니다.

알림이 멋지게 표시되도록하는 가장 좋은 크로스 브라우저 방법은 무엇입니까? 자바 스크립트 사용에 불리하지는 않지만 순수한 CSS가 물론 바람직합니다.

---

이를 달성하는 가장 좋은 방법은 절대 위치 지정 을 사용하는 것입니다 .

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

---

다음은 카운트가 변경 될 때 애니메이션을 포함하는 것입니다.

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을 사용합니다.

---

시작하기에 좋은 튜토리얼입니다.

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

---

아마도 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>

그런 것. 분명히 세부 사항을 변경하고 배경 이미지를 사용하고 싶을 것입니다. 요점은 적어도 내 경험에서 브라우저 전반에서 실제로 일관된 절대 위치를 강조하는 것입니다.

---

마크 업 :

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

참고 URL : https://stackoverflow.com/questions/5747863/easiest-css-for-facebook-style-red-notifications