केवल CSS का उपयोग करके Booking.com लोगो बनाएँ

मैं हाल ही में Booking.com से जुड़ा, इस तथ्य के अलावा कि यह एक बहुत ही दिलचस्प कंपनी है जो हर दिन जटिल चुनौतियों का सामना करती है, मेरे लिए यह कंपनी के रंगीन पक्ष को देखने का एक अवसर था। मैंने एक छोटी सी तकनीकी चुनौती लेने और कंपनी के ब्रांड लोगो को केवल CSS का उपयोग करके, अर्थात्, छवियों के उपयोग के बिना, न्यूनतम कोडिंग और निश्चित रूप से एक अभिनव और इष्टतम तरीके से बनाने के लिए चुना।

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

सबसे पहले, हम जो परिणाम हासिल करने जा रहे हैं उससे प्रभावित होते हैं:

यहां किन तकनीकों का उपयोग किया जा रहा है?

  • फ्लेक्सबॉक्स // सीएसएस-ट्रिक्स फ्लेक्सबॉक्स गाइड या यह व्यावहारिक गाइड
  • Media Queries // W3C Doc का उपयोग करके उत्तरदायी वेब डिज़ाइन
  • SCSS //https://sass-lang.com/guide।
  • CSS की कुछ और उन्नत सुविधाएँ।

चरण 0/4: रंग पैलेट और आवश्यकताओं को परिभाषित करना

एक अच्छे अप्रेंटिस या शोमेकर की तरह, वास्तव में कार्य करने से पहले, हम, भी, क्योंकि क्लाइंट साइड डेवलपर्स को सही काम के लिए सही टूल की आवश्यकता होती है।

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

यह एक रंग पैलेट है जिसे एक अच्छे तरीके से प्रस्तुत किया गया है लेकिन हमें वास्तव में अगले दृश्य में हेक्स रंगों के अलावा इस दृश्य प्रस्तुति की आवश्यकता नहीं होगी।

चरण 1/4: उत्तरदायी लेआउट बनाना

