🙆 👼🏻 🧚🏽 हल्के "अगला" बटन की पेशकश की जाती है (थोक, सस्ती) 😂 👩🏽‍🚀 🎉

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

ध्यान आकर्षित करने के लिए चित्र:

(वैसे, जब मैंने बटन पर बड़े पाठ को जोड़ने की कोशिश की, तो मुझे एक दिलचस्प बग मिला, बटन पर पाठ अक्षर "the" को पचा नहीं पाता है।)

पहली इच्छा और क्रिया बटन के संकेतों को पूरी तरह से हटा देना था, क्योंकि पाठ के बीच बटन असंगत दिखता है। बटन को शुरू करने के लक्ष्यों के बारे में सोचने के बाद (ताकि यह एक सरल लिंक से अलग हो और इसका सीएसएस संक्रमण एक साधारण तस्वीर के साथ फीका न हो सके), मुझे एक समाधान मिला जो सभी आवश्यकताओं को पूरा करता है - दोनों कॉम्पैक्ट, पाठ की तरह, और एक बटन की तरह, और सीएसएस संक्रमण के साथ। इसने एक ऐसा समाधान निकाला जो लिंक के पिछले विचार में इतना व्यवस्थित था कि मैंने इसे एक छोटे वीडियो के माध्यम से सभी के साथ साझा करने का निर्णय लिया - ताकि बदलाव दिखे, और न केवल उन उपयोगकर्ताओं के साथ, जिन्होंने ZenComment उपयोगकर्ताओं को स्थापित किया है जिनके पास 22 मई की शाम से ऐसे पारदर्शी बटन हैं (शैलियों का संस्करण) 2.42)। जब बटन एक लिंक था, तो इससे भी बेहतर निकला, बशर्ते कि यह हल्का और पारदर्शी हो।

वीडियो (4 मिनट, कोई आवाज नहीं)।

"अधिक पढ़ें" लिंक (पहले 2 मिनट) और कॉम्पैक्ट पारदर्शी बटन (2:04 से आगे) की साइट पर मानक डिजाइन बटन के डिजाइन और एनीमेशन की तुलना की जाती है। 3:07 - हबरअजैक्स + जेनकॉममेंट के साथ एक ही बटन। यह कुछ अनुमानित विचार देता है कि कार्रवाई में उन और अन्य बटनों को कैसे माना जाता है। स्क्रैंकास्ट को हटाते समय विभिन्न स्क्रॉलिंग देरी के कारण बहुत अनुमानित है। मूल आकार 480 से 640 था, इसलिए यदि आप पूर्ण स्क्रीन को देखते हैं तो बाकी अपेक्षाकृत उच्च गुणवत्ता वाला है।

(स्टाइलिस्ट पर पिछला वीडियो - ज़ेनकॉम के पूर्ववर्ती ने अपना महत्व नहीं खोया है, और अब इसे संगीत के साथ, 8 मिनट: www.youtube.com/watch?v=nBmTcN7mPP.c पर अधिक दिलचस्प बना दिया गया है।)

एक लंबे बटन के मामले में हम क्या देखते हैं:

जब आप माउस पर मंडराते हैं तो क्या होता है:

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

बेशक, एक बड़े बटन के साथ यह स्मार्टफोन पर और बड़े स्क्रीन पर कब्जे वाली जगह के लिए उदार दृष्टिकोण के साथ अधिक आरामदायक महसूस करता है। लेकिन सर्वोपरि क्या है? Habr विकल्प बटन बूटस्ट्रैप शैली है, जहां मैक, Win7 और स्मार्टफ़ोन के साथ संगतता के बीच एक समझौता किया जाता है। हैब के पुराने संस्करण का लिंक बटन और प्रस्तावित एक परस्पर विरोधी आवश्यकताओं की साइट को संतुष्ट करता है, लेकिन किसी भी तरह से अतिरिक्त स्थान पर कब्जा करने का समर्थन नहीं करता है, जो क्लासिक पेज डिजाइन से मेल खाता है और साथ ही सुरक्षा कारणों का एक अतिरिक्त भार वहन करता है।

वीडियो पर प्रस्तुत किए गए मौजूदा बटन डिज़ाइन को रीमेक करना डिज़ाइनर डिज़ाइनर के लिए 20 मिनट से अधिक नहीं है (साथ ही सभी ब्राउज़रों में परीक्षण के लिए कुछ घंटे)। मुझे लगता है कि कई लोग इस प्रकार के बटन की स्थापना का समर्थन करेंगे, और दिन के दौरान बटन के साथ प्रश्न (यदि प्रशासन कोई निर्णय लेता है) हल हो जाएगा।

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

/** haButtons v1_2012-05-22, FF3.6+, Opera11+, Safari5, Chrome, IE9 * Author: spmbt, http://spmbt.habr.ru/ */ @namespace url(http://www.w3.org/1999/xhtml);@-moz-document domain("habrahabr.ru"){ .buttons a.button, .buttons input:disabled:active, .buttons input{padding:0 10px!important} .post .content .buttons{ display:inline-block!important;padding:0!important} .post .content .buttons a.button{ margin-left: 2px!important; padding:0 2px 1px!important; border:0!important; border-radius:2px!important; background:transparent!important; color:#6da3bd!important; box-shadow: 0 0 2px rgba(255,255,255,0.4) inset, 0 0 2px rgba(0,0,0,0.2)!important} .post .content .buttons a.button:hover{background:#f4f4f9!important} .post .content .buttons a.button:visited{color:#b96!important} }

फ़ायरफ़ॉक्स में नहीं इन शैलियों का उपयोग करने के लिए, आपको "@ -मोज़-दस्तावेज़" शब्दों के बाद घुंघराले ब्रैकेट के अंदर नियमों को लेने की आवश्यकता है। फ़ायरफ़ॉक्स के लिए - सभी कोड को नए स्टाइलिश ऐड-ऑन उपयोगकर्ता शैली में कॉपी करें।

(एक अन्य बग रिपोर्ट, बहुत बग के साथ बीआर के समान है: कोड में "@" अक्षर <hh = ...) में बदल जाते हैं

अवसर पर, डिजाइन के विषय में - एक घोषणा। डिजाइनरों द्वारा पारित! और अक्सर पढ़े गए हबर के डिजाइन के प्रति उदासीन नहीं। सामाजिक रूप से उपयोगी कार्यों में 2 काफी गंभीर हैं।
1. Habr का नया डिजाइन , अनौपचारिक, मौजूदा से बंधा हुआ नहीं है। इसे 3 महीने में लागू करने की योजना है।
2. ZenComment उपयोगकर्ता - शैली डिजाइन - थोड़ा रंग सुधार, शायद कुछ और। इसे तत्काल लागू किया जा सकता है।

(पोस्ट को हब-ऑफॉपिक "हबराब" में नहीं रखा गया था ताकि अनधिकृत उपयोगकर्ता जो "नेक्स्ट" बटन तक पहुंच सकें, शैली का उपयोग कर सकें।)

हल्के "अगला" बटन की पेशकश की जाती है (थोक, सस्ती)

More articles: