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

टिप्पणियों के लिए डिजाइन बहुत सरल लग सकता है। और यह है! लेकिन मुझे लगता है कि सरल इस मामले में प्रभावी है। टिप्पणियाँ सीएसएस-ट्रिक्स का इतना महत्वपूर्ण हिस्सा हैं "

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

हम शुरू करते हैं कि मैंने कुछ महत्वपूर्ण काम किए हैं, जो पर्दे के पीछे से किए गए थे, जिनमें से कुछ चीजों को करने की जरूरत थी। बाकी हिस्सों में जोड़ने की तरह "

हम साइट के स्निपेट्स क्षेत्र के मुखपृष्ठ का निर्माण करने के बहुत करीब हैं। तुरंत, हम चीजों को तोड़ना शुरू करते हैं और अधिक सामान प्राप्त करते हैं "

स्निपेट्स क्षेत्र "किए गए" के लिए डिज़ाइन के साथ - अब हम कुछ अन्तरक्रियाशीलता में स्थानांतरित कर सकते हैं (पढ़ें: जावास्क्रिप्ट)। हम लिंक पर एक सुपर लंगड़ा रोलओवर जोड़ते हैं "

अब हमारे पास स्निपेट्स क्षेत्र के मुखपृष्ठ के लिए काम करने के लिए एक फ़ोटोशॉप डिज़ाइन है। यह पहले की तुलना में बहुत अधिक ब्राउज़-सक्षम है, लेकिन इंद्रधनुष रखता है "

स्निपेट्स क्षेत्र में गोता लगाने का समय! अर्थात्, इसका वास्तविक सामग्री क्षेत्र। हमारे पास पहले से ही हेडर है। स्निपेट्स क्षेत्र बहुत लोकप्रिय है। "

इस पेंचकस में हम पंचांग खंड को लपेटते हैं। पंचांग में एक बहुत स्पष्ट पदानुक्रम है। यह जाता है: होम> पंचांग होम> संपत्ति या चयनकर्ता> "

हम यहाँ सिर्फ एक किशोर सा आगे कूदते हैं। यह एक बहुत ही व्यापक पेंचकस श्रृंखला है, लेकिन यह केवल 40 घंटे या इससे अधिक है और निश्चित रूप से यह वास्तविक परियोजना है "

हम पहले से ही स्थानीय डोमेन (v10.whatup) पर स्थानीय रूप से काम कर रहे हैं। अब वर्डप्रेस में जाने का समय आ गया है। हम स्थानीय स्तर पर काम करते रहेंगे ”

हमारे पास इस पृष्ठ आउटपुट पर आवश्यक सभी सामग्री है और हमारे पास शीर्ष लेख है। अब हम CSSin की सामग्री को उस डिजाइन में शुरू कर सकते हैं जो हमारे पास है "

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

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

इस स्क्रैंकेस्ट में हम काफी हद तक नारंगी "फोटोस्टार" से निपटते हैं और पाद पर हावी होते हैं। हम फ़ोटोशॉप में एक अलग फ़ाइल में स्टार बनाते हैं, इसलिए हम बना सकते हैं "

Alamanc का हेडर आया है, इस बार Giovanni Difeterici से। हम बहुत सारी तकनीकों का उपयोग करते हैं जिन्हें हमने शुरू करने के लिए पहले ही स्थापित कर लिया है ”

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

पाद के निर्माण के इस अंतिम पेंचकस में, हम नीचे के पाद लेख पर काम करते हैं जहाँ कोडपैन और शॉपटॉक क्षेत्र हैं। हमें HTML को बदलना होगा "

इस पेंचकस में हम पाद के शीर्ष भाग में लिंक के नीचे की रेखाओं पर ध्यान केंद्रित करते हैं। हमें लगता है कि कौन सी चीजों का पता लगाना चाहिए।

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

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

इससे पहले कि हम वास्तव में इसका निर्माण कर रहे हैं, फोटोशॉप के अंतिम चरण में हम विशेष रूप से पाद लेख के बारे में करेंगे। इस पेंचकस में हम "

हम फ़ोटोशॉप में पाद लेख के लिए एक डिज़ाइन बनाने पर काम कर रहे हैं। क्विक रिमाइंडर: मैं फ़ोटोशॉप में काम करता हूं क्योंकि मैं वहां कूदने से पहले अधिक रचनात्मक महसूस करता हूं "

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

हम उस महान यात्रा पर चलते हैं जो पाद है! CSS-Tricks में हमेशा एक बड़ा फैंसी फूटर होता है और यह डिज़ाइन कोई अपवाद नहीं होगा। यह विशुद्ध रूप से नहीं है ”

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

साइट में एकीकृत होने के लिए हमारे पास एक और बीएसए ज़ोन है। यह थोड़ा आसान होना चाहिए क्योंकि हमारे पास पहले से ही जावास्क्रिप्ट जगह है और यह सिर्फ "

हमारे पास यह देखने का एक तरीका है कि हम कैसे अपने BuySellAds क्षेत्र को देखना चाहते हैं, तो चलिए इसे वास्तविक रूप में बनाते हैं। BuySellAds वेबसाइट हमें वह कोड प्रदान करती है जिसकी हमें आवश्यकता है "

हमारे कस्टम फ़ोरम हेडर से अब केवल एक चीज गायब है जो वास्तव में "फ़ोरम" कहती है! निक ने एक हाथ पकड़ कर संकेत किया जिसका मतलब था "

अब जब हम जानते हैं कि हम किस क्षेत्र के साथ काम कर रहे हैं, तो हम फ़ोटोशॉप में वापस जाते हैं और इस बात की नकल करते हैं कि हम इन विज्ञापन क्षेत्रों को कैसे देखना चाहते हैं। हमारे पास एक मिसाल है "

जैसा कि आप जानते हैं, सीएसएस-ट्रिक्स के कुछ विज्ञापन मुख्य ट्रीहाउस प्रायोजक की तरह "सेल्फ मैनेज" होते हैं। मैंने इसे लिया क्योंकि यह सिर्फ एक है "