👩🏽‍🤝‍👩🏻 🙌🏾 🚊 एक उदाहरण - छवियों और जावास्क्रिप्ट के बिना CSS3 पर एक घड़ी 🤛 😥 🦍

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

शुरुआत के लिए, वास्तविक उदाहरण स्वयं codepen.io या cssdesk.com पर है

HTML से मेरे परिचय के बारे में

मैं 1999 में HTML से परिचित हुआ और तब से, मैं वेब के लिए एक नियम के रूप में, एक शौक की तरह, और बहुत ही कम, किसी तरह के बड़े काम करने वाले प्रोजेक्ट के हिस्से के रूप में विकास कर रहा हूं। 2012 के बाद से, मैंने फ्रीलान्स में काम करना छोड़ दिया, और वेब के लिए विकास को बढ़ावा देना सबसे अधिक मांग वाले कौशल में से एक बन गया है।

घंटे

और इसलिए यह हुआ कि, नए साल की छुट्टियों पर पुरानी सीडी के ढेर में खुदाई करते हुए, मुझे वहाँ अपना पहला पृष्ठ मिला, जिस पर मैंने HTML का अध्ययन किया और जिसने मुझे 1999 में संस्थान में स्वचालित रूप से क्रेडिट प्राप्त करने की अनुमति दी। उस पर एक घड़ी के साथ एक जावा एप्लेट डाला गया था।

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

आइकिया

समय-समय पर आईकेईए का दौरा करते समय, मैंने अक्सर संख्याओं पर ध्यान देने योग्य फ़ॉन्ट के कारण आईकेईए पुगग घड़ी (दाईं ओर तस्वीर) पर ध्यान दिया। यही कारण है कि सबसे पहले यह ऐसी घड़ियाँ थीं जिन्हें लेआउट के रूप में चुना गया था, लेकिन फिर मुझे एक अन्य निर्माता से एक समान घड़ी मिली और उनके पास अब मामले का एक बेवकूफ कदम नहीं था।

फ़ॉन्ट आकार के साथ आकार और स्केलिंग

मैंने तुरंत निर्णय लिया कि स्केलिंग की संभावना को छोड़ने के लिए इसे पिक्सल से नहीं जोड़ा जाएगा।
ब्याज आदर्श होगा, लेकिन एक समस्या थी। चूंकि यह ग्राफिक्स का उपयोग नहीं करने का निर्णय लिया गया था, डायल पर संख्याओं को एक फ़ॉन्ट की आवश्यकता थी, और ब्लॉक आकार के प्रतिशत के रूप में फ़ॉन्ट आकार सेट करना संभव नहीं होगा।
इसलिए, सब कुछ उन्हें ईएमआई इकाइयों में लगाया गया था। इस प्रकार, आप ब्लॉक के लिए फ़ॉन्ट आकार सेट करके वांछित घड़ी का आकार निर्धारित कर सकते हैं। प्रारंभ में, घड़ी को 100em x 100em में मैप किया गया और फ़ॉन्ट-आकार सेटिंग के माध्यम से स्केल किया गया।
बाद में, स्केलिंग कीड़ों के कारण और कोडपेन.आईओ पर प्रदर्शन उद्देश्यों के लिए, मैंने "आंतरिक पैमाने" को घटाकर 10em कर दिया।

मैजिक बॉक्स-शैडो

क्रोम फ्रेम के प्रभाव के लिए, तीन नेस्टेड कंटेनरों की आवश्यकता थी: फ्रेम के बाहरी भाग के लिए पहला, फ्रेम के अंदर के लिए दूसरा, और तीसरा डायल का आधार था।

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

<div id="a"><div id="b"><div id="c">...</div></div></div>

 #a { box-shadow: inset . ai1, inset . ai2,   ao1,   ao2; } #b { box-shadow: inset . bi1, inset . bi2,   bo1,   bo2; } #c { box-shadow: inset . ci1, inset . ci2,   co1,   co2; }

क्रोमियम चढ़ाना की कम से कम संभावना को प्राप्त करने के लिए, मुझे एक दर्जन से अधिक तस्वीरों का अध्ययन करना पड़ा, न कि एक घंटे का। मैंने सीएसएस में परिणाम नहीं दिया है, कोई भी परिणामी कोड के साथ प्रयोग कर सकता है, उदाहरण के लिए, codepen.io पर

टैग लगाएं

