Jak mogę utworzyć przycisk Upvote / Downvote?

To tylko dla stylizacji, staram się zrobić upvote/downvote w ten sam sposób, jak to jest zrobione NA SO I Reddit, z tego, co widzę, używają obrazów strzałek jako tła, a następnie je pozycjonują, ale jestem początkującym CSS i potrzebuję kogoś, kto mnie przez to przeprowadzi. Z góry dzięki.

Author: user519753, 2010-11-25
Source

3 answers

Można to zrobić, dodając do tła inny obrazek, po jednym dla każdego stanu przycisku. Istnieje jednak czystszy, łatwiejszy, bardziej nowoczesny sposób osiągnięcia tego wyniku: Sprites.

Sprite to obrazek, który jest zapisywany jako część większego obrazu. Jedną z największych zalet korzystania z sprite 'ów jest ograniczenie podróży w obie strony do serwera dla wszystkich obrazów do jednego żądania dla sprite' ów. Element wyświetlający obraz ma obraz jako tło. Tło jest przesunięty względem elementu tak, aby element wyświetlał tylko część obrazu. Na przykład, gdy przesuwasz ramkę na zdjęcie nad plakatem (lub w tym przypadku: przesuwasz plakat pod ramką)

W ten sposób tworzą obraz, który zawiera wszystkie stany dla przycisku. Dają element przycisku (a span w tym przypadku) o stałej szerokości i wysokości i dodają do niego tło za pomocą CSS. Następnie przełącz klasę dla stanu (włączoną lub wyłączoną) za pomocą javascript w zdarzeniu click. Teraz jedyne co musisz zrobić w CSS jest zmiana położenia tła za pomocą klas CSS: 

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>

Możesz łatwo dodać więcej stanów do sprite 'ów, takich jak' hover 'i' active ' w ten sam sposób. Więc nawet umieszcza wszystkie obrazy dla całej strony w jednym obrazie. Możesz to sprawdzić za pomocą firebug lub narzędzi programistycznych Chrome. Poszukaj sprite ' ów.png".

 36
Author: Jan,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-03-17 12:05:21

Użyłem tylko CSS używając tych trójkątów w tym linku:

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

Mam nadzieję, że to komuś pomoże

 5
Author: Claudio Shigueo Watanabe,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-11-26 22:26:12

Możesz to zrobić za pomocą dwóch prostych obrazów ... Zaprojektuj dwa obrazy w niektórych edytorach obrazów, takich jak Photoshop, jeśli nie masz MSPaint...

Kod CSS to 

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

Kod HTML: 

<div id="voting">
    <div class="upvote"></div>
    <div class="downvote"></div>
</div>
 3
Author: KillerFish,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-12-28 20:36:42