गूगल के इमेजलेस बटन

Question

Google के नए काल्पनिक बटन के बारे में हाल ही में कुछ लेख आए हैं:

• http://stopdesign.com/archive/2009/02/04/recreating-the-button.html
• http://stopdesign.com/eg/buttons/3.0/code.html
• http://stopdesign.com/eg/buttons/3.1/code.html
• http://gmailblog.blogspot.com/2009/02/new-ways-to-label-with-move-to-and-auto.html

मुझे वास्तव में पसंद है कि ये नए बटन जीमेल में कैसे काम करते हैं। मैं अपनी साइट पर इन या समान बटन का उपयोग कैसे कर सकता हूं? क्या कोई समान दृश्य और अनुभव वाली कोई ओपन सोर्स परियोजनाएं हैं?

अगर मैं JQuery / XHTML / CSS का उपयोग करके अपने स्वयं के बटन पैकेज को इस तरह रोल करना चाहता था, तो मैं किन तत्वों का उपयोग कर सकता था? मेरे शुरुआती विचार हैं:

1. <input type="button">लुक को बेहतर बनाने के लिए css के साथ मानक (डिज़ाइन लेख में css / imges के बारे में ज्यादातर बात की गई है।)

2. Jquery जावास्क्रिप्ट "कस्टम ऑनक्लिक" ईवेंट पर बटन को रूट किए गए एक कस्टम डायलॉग को लाने के लिए जो <a>उनमें टैग और फ़िल्टरिंग के लिए एक सर्च बार होगा? क्या उस पॉपअप के लिए एक टेबल लेआउट साने होगा?

मैं वेब पर इंजीनियरिंग की रिवर्स चीजों पर भयानक हूं, ऐसे कुछ उपकरण क्या हैं जिनका उपयोग करके मैं इन बटन को रिवर्स इंजीनियर की मदद कर सकता हूं? फ़ायरफ़ॉक्स के वेब डेवलपर टूलबार का उपयोग करके मैं वास्तव में सीएसएस या जावास्क्रिप्ट नहीं देख सकता (भले ही इसे छोटा किया गया हो) जो कि बटन पॉपअप संवादों पर उपयोग किया जाता है। क्या ब्राउज़र उपकरण या अन्य विधि मैं उन्हें देखने के लिए और कुछ विचार प्राप्त करने के लिए उपयोग कर सकता हूं?

मैं Google का कोई भी IP चुराना नहीं चाह रहा हूं, बस मुझे इस बात का अंदाजा है कि मैं इसी तरह की बटन कार्यक्षमता कैसे बना सकता हूं।

Answer 1

EDIT - मैंने मूल पोस्ट में लिंक नहीं देखा। माफ़ करना! कोशिश करेंगे और वास्तविक प्रश्न को प्रतिबिंबित करने के लिए फिर से लिखेंगे

यहाँ पर स्टॉपडिजाइन का एक उत्कृष्ट पोस्ट है । [20091107 संपादित करें] ये क्लोजर लाइब्रेरी के हिस्से के रूप में जारी किए गए : बटन डेमो देखें ।

मूल रूप से उनके द्वारा दिखाए गए कस्टम बटन सीएसएस के एक साधारण बिट का उपयोग करके बनाए गए हैं।

उन्होंने मूल रूप से प्रभाव प्राप्त करने के लिए 9 तालिकाओं का उपयोग किया:

लेकिन बाद में उन्होंने एक ही प्रभाव प्राप्त करने के लिए ऊपर और नीचे की सीमाओं पर एक सरल 1px बाएँ और दाएँ मार्जिन का उपयोग किया।

ढाल तीन परतों का उपयोग करके नकली है:

सभी कोड कस्टम बटन 3.1 पेज पर पाए जा सकते हैं । (हालांकि छवि के बिना ढाल केवल फ़ायरफ़ॉक्स और सफारी में काम कर रहा है)

कदम से कदम निर्देश

1 - निम्नलिखित सीएसएस डालें:

/* Start custom button CSS here
---------------------------------------- */
.btn {
  display:inline-block;
  background:none;
  margin:0;
  padding:3px 0;
  border-width:0;
  overflow:visible;
  font:100%/1.2 Arial,Sans-serif;
  text-decoration:none;
  color:#333;
  }
* html button.btn {
  padding-bottom:1px;
  }
/* Immediately below is a temporary hack to serve the 
   following margin values only to Gecko browsers
   Gecko browsers add an extra 3px of left/right 
   padding to button elements which can't be overriden.
   Thus, we use -3px of left/right margin to overcome this. */
html:not([lang*=""]) button.btn {
  margin:0 -3px;
  }
