Comment puis-je créer un bouton Upvote/Downvote?

Question

Ceci est juste pour le style, j'essaie de faire un upvote/downvote de la même manière que cela est fait sur SO et Reddit, d'après ce que je peux voir, ils utilisent des images fléchées comme arrière-plans, puis le positionner, mais je suis un novice CSS et j'ai besoin de quelqu'un pour me promener à travers elle. Merci d'avance.

Answer 1

Vous pouvez le faire en ajoutant une image différente à l'arrière-plan, une pour chaque état du bouton. Il y a cependant une manière plus propre, plus facile et plus moderne de réaliser ce résultat: Sprites.

Une image-objet est une image enregistrée en tant que partie d'une image plus grande. L'un des plus grands avantages de l'utilisation des sprites est la réduction des allers-retours au serveur pour toutes les images à une seule requête pour les Sprites. L'élément pour afficher une image a l'image en arrière-plan. L'arrière-plan est déplacé par rapport à l'élément afin que l'élément n'affiche qu'une partie de l'image. Comme lorsque vous déplacez un cadre photo sur une affiche (ou dans ce cas: déplacez l'affiche sous le cadre)

A SO, ils créent une image qui contient tous les états du bouton. Ils donnent à l'élément pour le bouton (un span dans ce cas) une largeur et une hauteur fixes et ajoutent l'arrière-plan avec CSS. Puis basculez une classe pour l'état (activé ou désactivé) avec javascript sur l'événement click. Maintenant, la seule chose que vous avez à faire en CSS est de changer la position de l'arrière-plan avec des classes CSS:

$('.vote').click(function() { 
 
    $(this).toggleClass('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; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
Click to vote: <span class="vote"> </span>

Vous pouvez facilement ajouter des états aux sprites comme « vol stationnaire » et « active » la même chose façon. SO met même toutes les images pour la page entière dans une seule image. Vous pouvez le vérifier avec firebug ou les outils de développement Chrome. Recherchez 'sprites.png'.

Answer 2

Vous pouvez le faire en utilisant deux images simples ... conception deux images dans certains éditeurs d'images comme Photoshop, si u n'ont pas MSPaint ...

code CSS est

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

Code HTML:

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

Answer 3

J'utilisé que CSS en utilisant ces triangles dans ce lien:

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

J'espère que cela aide quelqu'un