वीडियो स्कैन 2025, अप्रैल

निक के दृष्टांत में प्रमुखों के लिए तीन अलग-अलग परतें थीं। वे केवल थोड़े भिन्न रूप हैं। हम एक एनीमेशन के साथ छवियों को स्वैप कर सकते हैं "

जैसा कि मैं इस डिजाइन पर काम कर रहा था, jQuery 1.8 जारी किया गया था। यह इस तथ्य पर भरोसा करने के लिए सिर्फ एक त्वरित वीडियो है कि इस तरह की बात तब होती है जब आप साइट्स विकसित करते हैं "

हमारे पास बुनियादी गैलरी हेडर है, लेकिन यह छोटे नीले लोगों को याद कर रहा है जो एरिका ने मूल चित्रण में रखे थे। हमने इसके बारे में बात की थी "

हमें अभी-अभी गैलरी के लिए कस्टम हेडर मिला है, इसलिए जब हम पर होते हैं, तो एक और कस्टम हेडर जोड़ते रहते हैं। यह एक द्वारा किया गया था "

मुखपृष्ठ से परे साइट के सात अलग-अलग मुख्य क्षेत्र हैं। इसलिए, मैंने डिज़ाइन करने के लिए सात अलग-अलग चित्रकारों को काम पर रखा। यह पहला हम है "

अब तक, हम किसी भी प्रकार के संस्करण नियंत्रण का उपयोग किए बिना स्थानीय स्तर पर कोड परिवर्तन कर रहे हैं। इस साइट की जटिलता बढ़ने के साथ, यह "

हम उत्तरदायी डिजाइन पर एक अच्छी शुरुआत है। सबसे छोटे स्क्रीन के आकार का मेनू 2x4 ग्रिड में टूट जाता है। यह स्क्रीन पर अच्छी तरह से फिट बैठता है, लेकिन "

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

जिसमें हम उन मुद्दों का पता लगाते हैं जो हम कॉलम लेआउट को अच्छी तरह से लोड करने के लिए प्राप्त कर रहे थे। यह फिक्स सीएसएस को हटाने के लिए था जो "

हम गैलरी क्षेत्र के लेआउट में खुदाई करना शुरू करते हैं, जो कि कुछ ऐसा है जो इस रीडिज़ाइन प्रक्रिया की शुरुआत के बाद से मेरे दिमाग में है। अधिकतर"

गैलरी के लिए हमारे पास ग्रिड लेआउट है। दुर्भाग्य से इसे लोड करना थोड़ा अचानक और विस्की है। ऐसा इसलिए है क्योंकि CSS3 के कॉलम "

हमने पहले ही पृष्ठों को चुराकर थोड़ा समय बिताया है ताकि हमारा नेविगेशन काम करे (वीडियो # 030) और आप साइट के चारों ओर क्लिक कर सकते हैं, लेकिन उन सब पर क्या है "

सीएसएस-ट्रिक्स पर मतदान की एक लंबी परंपरा है। वे मज़ेदार हैं, अच्छे महत्वपूर्ण डेटा इकट्ठा करते हैं, और साइट पर लोगों के कनेक्शन को बढ़ाते हैं। सगाई FTW! "

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

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

खोज डिज़ाइन तब तक ठीक काम करता है जब तक हम अपने "बेबी बियर" (छोटे मोबाइल) के आकार को तोड़ नहीं लेते। हमें वहां कुछ अलग करना होगा। हम कुछ कमरा बनाते हैं ”

मुझे लगता है कि इस श्रृंखला में पहली बार, हम सीधे ब्राउज़र में काम करके कुछ नई चीजों को जोड़ने जा रहे हैं (फ़ोटोशॉप में नहीं)

एक बहुत ही संकीर्ण डेस्कटॉप ब्राउज़र को निचोड़ना आपको एक अस्पष्ट समझ दे सकता है कि एक उत्तरदायी डिज़ाइन कैसे काम करता है, लेकिन यह "एक सटीक" नहीं है

हमारे पास मौजूद विज्ञापन बड़ी / डेस्कटॉप आकार की स्क्रीन के लिए बहुत अच्छा है, लेकिन यह छोटे स्क्रीन पर बहुत जल्दी विफल होने लगता है। हमारे पास कुछ ब्रेकप्वाइंट पहले से हैं ”

हमने नियमित रूप से एक बटन का रूप बनाया है, लेकिन एक 3D बटन जैसे "पुश" स्थिति के लिए भीख माँग रहा है। हम जो करते हैं वह एक गहरा रंग जोड़ देता है "

हम HTML में कूदने के इरादे से शुरू करते हैं और शीर्ष ट्रीहाउस विज्ञापन को सीडिंग करते हैं जिसे हमने अभी डिज़ाइन किया है, लेकिन शुरू होते ही निश्चित रूप से पटरी से उतर जाते हैं "

हमारे पास पृष्ठ के शीर्ष पर ट्रीहाउस विज्ञापन के लिए मार्कअप है, लेकिन हमारे पास करने के लिए कुछ स्टाइलिंग कार्य हैं। हम पेड़ के ग्राफिक से ही शुरू करते हैं। हम "

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

खोज क्षेत्र को पूरा करने के लिए हमारे पास थोड़ा और काम है। हम सिर्फ एक सेकंड के लिए अलग हो जाते हैं क्योंकि मुझे लगता है कि हमने त्रि-आयामी को नहीं जोड़ा था "

हम उठाते हैं जहां हमने वीडियो # 034 में छोड़ा और खोज क्षेत्र का निर्माण जारी रखा। इस बार हम खोज के "खुले" राज्य पर ध्यान केंद्रित कर रहे हैं, इमारत "

हम खोज पर काम करने से थोड़ा विराम लेते हैं ताकि थोड़ी सी समस्या को हल किया जा सके। "फ़ेसट" "अनस्टीडल्ड टेक्स्ट का फ्लैश"। यह वह घटना है जहाँ @ फॉन्ट-फेस "

अब जब हमने फ़ोटोशोप कर लिया है तो हम खोज क्षेत्र के साथ जो हासिल करने की उम्मीद करते हैं, हम उसे HTML और CSS के साथ बनाने के बारे में निर्धारित करते हैं। हमारे पास पहले से ही हमारा आइकन फ़ॉन्ट है "

CSS-Tricks पर बहुत सारी सामग्री है। यह उन चीजों में से एक है जो डिजाइन को थोड़ा चुनौतीपूर्ण बनाता है। जबकि हम डिजाइन से साफ रह सकते हैं, हम "

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

इस सुपर क्विक वीडियो में हम सभी CSS में जोड़ते हैं, यह सुनिश्चित करने के लिए कि मुख्य पृष्ठ में वर्तमान पृष्ठ आइटम हाइलाइट किया गया है जब वह पृष्ठ "