Как я могу сделать кнопку Upvote / Downvote? - PullRequest
Новая
       50

Как я могу сделать кнопку Upvote / Downvote?

22 голосов
/ 25 ноября 2010

Это только для стиля, я пытаюсь сделать upvote / downvote так же, как это делается на SO и Reddit, из того, что я вижу, они используют изображения стрелок в качестве фона, а затем позиционируют его, но Я новичок в CSS, и мне нужен кто-то, кто поможет мне в этом. Заранее спасибо.

Ответы [ 3 ]

43 голосов
/ 25 ноября 2010

Вы можете сделать это, добавив другое изображение к фону, по одному для каждого состояния кнопки.Однако есть более чистый, более простой и современный способ достижения этого результата: спрайты.

Спрайт - это изображение, которое сохраняется как часть большего изображения.Одним из самых больших преимуществ использования спрайтов является сокращение количества обращений к серверу для всех изображений до одного запроса на спрайты.Элемент для отображения изображения имеет изображение в качестве фона.Фон перемещается относительно элемента, поэтому элемент отображает только часть изображения.Например, когда вы перемещаете фоторамку над плакатом (или, в данном случае, перемещаете плакат под рамкой)

В SO они создают изображение, которое содержит все состояния кнопки.Они дают элементу кнопки (в данном случае span) фиксированную ширину и высоту и добавляют к ней фон с помощью CSS.Затем переключите класс для состояния (вкл или выкл) с помощью JavaScript на событие click.Теперь единственное, что вам нужно сделать в CSS, это изменить положение фона с помощью классов CSS:

The up/down sprite image

for (const btn of document.querySelectorAll('.vote')) {
  btn.addEventListener('click', event => {
    event.target.classList.toggle('on');
  });
}
.vote {
  display: inline-block;
  overflow: hidden;
  width: 40px;
  height: 25px;
  cursor: pointer;
  background: url('http://i.stack.imgur.com/iqN2k.png');
  background-position: 0 -25px;
} 


.vote.on {
  background-position: 0 2px;
}
Click to vote: <span class="vote"> </span>

Вы можете легко добавить больше состояний к спрайтам, таким как «зависание» и «активный» точно так же.Таким образом, даже помещает все изображения для всей страницы в одно изображение.Вы можете проверить это с помощью Firebug или инструментов разработчика Chrome.Ищите «sprites.png».

5 голосов
/ 27 ноября 2013

Я использовал только CSS, используя эти треугольники в этой ссылке:

http://css -tricks.com / snippets / css / css-triangle /

Надеюсьчто это кому-то помогает

4 голосов
/ 25 ноября 2010

Вы можете сделать это, используя два простых изображения ... создайте два изображения в некоторых графических редакторах, таких как Photoshop, если у вас нет MSPaint ...

CSS-код 

#voting{
   width:30px;
   height:40px;
}
.upvote{
   width:30px;
   height: 20px;
   cursor: pointer;
}
.downvote{
   width:30px;
   height: 20px;
   background: url('downvote.jpg') 0 0 no-repeat;
   cursor: pointer;
}

HTML код: 

<div id="voting">
    <div class="upvote"></div>
    <div class="downvote"></div>
</div>
...