यहाँ एक सुंदर वेबसाइट है: यह मास-ड्राइवर के सदाबहार प्रकार के परिवार के लिए एक प्रकार का नमूना है एमडी निक्रोम. इसमें बहुत सारे निफ्टी एनिमेशन और ग्राफिक्स हैं जो अंदर की सभी विशेषताओं को समझाते हैं...
यदि आप सोच रहे हैं कि ये एनिमेशन कैसे काम करते हैं, तो वे वास्तव में स्टाइल वाले हैं <video>
तत्वों।
बहुत सारे बेहतरीन ग्राफिक डिज़ाइन स्पर्श भी हैं, जैसे कि नीचे दिए गए अक्षर कैसे पीछे हटते हैं और फीके पड़ जाते हैं ...
CSS का वह छोटा सा हिस्सा साफ-सुथरा है। यह सुनिश्चित करता है कि प्रत्येक <h1>
के साथ एक लाइन पर रहता है white-space
, फिर उन पर छिपा हुआ ओवरफ़्लो सेट करता है ताकि हेडिंग ट्रेल ऑफ़ हो जाए. लुप्त होती एक रैखिक ढाल की सौजन्य है जो पारदर्शिता को शामिल करती है। ढाल वास्तव में एक है mask-image
इस मामले में। यह एक अच्छा रिमाइंडर है कि CSS ग्रेडिएंट्स ब्राउज़र द्वारा जेनरेट की गई छवियां हैं।
h1 { white-space: nowrap; overflow: hidden; -webkit-mask-image: linear-gradient(to right, black 75%, transparent);
}
ऊपर की छवि में आप यह भी देख सकते हैं कि कैसे मास-ड्राइवर फ़ॉन्ट की ओपनटाइप सुविधाओं का विज्ञापन कर रहा है। यह अंशों या वैकल्पिक अक्षरों जैसी चीजें हैं जो आपके टेक्स्ट को सुपरपावर देती हैं। डिफ़ॉल्ट रूप से, ये अनुभाग दिखाते हैं कि सुविधा क्या है, लेकिन जब आप उन पर होवर करते हैं तो वे निम्न कार्य करते हैं:
.element { font-feature-setting: unset;
}
मुझे नहीं लगता कि मैंने कभी इस्तेमाल किया है unset
पहले लेकिन यह इसका उपयोग करने के लिए एक शानदार जगह है—दिखाएं कि सुविधा सामने से कैसी दिखती है और फिर जब आप हॉवर करते हैं तो डिफ़ॉल्ट क्या होता है यह दिखाएं। स्मार्ट सामान।
लेकिन जिस हिस्से ने मेरी आंख को पकड़ा - किक गधा टाइपोग्राफी के अलावा - पृष्ठभूमि है। यह दो भागों से बना है: एक झिलमिलाता एनीमेशन जो पृष्ठ को कागज जैसा दिखता है, और ढाल जो इसके शीर्ष पर खड़ी होती है। और DevTools में खुदाई करने के बाद मैंने महसूस किया कि झिलमिलाता प्रभाव एक PNG छवि है जहाँ background-position
प्रॉपर्टी तस्वीर को GIF की तरह एनिमेट करने के लिए थोड़ा इधर-उधर घुमाती है। तस्वीरों में देखना मुश्किल है, इसलिए यहां एक कॉपीकैट डेमो है जिसे मैंने अपारदर्शिता के साथ बंद कर दिया है ताकि इसे देखना आसान हो सके:
वह प्यारी अस्पष्टता देखें? यह पृष्ठभूमि को एक तरह की... बनावट... देता है, जिसे मैंने लंबे समय से नहीं देखा है, शायद 2008 के बाद से जब हर कोई बटन को वेब पर वास्तविक, एनालॉग बटन जैसा दिखाने की कोशिश कर रहा था। ज्योफ ने उसी तरह की तकनीक को कवर किया कुछ समय पहले जहां आप इसके काम करने के तरीके के बारे में गहराई से जानकारी प्राप्त कर सकते हैं।
इस वेबसाइट के डिज़ाइन का दूसरा भाग पृष्ठभूमि में ढाल है। वे इतने चिकने कैसे हैं? खैर, रदरफोर्ड क्रेज, वेब डिजाइन के इस सरल बिट के पीछे डिजाइनर, एक धागा बनाया यह समझाते हुए कि ब्राउज़र में काम करने के लिए उन्हें यह प्रभाव कैसे मिला। वह बनाया एक ढाल उपकरण जो आपको समान प्रभाव पैदा करने देता है:
रदरफोर्ड लिखते हैं:
परंपरागत सीएसएस ग्रेडियेंट कलर स्पेस के माध्यम से एक सीधी रेखा की साजिश रचते हैं, जो सीधे शुरुआत से अंत रंग तक इंटरपोलेटिंग करते हैं। यह टूल इस ऑपरेशन के लिए बेज़ियर कर्व्स के सिद्धांतों को लागू करता है, जो डिजिटल फोंट का आधार है।
ढाल के साथ 'नियंत्रण बिंदु' शुरू करके, आप इंटरपोलेशन को अधिक सूक्ष्मता से नियंत्रित कर सकते हैं और एक आसान अंतिम परिणाम उत्पन्न कर सकते हैं। टूल तब इस 'बेज़ियर ग्रेडिएंट' का नमूना लेता है ताकि आप CSS में काम कर सकने वाले लीनियर ग्रेडिएंट का निर्माण कर सकें।
रदरफोर्ड ऊपर जो वर्णन कर रहे हैं, उसे के रूप में जाना जाता है "ग्रे डेड जोन" ढालों का, जहां अक्सर एक रेखीय ढाल में यह ग्रे रंग होता है जो बीच में बनता है।
एक और छोटा विवरण जो मुझे लगभग समझ में नहीं आया वह था चिपचिपा नेविगेशन: जब आप पहली बार वेबसाइट को लोड करते हैं तो आप लोगो को और कुछ नहीं देखते हैं, लेकिन फिर जैसे ही आप स्क्रॉल करते हैं, आपको नौसेना दिखाई देगी और यह जगह पर लॉक हो जाती है:
ध्यान दें कि बाद में फॉन्ट के ग्लिफ़ को प्रदर्शित करने के लिए कैसे स्टिकी पोजीशनिंग का उपयोग किया जाता है।
CSS इस तरह की चीज़ को इतना आसान बना देता है। तत्व पर चिपचिपी स्थिति की घोषणा करें, फिर चिपचिपाहट को ऑफसेट करें यदि तत्व एक निश्चित स्थान पर चिपकना शुरू कर दे।
.sticky-thing { position: sticky; top: 75px;
}
चूंकि वे चाहते हैं कि आप पहले अक्षरों पर ध्यान केंद्रित करें और बाकी यूआई पर नहीं, यह नेविगेशन को एक तरफ रखने के लिए बहुत मायने रखता है, केवल तभी जब आपको इसकी आवश्यकता हो। और यह समग्र डिजाइन को अविश्वसनीय रूप से केंद्रित और सीधा महसूस कराता है, शायद शायद ही किसी पर टिप्पणी करने लायक हो, लेकिन जब अधिकांश वेबसाइटें विकर्षणों से भरी होती हैं, तो मुझे लगता है कि इस तरह की शांत वेबसाइटों का जश्न मनाना उचित है।
- विज्ञापन
- सब
- एनीमेशन
- चारों ओर
- बिट
- काली
- ब्राउज़र
- कुश्ती
- पकड़ा
- मृत
- डिज़ाइन
- डिजाइनर
- विस्तार
- डिजिटल
- परिवार
- Feature
- विशेषताएं
- प्रथम
- फोकस
- पूर्ण
- gif
- अच्छा
- ग्रे
- महान
- कैसे
- HTTPS
- की छवि
- को शामिल किया गया
- IT
- लाइन
- भार
- ताले
- प्रतीक चिन्ह
- लंबा
- चाल
- पथ प्रदर्शन
- स्वच्छ
- ओफ़्सेट
- अन्य
- काग़ज़
- चित्र
- संपत्ति
- बाकी
- भावना
- छोटा
- स्मार्ट
- So
- अंतरिक्ष
- Spot
- प्रारंभ
- पहर
- टन
- ऊपर का
- ट्रांसपेरेंसी
- ui
- वेब
- वेबसाइट
- वेबसाइटों
- काम
- कार्य
- लायक