आइए लोगो के लिए सही लेआउट सेट करें, पहले हम पृष्ठभूमि को दो मदों में विभाजित करेंगे, फिर, हम प्रत्येक आइटम को एक अलग रंग में रंगेंगे और इसे हमारी आवश्यकताओं के लिए सौंदर्य बना देंगे।

  1. HTML के मुख्य भाग में कुछ अंतर्निहित ब्राउज़र शैलियाँ हैं, जो इस पर लागू होती हैं और ये हमारे डिज़ाइन के साथ टकराव कर सकती हैं, तो आइए इनको रीसेट करें और इसे मार्जिन के साथ शैली दें: 0।
  2. थिंकिंग मोबाइल-फर्स्ट: मार्कअप: हम एक अच्छा मार्कअप लेना चाहेंगे, जिसका इस्तेमाल मोबाइल और डेस्कटॉप दोनों के लिए किया जा सकता है, जबकि दोनों डिवाइसों पर हम मूल रूप से एक ही विचार रखते हैं - दो आइटम जो एक पंक्ति या कॉलम के अंदर निहित हैं। नोट: हम किसी भी उपकरण परिवर्तन के लिए DOM को मैनिपुलेट नहीं करना चाहते हैं, लेकिन केवल उसी के अनुसार स्टाइल को समायोजित कर सकते हैं। शैलियाँ: हम मोबाइल-पहले दृष्टिकोण का लाभ उठाने जा रहे हैं और मूल रूप से 1 कॉलम और 2 पंक्तियों वाले मोबाइल के लिए इसे स्टाइल करते हैं, और कुछ और अतिरिक्त शैलियों का उपयोग करते हैं जब डेस्कटॉप को लक्षित किया जाता है, तो इसके बजाय 1 पंक्ति हो सकती है 2 कॉलम।
  3. HTML मार्कअप: हमारे पास एक बेसिक डिव कंटेनर (कंटेनर क्लास के साथ) होगा जिसमें दो डिव आइटम्स होते हैं जिनके भीतर नेस्ट किया जाता है (प्रत्येक में आइटम क्लास होना चाहिए)। नोट: चूँकि हम यहाँ ब्लॉक-एलिमेंट्स का उपयोग कर रहे हैं, डिव आइटम एक में उसके एलिमेंट (कंटेनर) की पहली लाइन पर कब्ज़ा होगा, उसके बाद दूसरा डिव आइटम - जो कि मोबाइल के लिए आवश्यक है!
  4. डेस्कटॉप लक्ष्य: डेस्कटॉप पर शैलियों को लागू करने के लिए - हम एक मीडिया क्वेरी का उपयोग करेंगे, जो लक्षित होने पर हमें मीडिया डिवाइस (पिक्सेल की न्यूनतम चौड़ाई द्वारा) के अनुसार शैलियों को गुंजाइश देते हैं: @मीडिया स्क्रीन और (न्यूनतम-चौड़ाई: 600px) {/ * शैलियाँ डेस्कटॉप के लिए यहां रखा जाएगा * /।
  5. Desktop Stylings: इन्हें कई तरह से प्राप्त किया जा सकता है (फ्लोट्स और क्लियर, ग्रिड, फ्लेक्सबॉक्स), जबकि मुझे Flexbox का उपयोग करना आसान लगता है। मुख्य कंटेनर "फ्लेक्स कंटेनर" (जो फ्लेक्सबॉक्स लेआउट के लिए संदर्भ सेट करता है) के रूप में कार्य करेगा और div आइटम "फ्लेक्स आइटम" (फ्लेक्सबॉक्स का उपयोग करके वास्तविक तत्व जिसे हम लेआउट करते हैं) होंगे। यह ध्यान देने योग्य है कि कोई भी तत्व (ब्लॉक-स्तर या इनलाइन-तत्व) एक फ्लेक्स कंटेनर हो सकता है।
  6. फ्लेक्स कंटेनर: आइए कन्टेनर डिव को डिस्प्ले के साथ सेट करें: फ्लेक्स (यह दो आइटमों को कॉलम के साथ-साथ साइड में होगा) और यह सुनिश्चित करने के लिए कि यह स्क्रीन को भरता है हम ऊंचाई भी जोड़ेंगे: 100vh (W3 Doc व्यूपोर्ट ऊँचाई के बारे में )। फ्लेक्स-दिशा के बारे में क्या है (जो मुख्य-अक्ष की दिशा निर्धारित करता है)? मूल रूप से हमें इसे सेट करने की आवश्यकता नहीं है क्योंकि डिफ़ॉल्ट मान पंक्ति है (जो हमारी आवश्यकताओं को पूरा करता है), लेकिन चूंकि हम चाहते हैं कि यह स्पष्ट हो, हम इसे स्वयं फ्लेक्स-दिशा: पंक्ति के साथ सेट करेंगे।
  7. फ्लेक्स आइटम: प्रत्येक div कॉलम आइटम में स्क्रीन का आकार 50% होना चाहिए। ऐसा करने का फ्लेक्स तरीका बस इसे फ्लेक्स: 1 पर लागू करने से होगा। नोट: (1) हम अपनी इच्छानुसार कोई भी संख्या निर्धारित कर सकते हैं (उदाहरण के लिए: फ्लेक्स: 100, क्योंकि यह प्रत्येक कॉलम के लिए समान होगा)। (2) हाँ, हम चौड़ाई का उपयोग कर सकते हैं: फ्लेक्स स्टाइल के बजाय 50vw (लेकिन चलो इस बार इससे बचें ..)।
  8. वस्तुओं को रंगने के लिए, हम SCSS रंग चर जोड़ेंगे और उसके अनुसार उपयोग करेंगे:
$ bg-left-color: # feba02; $ bg-right-color: # 1875dd;
// ...
&: nth-child (1) {बैकग्राउंड: $ bg-left-color; } &: nth-child (2) {बैकग्राउंड: $ bg-right-color; }

अंतिम परिणाम होगा:

/ * मोबाइल का पहला तरीका * / .container {min-height: 100vh;
.item {min-height: 50vh;
&: nth-child (1) {बैकग्राउंड: $ bg-left-color; } &: nth-child (2) {बैकग्राउंड: $ bg-right-color; }}}
/ * डेस्कटॉप * / @मीडिया स्क्रीन और (न्यूनतम-चौड़ाई: 600px) {.कंटेनर {डिस्प्ले: फ्लेक्स; फ्लेक्स-दिशा: पंक्ति;
.item {फ्लेक्स: 1; }}}

चरण 2/4: लोगो को आकार देना

  1. आइए एक और div को अपने लेआउट (लोगो कंटेनर) में एक लोगो वर्ग के साथ जोड़ें और इसे मुख्य कंटेनर के अंदर रखें।
  2. इस कंटेनर को आकार देने के लिए लोगो को निम्नलिखित स्टाइल की आवश्यकता होती है:
ऊंचाई: 100 पीएक्स; चौड़ाई: 100px; स्थिति: निरपेक्ष; बाएं: 50%; शीर्ष: 50%; मार्जिन: -50 पीएक्स; // इसे मध्य सीमा-त्रिज्या में रखें: 17% 17% 17% 0; // फैंसी बॉर्डर बनाना

नोट: सुनिश्चित करें कि आप समझते हैं कि हम स्क्रीन के मध्य में दोनों बाएँ का उपयोग कैसे कर सकते हैं: 50%; शीर्ष: 50%।

3. अंत में, इसे रंग दें! $ लोगो-बीजी-रंग जोड़ें: # 003580; चर और .logo वर्ग पर इसे लागू करते हैं: पृष्ठभूमि: $ लोगो-बीजी-रंग;

चरण 3/4: "बी" पत्र जोड़ना

  1. हालाँकि हमें B सामग्री के लिए अतिरिक्त HTML मार्कअप जोड़ने की आवश्यकता नहीं है, लेकिन हम चाहते हैं कि लोगो की सम्मिलित B सामग्री पूरी तरह से लोगो के स्वामित्व और स्टाइल की होगी। इसे प्राप्त करने का एक अच्छा तरीका यह होगा कि चयनकर्ता से पहले :: सीएसएस में उपलब्ध है। इसका उपयोग करने से पहले, आइए पहले आवश्यक रंग चर जोड़ें: $ लोगो-पाठ-रंग: #fff; (सफेद रंग)।
  2. निम्नलिखित स्टाइल का उपयोग करके "B" टेक्स्ट को जोड़ा जा सकता है:
.logo: इससे पहले {color: $ logo-text-color; सामग्री: "बी"; प्रदर्शन क्षेत्र; फ़ॉन्ट: बोल्ड 70 पीएक्स ब्लिंकमासिस्टमफोंट, -पल-सिस्टम, "सेगो यूआई", रोबोटो, हेल्वेटिका, एरियल, सैंस-सेरिफ़; मार्जिन: 10% 0% 0% 20%; }

नोट: “B” टेक्स्ट को कंटेंट प्रॉपर्टी (W3 Doc) में स्ट्रिंग के रूप में लिखा गया है, जिसे केवल छद्म तत्वों के बाद :: पहले और बाद में इस्तेमाल किया जा सकता है।

चरण 4: लोगो का डॉट आकार जोड़ना

ठीक है, इसलिए हम लगभग पूरी हो चुकी हैं, यह समय है कि "लुक" को अंतिम रूप देने के लिए अतिरिक्त "डॉट" को जोड़ा जाए।

आवश्यक रंग $ लोगो-डॉट-रंग जोड़ें: # 009fe3; और अगले चरण पर जारी रखें। इस बार हम एक और छद्म तत्व का उपयोग करने जा रहे हैं - :: बाद, और निम्नलिखित स्टाइल लागू करें:

.logo: {पृष्ठभूमि-रंग: $ लोगो-डॉट-रंग के बाद; सामग्री: ""; प्रदर्शन क्षेत्र; चौड़ाई: 12 पीएक्स; ऊंचाई: 12 पीएक्स; -मोज़-बॉर्डर-रेडियस: 7.5px; -वेबकिट-बॉर्डर-त्रिज्या: 7.5px; सीमा-त्रिज्या: 7.5px; शीर्ष: 66 पीएक्स; सही: 18 पीएक्स; स्थिति: निरपेक्ष; }

जो हमने अभी लागू किया है, उस पर ध्यान केंद्रित करते हुए - इस चरण में हम उपयोग कर रहे थे :: बाद में और पिछले चरण पर (जब हमने "बी" टेक्स्ट जोड़ा) हमने पहले इस्तेमाल किया था - यह थोथा समझ में आता है क्योंकि हमने उत्तरोत्तर संपूर्ण लोगो का निर्माण किया।

सोचने के लिए दिलचस्प बिंदु: क्या होगा यदि हम इन दो छद्म तत्वों के बीच स्विच करते हैं (और स्टाइलिंग को इस प्रकार रखें), क्या स्टाइलिंग सही ढंग से लागू होगी? दूसरे शब्दों में, यह चरण :: का उपयोग करेगा पहले और पहले वाला :: का उपयोग करेगा - क्या यह समान परिणाम प्राप्त कर सकता है? - यह कोशिश करो और सुनिश्चित करें कि आप समझते हैं कि क्या होता है ...

चीयर्स! हम अंत में हमारे अच्छे लोगो है :)

नोट: मैंने उचित फ़ॉन्ट ("बी" पत्र में प्रयुक्त) को केवल अंतिम परिणाम के लिए सेट किया है।

यदि आपको लेख पसंद आया है, तो कृपया नीचे the क्लिक करें ताकि अन्य लोग इसे माध्यम पर देखेंगे!

यह सभी देखें

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