.btn span {
  background:#f9f9f9;
  z-index:1;
  margin:0;
  padding:3px 0;
  border-left:1px solid #ccc;
  border-right:1px solid #bbb;
  }
* html .btn span {
  padding-top:0;
  }
.btn span span {
  background:none;
  position:relative;
  padding:3px .4em;
  border-width:0;
  border-top:1px solid #ccc;
  border-bottom:1px solid #bbb;
  }
.btn b {
  background:#e3e3e3;
  position:absolute;
  z-index:2;
  bottom:0;
  left:0;
  width:100%;
  overflow:hidden;
  height:40%;
  border-top:3px solid #eee;
  }
* html .btn b {
  top:1px;
  }
.btn u {
  text-decoration:none;
  position:relative;
  z-index:3;
  }

/* pill classes only needed if using pill style buttons ( LEFT | CENTER | RIGHT ) */
button.pill-l span {
  border-right-width:0;
  }
button.pill-l span span {
  border-right:1px solid #ccc;
  }
button.pill-c span {
  border-right-style:none;
  border-left-color:#fff;
  }
button.pill-c span span {
  border-right:1px solid #ccc;
  }
button.pill-r span {
  border-left-color:#fff;
  }

/* only needed if implementing separate hover state for buttons */
.btn:hover span, .btn:hover span span {
  cursor:pointer;
  border-color:#9cf !important;
  color:#000;
  }

/* use if one button should be the 'primary' button */
.primary {
  font-weight:bold;
  color:#000;
  }

2 - इसे कॉल करने के लिए निम्नलिखित तरीकों में से एक का उपयोग करें (ऊपर दिए गए लिंक में पाया जा सकता है)

<a href="#" class="btn"><span><span><b>&nbsp;</b><u>button</u></span></span></a>

या

<button type="button" class="btn"><span><span><b>&nbsp;</b><u>button</u></span></span></button>

Answer 2

यह फायरबग के अनुसार उनका "आर्काइव" बटन है।

<div tabindex="0" act="7" class="goog-imageless-button goog-inline-block goog-imageless-button goog-imageless-button-collapse-right goog-imageless-button-primary" id="">
  <div class="goog-inline-block goog-imageless-button-outer-box">
    <div class="goog-inline-block goog-imageless-button-inner-box">
      <div class="goog-imageless-button-pos">
        <div class="goog-imageless-button-top-shadow"> </div>
        <div class="goog-imageless-button-content"><b>Archive</b></div>
      </div>
    </div>
  </div>
</div>

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

जितना मैं Google से प्यार करता हूं, यह थोड़ा अधिक लगता है।

---

अपडेट: Google एक अनूठा मामला है। यदि आप एक विशाल साइट हैं और आप अपनी सामग्री का अंतर्राष्ट्रीयकरण करना चाहते हैं, तो यह इमेज-कम तकनीक वास्तव में बहुत अच्छी है। यह आपको अपने यूआई के बारे में किसी भी लिखित भाषा को लागू करने की अनुमति देता है, नई छवियों को उत्पन्न करने की आवश्यकता के बिना, या आपके बटन टूटने के डर से।

प्रश्न देखें: इमेजलेस बटन का उपयोग करने के क्या फायदे हैं?

Answer 3

हालाँकि आप इसे करने का निर्णय लेते हैं, सुनिश्चित करें कि आप पहले पृष्ठ को डिफ़ॉल्ट के साथ प्रस्तुत करते हैं:

<input type="submit" value="submit" />

... और फिर अपने कस्टम बटन के साथ इनपुट तत्व को स्वैप करने के लिए jQuery का उपयोग करें जिसमें ऑनक्लिक इवेंट है। यह सुनिश्चित करेगा कि जावास्क्रिप्ट सक्षम किए बिना लोग अभी भी आपकी साइट का उपयोग करने में सक्षम होंगे।

उपयोगिता पहले आना चाहिए!

Comments

क्यों? <button type="submit">इसके बजाय का उपयोग करें , क्योंकि इसमें बाल तत्व हो सकते हैं और आपको पसंद किया जा सकता है।

— पलकविहीनता

Answer 4

आप मेरे द्वारा विकसित इस jquery प्लगइन का उपयोग कर सकते हैं। बटन कहीं भी व्यावहारिक रूप से काम करते हैं और चूंकि यह एक प्लगइन है, उन्हें स्थापित करना और कॉन्फ़िगर करना आसान है।

http://swizec.com/code/styledButton/

Answer 5

2011 के लिए इस पोस्ट को अपडेट करना:

Google ने जुलाई 2011 में अपनी सेवाओं में एक नया डिज़ाइन लॉन्च किया। नए Google बटन यहां पुनः बनाए गए हैं: http://pixify.com/blog/use-google-plus-to-improve-your-ui /

नए बटन इस तरह दिखते हैं:

Comments

+1। छवियों या अतिरिक्त तत्वों का उपयोग करके नकली ग्रेडिएंट्स की कोशिश करने के बजाय, इस तरह के उत्तर का उपयोग करते हुए ग्रेडिएंट्स का उपयोग करें, जहां संभव हो और पुराने ब्राउज़रों पर एक उचित रंग में वापस आ जाएं।

— मिकमेकसाना

Answer 6

आप बटन पर सीएसएस देखने के लिए फ़ायरफ़ॉक्स के लिए फायरबग प्लगइन का उपयोग करने की कोशिश कर सकते हैं ।

Answer 7

आपके पास सबसे बड़ी समस्या यह है कि यह ब्राउज़र में काम करेगा।

मुझे लगता है कि आपको दृढ़ता से विचार करना चाहिए कि क्या आपको वास्तव में इसकी आवश्यकता है ... Google को हिरन के लिए बहुत सारे धमाके मिलते हैं, क्योंकि बहुत सारे बटन और भाषाएं जिनकी उन्हें आवश्यकता होती है; मुझे संदेह है कि अधिकांश साइटें और एप्लिकेशन एक छवि का उपयोग करने के साथ-साथ बंद हो जाएंगे।

एक ओपन-सोर्स घटक एक अच्छा विचार है, हालांकि: व्यापक रूप से धन और प्रयास का प्रसार करें।

Answer 8

यहां अधिकांश कार्य संभवतः डिजाइन नहीं होंगे - वे पद पहले से ही एक उत्कृष्ट हाउ-टू के लिए ढाल प्रभाव हैं।

समस्या यह सभी ब्राउज़रों में काम कर रही है, या अधिक विशेष रूप से बकवास के विचित्र ढेर जो IE6 और IE7 हैं।

मुझे लगता है कि आप एक मानक बटन के साथ सही ट्रैक पर हैं जो jQuery के साथ फिर से लिखा गया है - इस तरह आप स्क्रीन पाठकों के लिए अभी भी सुलभ होंगे और वास्तव में पुराने ब्राउज़रों में अच्छी तरह से नीचा दिखा सकते हैं।

HTML के लिए मुझे लगता है कि आपका सबसे अच्छा शर्त यह है कि प्रत्येक ब्राउज़र के साथ Gmail पर जाएं और देखें कि HTML क्या उत्पन्न हुआ है - मुझे यह IE6, IE7 के लिए पूरी तरह से अलग होने की उम्मीद है, (यह भी निर्भर करता है कि उन्हें quirks-mode की आवश्यकता है) और बाकी सब कुछ ।

Comments

मुझे पूरी तरह से संदेह है कि Google ब्राउज़र है IE IE बटन आउटिंग के लिए।

— 22

Answer 9

ये क्लोजर लाइब्रेरी के हिस्से के रूप में जारी किए गए थे : बटन डेमो देखें

Answer 10

वेब डेवलपर टूलबार सीएसएस मेनू है जो आपको बताएगा कि क्या सीएसएस एक आइटम के लिए लागू किया जाता है के तहत एक दृश्य शैली जानकारी नहीं है। उस मेनू में एडिट सीएसएस फीचर भी है जो पेज को कैसे प्रभावित करता है यह देखने के लिए आपको सीएसएस को मक्खी पर बदलने देगा।

Comments

मुझे इस तरह की चीज़ों के लिए फ़ायरबग बेहद उपयोगी लगता है - सीएसएस को लागू करने और लाइव परिवर्तनों को देखने के लिए।

— इलेमा

मैं फायरबग का उपयोग भी करता हूं, लेकिन चूंकि इसका अपना इंजन है इसलिए यह थोड़ा वजनदार हो सकता है। टूल बार बहुत हल्का वजन है और मेरी राय में उपयोग करने में आसान है।

— Mykroft

Answer 11

क्लोजर लाइब्रेरी की लिंक वाली पोस्ट लागू नहीं होती है। क्लोजर लाइब्रेरी के हिस्से के रूप में जारी किया गया था जो ग्रेडिएंट के साथ बटन का उपयोग करता है ।

सूचीबद्ध अन्य समाधान बेकार हैं। आप वहां से नहीं जा सकते हैं और इन बटन को हर ब्राउज़र पर काम कर रहे हैं जीमेल ने उन्हें काम कर रहा है। बोमन अपनी साइट पर जो दिखाता है वह काम नहीं कर रहा है।