बहुत सी संस्थाओं का उत्पादन नहीं करने और सीएसएस के न्यूनतम नियमों से संतुष्ट होने के लिए, पांच ब्लॉक वाले HTML मार्कअप को हैक किया गया है।

 <b><i><i><i><i></i></i></i></i></b>

ये पांच टैग 30 से 34 तक एक ही समय में 0 से 4 और एक ही समय में मिनट के निशान का प्रतिनिधित्व करते थे। टैग के नेस्टिंग ने उन्हें अपनी धुरी के बारे में सीएसएस में केवल एक नियम से घुमाया।

 b > i, i > i { transform:rotate(6deg) ; }

लेबल खुद ऊपरी (0-4) और निचले (30-34) सीमाओं का उपयोग करके तैयार किए गए थे। डिजाइन को देखते हुए, हमें इन पांच टैगों से निम्न आउटपुट मिला:

टैग के शेष पाँच खंडों को एक दूसरे में रखकर एक समान तरीके से रखा गया था:

 <b><i>…<b><i>…<b><i>…<b><i>…<b><i>…<b><i>…</b></b></b></b></b></b>

तदनुसार, निम्नलिखित नियम ने शेष ब्लॉकों को सही स्थानों पर रखा

 b>b { transform: rotate(30deg) ; }

लेकिन आश्चर्यजनक रूप से, मेरे उदाहरण की शर्तों में इस तरह के एक सरल कोड "एक कठिन स्थिति में डाल दिया" अधिकांश ब्राउज़र:

हैरानी की बात है, सही परिणाम केवल IE9 में दिखाया गया था। IE10 में, कीड़े पहले से ही पाए गए हैं।

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

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

ब्राउज़र बग्स को दरकिनार करने के लिए, मुझे ड्राइंग लेबल के अधिक अनाड़ी कार्यान्वयन का उपयोग करना पड़ा। उसी समय, मैंने अपने खेल के मैदान में संस्करणों के बीच स्विच करने की क्षमता को बनाए रखा, एक तरफ काम करने वाले संस्करण को प्रदर्शित करने और दूसरी तरफ पाई जाने वाली समस्याओं को।

आंकड़े

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

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

छवि को वास्तविक फ़ॉन्ट में बदलने के लिए, एक अच्छा गाइड "कैसे अपना खुद का प्रतीक फ़ॉन्ट बनाएं" , इसके लिए सॉफ्टवेयर की निम्नलिखित श्रृंखला का उपयोग करने की पेशकश की गई थी :

[छवि] -> इंकस्केप -> [एसवीजी फॉन्ट] -> freefontconverter.com -> [टीटीएफ फ़ॉन्ट] -> फोंटकिरेल.com/fontface/generator -> [वेब फ़ॉन्ट सेट]

फ़ॉन्ट काफी सुंदर निकला, लेकिन एक समस्या के साथ - इंकस्केप की ख़ासियत के कारण, सभी पत्र एक ही चौड़ाई के थे। टीटीएफ फ़ॉन्ट को मुफ्त टाइप 3.2 लाइट फ़ॉन्ट संपादक का उपयोग करके समस्या को हल किया गया था।

बाद में, क्रोम ने मुझे एक अप्रत्याशित आश्चर्य के साथ प्रस्तुत किया और मुझे फ़ॉन्ट मुद्दे पर लौटना पड़ा। लेकिन इसके बारे में अधिक नीचे।

तीर

घंटे और मिनट के हाथों को लागू करने में कोई कठिनाई नहीं थी, और समय के अनुसार डायल पर हाथों की आवाजाही के लिए, जैसा कि मूल रूप से योजना बनाई गई थी, तीर की बारी का CSS3 एनीमेशन क्रमशः 12 * 60 * 60 सेकंड और 60% की अवधि के लिए उपयोग किया गया था।

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

steps(60) साथ animation-function सी linear संपत्ति को बदलना जो मैं चाहता था, उसके करीब था, लेकिन समय के साथ मैंने नोटिस करना शुरू कर दिया कि दूसरे हाथ को एक निशान से दूसरे स्थान पर टेलीपोर्ट करना अप्राकृतिक दिखता है।

असली के करीब दूसरे हाथ की गति का एहसास करने का सबसे सरल विकल्प एनीमेशन के लिए जिम्मेदार @keyframes ब्लॉक का विस्तार करना होगा, जहां प्रत्येक दूसरे निशान पर तीर के रुकने का वर्णन करना आवश्यक होगा।

