मैं उपरोक्त/डाउनवोट बटन कैसे बना सकता हूं?

Question

यह सिर्फ स्टाइल के लिए, मैं एक वोट दें बनाने के लिए उसी तरह है कि यह इतना और Reddit पर किया जाता है, से मैं क्या देख सकते हैं वे पृष्ठभूमि के रूप में तीर छवियों का उपयोग और फिर इसे स्थिति downvote कोशिश कर रहा हूँ है/है, लेकिन मैं कर रहा हूँ एक सीएसएस नौसिखिया और मुझे किसी के माध्यम से मुझे चलने की जरूरत है। अग्रिम में धन्यवाद।

Answer 1

आप इसे पृष्ठभूमि, बटन के हर राज्य के लिए एक के लिए एक अलग तस्वीर जोड़कर कर सकता है। हालांकि इस परिणाम को प्राप्त करने का एक क्लीनर, आसान, अधिक आधुनिक तरीका है: स्प्राइट्स।

एक स्प्राइट एक छवि है जो एक बड़ी छवि के हिस्से के रूप में सहेजी जाती है। स्प्राइट्स का उपयोग करने के सबसे बड़े फायदों में से एक है सभी छवियों के लिए स्प्राइट्स के लिए केवल एक अनुरोध के लिए सर्वर के लिए राउंड-ट्रिप में कमी। चित्र को प्रदर्शित करने के लिए तत्व पृष्ठभूमि के रूप में छवि है। पृष्ठभूमि तत्व के सापेक्ष स्थानांतरित हो जाती है ताकि तत्व छवि का केवल एक हिस्सा प्रदर्शित कर सके। जब आप एक पोस्टर पर एक फोटो फ्रेम ले जाते हैं (या इस मामले में: पोस्टर को फ्रेम के नीचे ले जाना)

एसओ पर वे एक छवि बनाते हैं जिसमें बटन के लिए सभी राज्य शामिल होते हैं। वे बटन के लिए तत्व देते हैं (इस मामले में span) एक निश्चित चौड़ाई और ऊंचाई और सीएसएस के साथ पृष्ठभूमि जोड़ें। फिर क्लिक ईवेंट पर जावास्क्रिप्ट के साथ राज्य (चालू या बंद) के लिए कक्षा को टॉगल करें।

$('.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>

आप आसानी से 'मंडराना' और 'सक्रिय' सिर्फ एक ही तरह स्प्राइट के लिए और अधिक राज्यों में जोड़ सकते हैं: अब केवल एक चीज आप सीएसएस में क्या करना है सीएसएस वर्गों के साथ पृष्ठभूमि की स्थिति बदलते हैं मार्ग। तो पूरे पृष्ठ के लिए सभी छवियों को एक ही छवि में भी रखता है। आप इसे फ़ायरबग या क्रोम डेवलपर टूल से सत्यापित कर सकते हैं। 'Sprites.png' के लिए देखो।

Answer 2

आप

सीएसएस कोड

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

है फोटोशॉप जैसे कुछ छवि संपादक में दो साधारण छवियों ... डिजाइन दो छवियों का उपयोग कर, अगर यू MSPaint की जरूरत नहीं है से यह कर सकते हैं ... एचटीएमएल कोड:

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

Answer 3

मैं केवल इस लिंक में इन त्रिकोण का उपयोग कर सीएसएस इस्तेमाल किया:

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

मुझे आशा है कि यह किसी