लेकिन आलस्य प्रगति का इंजन है। ऊपर, लेबल के लिए, मैंने पहले ही एक तत्व के परिवर्तन का उपयोग किया है जिसके भीतर एक और रूपांतरित किया गया था। और यह मुझे निम्नलिखित विचार के लिए प्रेरित करता है:

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

एक घूर्णन फ़ंक्शन तीर को स्वयं चेतन करने के लिए सेट किया जाता है, दूसरा कंटेनर को चेतन करने के लिए। नतीजतन, स्क्रीन के सापेक्ष तीर का आंदोलन फ़ंक्शन इन दोनों का योग है, अर्थात, मुझे जिस चरण फ़ंक्शन की आवश्यकता है, और इस तरह के आंदोलन के लिए जिम्मेदार कोड को कई लाइनों में रखा गया है।

 .container { animation: tick 1s normal infinite linear; } @keyframes tick { 0% { transform: rotate(0deg); } 8.3% { transform:rotate(5.5deg); } 100% { transform: rotate(0deg); } } .arrow { animation: a360 60s normal infinite linear; } @keyframes a360 { 0% { transform: rotate(0deg) } 100% { transform: rotate(360deg) } }

अद्यतन:
एक प्रतीत होता है सरल तीर आंदोलन के प्रदर्शन के बारे में शिकायतों के कारण, एक छोटा सा पुनर्विक्रय किया गया था और सभी रैखिक एनीमेशन कार्यों को एक सन्निकटन द्वारा बदल दिया गया था। उदाहरण के लिए, मिनट के हाथ के एनीमेशन कोड में, linear बजाय linear अब आप steps(3600) फ़्लंट कर सकते हैं।

छाया

तीरों को लागू करके, मैंने तुरंत बॉक्स-छाया और पारदर्शिता का उपयोग करके उनके लिए एक छाया जोड़ा। दूसरे हाथ की सौतेली चाल के दौरान एक छाया के साथ एक अप्रिय बग के अलावा, केंद्र में छाया लगाने की निम्नलिखित अप्रिय तस्वीर की खोज की गई थी।

इसलिए, बॉक्स-छाया को हटा दिया गया था, और छाया को छाया के भरण रंग के साथ तीरों की एक प्रति बनाकर कार्यान्वित किया गया था और संख्याओं और लेबलों के नीचे रखा गया था। ऐसा करने के लिए, मुझे कुछ टैग और सीएसएस नियमों के एक जोड़े को जोड़ना पड़ा।

हम वर्तमान समय दिखाते हैं

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

खेल का मैदान

बिना फिक्स के सीएसएस 3 परिणामी रूप से छोटा हो गया - केवल 200 से अधिक नियम, और कोई कॉपी-पेस्ट कोड नहीं। HTML कोड भी काफी कॉम्पैक्ट और प्रतिमान के अनुरूप है: एक इकाई - एक टैग।

लेकिन यह महसूस करते हुए कि सभी ब्राउज़रों में काम करने वाला परिणाम शुद्ध CSS3 से काफी अलग है, मैंने एक छोटा परीक्षण पृष्ठ बनाया, जहां घड़ी के अलावा, आप देख सकते हैं और मूल्यांकन कर सकते हैं कि ब्राउज़र बिना किसी सुधार के संस्करण को कितनी अच्छी तरह से संभालता है।

वास्तव में खेल का मैदान @ github- पृष्ठ

संगतता और baaaaagi।

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

अन्य ब्राउज़रों के लिए, ऐसा लगता है कि नई सीएसएस कार्यक्षमता को शुरू करने की गति ने परिणाम की गुणवत्ता (बदतर के लिए) को काफी प्रभावित किया, जो IE10 को भी प्रभावित करता है।

कई ब्राउज़रों के लिए एक सामान्य बग (हम इसे मेटा-बग कहेंगे) जो मैंने ऊपर वर्णित परिवर्तनों की गणना के साथ किया है। जोड़ने लायक एकमात्र बात यह है कि इन ब्राउज़रों में अंतर्निहित स्केलिंग का उपयोग करने के परिणामस्वरूप, हमें और भी महत्वपूर्ण कलाकृतियां मिलती हैं।

दूसरा "मेटा-बग", जो IE को छोड़कर सभी ब्राउज़रों के लिए सामान्य निकला, घड़ी के आकार को बदलते समय हाथों के एनीमेशन का उल्लंघन है। बग पूरी तरह से पुन: पेश करता है, जब हाथों के एनीमेशन के साथ, हम CSS3 संक्रमण के साथ घड़ी के आकार को बदलते हैं।

वेबकिट (क्रोम)

प्रेस्टो अंतिम संस्कार के बाद, यह कहा जा सकता है कि तीन शेष वेबकिट - सबसे अमीर CSS3 कार्यक्षमता इंजन के रूप में, यह इस उदाहरण के परिणामों के अनुसार सबसे छोटी गाड़ी भी है।

आकार के साथ बैगा

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

फ़ॉन्ट आश्चर्य

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

हेरफेर करके यह पाया गया कि इसका कारण संख्याओं के पाठ के भीतर तीरों का एनीमेशन था। इंटरनेट के चारों ओर लंबे समय तक भटकने से बेकार विशिष्ट सीएसएस गुणों का एक गुच्छा मिला, जो एंटी-अलियासिंग को नियंत्रित करने वाले थे। यही है, चेहरे पर विंडोज के तहत सिर्फ क्रोम बग है।

सौभाग्य से, मैं विंडोज के लिए फोंट प्रस्तुत करने के लिए क्रोम द्वारा उपयोग किए जाने वाले पुस्तकालयों पर एक दिलचस्प लेख भर आया था। इसने मुझे एक Truetype फ़ॉन्ट को पोस्टस्क्रिप्ट फ़ॉन्ट में बदलने की कोशिश करने का विचार दिया - और तूफान! चौरसाई फिर से दिखाई दी।

पोस्टस्क्रिप्ट फॉन्ट के लिए, ट्रू टाइप कूपों का पोस्टस्क्रिप्ट कर्व्स में रूपांतरण टाइप 3.2 लाइट फॉन्ट एडिटर का उपयोग करके किया गया था, और पेज से कनेक्ट करने में सक्षम होने के लिए, फ़ॉन्ट को ओपन टाइप प्रारूप में सहेजा गया था।

नाटक के दौरान, यह भी पता चला कि क्रोम विंडोज के लिए, IE के रूप में समान सिस्टम लाइब्रेरीज़ का उपयोग करते हुए, उदाहरण के लिए, ओपन टाइप में निर्दिष्ट किर्निंग टेबल पर ध्यान नहीं दिया, जो इसे फ़ायरफ़ॉक्स से अलग नहीं करता है।

परिणाम

अप्रत्याशित रूप से बड़ी राशि के बाद, मैं अभी भी एक प्रतीत होता है कि सरल डेमो को समाप्त करने में कामयाब रहा, अपना खुद का छोटा खेल का मैदान बना और इस लेख को लिख दिया।

मेरी राय में, CSS3 के संदर्भ में क्या पक्ष है:
• दूसरे हाथ सेकंड सेकंड
• छद्म क्रोम घड़ी रिम
• इन-प्लेस टैगिंग इन ट्रांसफॉर्मिंग: रोटेट
• सामग्री के लिए फ़ॉन्ट-आकार सेट करके घड़ी का आकार बदलने की क्षमता।
• बड़ी सीएसएस फ़ाइल आकार (क्रॉस-ब्राउज़र संगतता को छोड़कर)
और सीएसएस कोड में डुप्लिकेट टुकड़ों की कमी
• छोटा एचटीएमएल, एक इकाई - एक टैग

संदर्भ

डेमो @ codepen.io
डेमो @ cssdesk.om
खेल का मैदान @ जीथूब पेज
गिथब परियोजना

जब मैंने अपना उदाहरण विकसित करते हुए पाया तो पहली सीएसएस घड़ी कार्यान्वयन में से एक:
2009 में पॉल हेस
2010 में Zoltan Hawryluk
Lennart Schoors 2010 में

और निश्चित रूप से मैं टिप्पणियों का इंतजार कर रहा हूं और सवालों के जवाब देने के लिए तैयार हूं।

अद्यतन: उदाहरण के प्रदर्शन में थोड़ा सुधार हुआ है, ऊपर विवरण।

अद्यतन 2: एक उदाहरण धीरे-धीरे इंटरनेट पर फैलता है
और कभी-कभी दिलचस्प ट्वीट इस तरह से पॉप अप करते हैं:

एक उदाहरण - छवियों और जावास्क्रिप्ट के बिना CSS3 पर एक घड़ी