Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Complete Websites

CSS3 ट्विस्ट के साथ एक रेस्पॉन्सिव, फ़िल्टर करने योग्य पोर्टफोलियो बनाएँ

by
Difficulty:IntermediateLength:LongLanguages:

Hindi (हिंदी) translation by Taruni Rampal (you can also view the original English article)

फिल्टर करने योग्य पोर्टफोलियो की अंतर्निहित दृश्य अपील (जैसे Tuts + hub) ने उन्हें बहुत लोकप्रिय बना दिया है। आज, हम सीधे-आगे मार्कअप, CSS3 और jQuery का एक छोटा सा उपयोग कर रहे हैं।


Step 1: फ़ाइल संरचना

हम अपने प्रोजेक्ट के लिए निम्न फ़ाइल संरचना का उपयोग करेंगे:

File Structure

इन फ़ाइलों के आधार पर एक परियोजना को एक साथ खींचें (आपको HTML5 Shiv को पकड़ने की आवश्यकता होगी) और index.html में HTML मार्कअप के साथ शुरू करें।


Step 2: HTML हेड

आइए टेम्पो को उच्च रखें और उन चीजों की एक सूची बंद करें जिन्हें हमें <head> बनाने के लिए करना है:

  • पृष्ठ के मीडिया प्रकार और चरित्र सेट की घोषणा करें।
  • हमारी व्यूपोर्ट की चौड़ाई को डिवाइस की चौड़ाई के समान सेट करें और प्रारंभिक ज़ूम को 1 पर सेट करें (इसके बारे में और पढ़ें)
  • हमारे पेज को एक शीर्षक दें।
  • एक फेविकॉन संलग्न करें (रेटिना-सबूत फेविकॉन में रुचि रखते हैं?)
  • हमारी मुख्य स्टाइल शीट संलग्न करें (style.css)
  • मीडिया प्रश्नों को संभालने के लिए हमारी स्टाइल शीट संलग्न करें (मीडिया-प्रश्न.css)
  • jQuery के नवीनतम संस्करण से लिंक करें।
  • पुराने ब्राउज़र के साथ HTML5 संगतता मुद्दों को संभालने के लिए एक HTML5 Shiv जोड़ें।

और यहां हमें क्या मिलता है:


Step 3: HTML बेसिक मार्कअप

बॉडी में, हम पहले पृष्ठ पर केंद्रित सेट चौड़ाई के भीतर हमारे सभी तत्वों को पकड़ने के लिए 'कंटेनर' जोड़ते हैं। उसमें हम जोड़ते हैं (एक और तेजी से आग सूची के लिए तैयार हो जाओ):

  • हमारे शीर्षक के लिए <header> ('जॉन डो')।
  • एक बुनियादी नेविगेशन (<nav>) जिसमें <ul> मेनू शामिल है, जिसमें पांच आइटम हैं, प्रत्येक संबंधित ID के साथ।
  • वर्ग 'काम' के साथ थंबनेल के लिए एक <section>
  • एक <footer> सभी कॉपीराइट सामान के साथ।

Step 4: HTML फिगर और इमेज

हम अपने थंबनेल के लिए <figure> टैग का उपयोग करेंगे और संबंधित श्रेणी के वर्ग को लागू करेंगे जो इसका है। आकृति के भीतर, हम थंबनेल की बैकग्राउंड के लिए इमेज (<img>) और कैप्शन के लिए एक विवरण सूची (<dl>) शामिल <a> टैग जोड़ देंगे।


Step 5: HTML कैप्शन (DL, DT, DD)

जैसा ऊपर बताया गया है, हम अपने कैप्शन के लिए एक विवरण सूची का उपयोग करेंगे। हमारे विवरण (<dt>) हमारे विवरण (<dd>) - क्रमशः Envato और चित्रण के लिए, हमारे छोटे शीर्षलेख - ग्राहक और भूमिका होगी।


Step 6: पूर्ण HTML

यहां बताया गया है कि हमारा पूरा HTML मार्कअप कैसा दिखता है:

चलो अब स्टाइल पर चले जाओ।


Step 7: CSS चयन और स्क्रॉलबार

हम कुछ चंचल तत्वों से निपटकर शुरू करेंगे; चयन स्थिति और स्क्रॉलबार (जो पूरी तरह से वैकल्पिक हैं) प्लस हम कुछ फोंट में भाग लेंगे।

उपर्युक्त कोड में, हमने Google - ओपन सेन्स और पीटी संस नरो से दो वेबफोंट आयात किए। फिर, हम उपयोगकर्ता चयन के लिए एक गहरा भूरे रंग की बैकग्राउंड और एक सफेद टेक्स्ट रंग सेट करते हैं।

इसके बाद हमने अपनी स्क्रॉलबार (वेबकिट ब्राउजर में) के लिए 9px की चौड़ाई निर्धारित की और 'हल्का भूरे रंग की बैकग्राउंड', एक पतली सीमा और एक हल्का इंसेट बॉक्स-शैडो दिया है।  फिर, हमने स्क्रॉलबार अंगूठे को एक गहरा भूरा बैकग्राउंड दिया और इसमें एक पतली सीमा जोड़ा।

नोट: वेबकिट-स्क्रोलबार पर अधिक जानकारी के लिए,  Chris Coyier's post देखें।


Step 8: CSS बॉडी

हम अपने बॉडी को एक हल्का भूरा शोर बैकग्राउंड देंगे और पहले आयात किए गए 'ओपन सेन्स' फ़ॉन्ट को लागू करेंगे। हम एक उन्नत फैननेस के लिए एक लाल शीर्ष सीमा भी जोड़ देंगे।


कुछ धमाल करें...

Step 9: CSS कंटेनर

अब, हमारे कंटेनर के लिए, हम 960px, एक 10px टॉप और नीचे मार्जिन की चौड़ाई निर्धारित करेंगे, और दाएं और बाएं मार्जिन को 'auto' पर सेट करके पृष्ठ पर केंद्रित करेंगे। हम 'कुछ) मोबाइल उपकरणों पर हार्डवेयर त्वरण को' -webkit-transform: translateZ (0); 'का उपयोग करके भी मजबूर करेंगे।


Step 10: CSS हैडर

हम बस हमारे शीर्षक font-size को बढ़ाएंगे, टेक्स्ट को केंद्र में रखेंगे और इसे चिकना दिखने के लिए 300 का font-weight देंगे।


Step 11: CSS Footer

हम टेक्स्ट को हॉरिज़ॉन्टली रूप से संरेखित करेंगे, प्रत्येक 50px के शीर्ष और निचले मार्जिन जोड़ें, टेक्स्ट रंग को भूरे रंग में सेट करें, और इसे 'clear: both'  का उपयोग करके 'कार्य' अनुभाग के नीचे रखें।

आइए अब नेविगेशन पर काम करते हैं।


Step 12: CSS नेविगेशन

हम अपने <ul> से सभी डिफ़ॉल्ट स्टाइल को हटाकर शुरू करेंगे। फिर, हम 50px शीर्ष और नीचे मार्जिन जोड़ देंगे और टेक्स्ट को केंद्र में संरेखित करेंगे।

अब, 'display: inline' का उपयोग करके, हम अपने सभी <li> को एक पंक्ति में प्रदर्शित करने के लिए प्राप्त करेंगे। हम कर्सर को 'पॉइंटर' पर सेट करेंगे और प्रत्येक <li> में 10px दायां मार्जिन जोड़ देंगे। डिफ़ॉल्ट टेक्स्ट रंग ग्रे की एक हल्की छाया होगी जो होवर पर काला हो जाएगी।

रंग परिवर्तन को एनिमेट करने के लिए हम एक छोटा संक्रमण समय भी जोड़ देंगे।

चूंकि अंतिम <li> है, umm, अंतिम चाइल्ड, इसे किसी भी सही मार्जिन की आवश्यकता नहीं है। तो, हम इसे हटा देंगे।

अब, <li> s के बाद स्लैश जोड़ें। इसे ': after' छद्म चयनकर्ता का उपयोग करके पूरा करेंगे। अपनी 'content' को '/', हल्के भूरे रंग के रंग और उचित बाएं हाशिए को सेट करके, हम लिंक अलगाव की एक सरल-अभी-प्रभावी प्रणाली का उत्पादन कर सकते हैं। हम यह भी सुनिश्चित करेंगे कि स्लैश होवर पर रंग को अपने डिफ़ॉल्ट रंग को मजबूर कर रंग में नहीं बदलते हैं li: hover भी।

फिर, हमें अंतिम <li> से स्लैश को हटाना होगा।

यह सब नेविगेशन के लिए है, आइए अब थंबनेल पर जाएं।


Step 13: CSS थंबनेल

सबसे पहले, हम '.work' अनुभाग में 20px शीर्ष और निचला मार्जिन जोड़ देंगे।

इसके बाद, हम प्रत्येक '.work figure' (यानी हमारे सभी थंबनेल) स्टाइल देंगे। हम उन्हें रेखांकित करने के लिए 'float: left' का उपयोग करेंगे। इसके बाद हम एक 20px मार्जिन जोड़ देंगे, 200px की ऊंचाई और चौड़ाई निर्धारित करेंगे, और '-webkit-filter: sepia (0.4)' का उपयोग कर हल्के सेपिया प्रभाव को जोड़ देंगे। फिर, हम स्थिति को relative को position करेंगे कि हम आंकड़े के भीतर अन्य तत्वों (इस मामले में कैप्शन) को पूर्ण स्थिति में डाल सकते हैं। फिर हम एक हल्का box-shadow जोड़ देंगे जो हमारी सीमा के रूप में भी काम करेगा। हम अपने बक्से को बढ़ने और स्केल करने के लिए एक छोटा संक्रमण समय भी जोड़ देंगे।

हम यह सुनिश्चित करेंगे कि हमारी छवि हमेशा इसकी ऊंचाई और चौड़ाई को 100% पर सेट करके थंबनेल फिट करेगी।

यह सब हमारे मूल थंबनेल के लिए है। आइए अब उनके कैप्शन पर काम करें।


Step 14: CSS कैप्शन

विवरण सूची

चूंकि हम नहीं चाहते हैं कि हमारा कैप्शन प्रारंभ में दिखाई दे, हम इसकी opacity 0 पर सेट कर देंगे। फिर, हम इसे पूर्ण स्थिति (आकृति के भीतर) करेंगे और इसे सभी 4 गुणों को सेट करके पूरी तरह से आकृति को भर देंगे - top , right, bottom, और left - 0 तक।

इसके बाद हम इसकी line-height 2.5 तक सेट करेंगे और इसे एक अंधेरा, पारदर्शी बैकग्राउंड देंगे। चूंकि हम एक अंधेरे बैकग्राउंड का उपयोग कर रहे हैं, हम अपने टेक्स्ट रंग को सफेद पर सेट करेंगे। हम आकृति पर इसकी अस्पष्टता को एनिमेट करने के लिए एक छोटा संक्रमण समय भी जोड़ देंगे figure:hover

जैसा कि हम थंबनेल पर होवरिंग पर दिखना चाहते हैं, हम इसकी opacity को आकृति पर 1 पर सेट करेंगे figure: hover

विवरण शर्तें

सबसे पहले, हम अपने font-family को 'PT संस नरो' में सेट करेंगे। उन्हें अपने विवरणों से थोड़ा छोटा दिखाई देने के लिए, हम उनके font-size 80% सेट करेंगे। फिर, हम 'text-transform:uppercase' का उपयोग करके हमारे विवरण शर्तों (क्लाइंट और रोल) को अपरकेस में बदल देंगे। नियमों और उनके विवरणों के बीच अत्यधिक अंतर से बचने के लिए हम नकारात्मक मार्जिन भी सेट करेंगे।

परिभाषा विवरण

हमें यहां बहुत कुछ करने की आवश्यकता नहीं है - हम केवल margin को 0 पर सेट करेंगे। (डिफ़ॉल्ट रूप से, <dd> के पास थोड़ा बायां मार्जिन है।)


Step 15: CSS 'current' / 'not-current' थंबनेल

.current

जब किसी निश्चित श्रेणी के थंबनेल को .current क्लास (JS के माध्यम से) दिया जाता है, तो हम चाहते हैं कि वे बढ़ जाएं और अपना सामान्य स्वर वापस प्राप्त करें (i। E। Sepia को हटाएं)। हम 'transform: scale(1.05)' का उपयोग करके उन्हें स्केल करेंगे, इस प्रकार एक्स और वाई अक्ष दोनों पर मूल आकार 1.05 गुणा तक स्केल कर रहे हैं और '-webkit-filter: sepia'(0)' का उपयोग करके पहले से जोड़े गए सेपिया को हटा दें।

.not-current

यहां, हम .current थंबनेल के साथ किए गए कार्यों के ठीक विपरीत करेंगे - हम उन्हें 'transform: scale(0.75)' का उपयोग करके 75% तक स्केल करेंगे और उन्हें '-webkit-filter:grayscale(1)' का उपयोग करके काले और सफेद बना देंगे।

.current-li

हम बस '.current-li के काले रंग के टेक्स्ट रंग को सेट करेंगे।


Step 16: पूर्ण CSS

यहां बताया गया है कि हमारा पूरा CSS कैसा दिखता है:

आइए अब JS पर काम करना शुरू करें।


Step 17: JS एल्गोरिदम

यहां हम अपने Javascript (कालक्रम क्रम में) के माध्यम से क्या करने जा रहे हैं:

  1. nav > li प्रेस का पता लगाएं।
  2. सभी थंबनेल को उन्हें .not-current क्लास देकर स्केल करें। class.
  3. जोड़ें .current-li चयनित श्रेणी के संबंधित <li> में .current-li क्लास जोड़ें।
  4. हटाएं .not-current चयनित श्रेणी के थंबनेल से क्लास को हटाएं।
  5. चयनित श्रेणी के सभी थंबनेल में .current क्लास जोड़ें।

#2 यहां scaleDown() फ़ंक्शन का उपयोग किया जाएगा और #3, #4, और # 5 show(category) फ़ंक्शन का उपयोग किया जाएगा।


Step 18: JS scaleDown() फ़ंक्शन

removeClass और addClass विधियों का उपयोग करके, हम उन तत्वों से .current क्लास को हटा देंगे, जिनमें से सभी को .not-current क्लास जोड़ना होगा। हम किसी भी .current-li क्लास को भी हटा देंगे। हम किसी भी <li से वर्तमान में यह है।


Step 19: JS show(category) समारोह

यह फ़ंक्शन प्रत्येक बार <li> क्लिक होने पर लागू किया जाएगा। सबसे पहले, हम सभी थंबनेल को स्केल करने के लिए scaleDown() फ़ंक्शन को कॉल करेंगे। फिर, हम .current-li क्लास को जोड़ देंगे क्लास को <li में जोड़ देंगे जो चयनित श्रेणी से मेल खाता है। इसके बाद हम श्रेणी के थंबनेल की श्रेणी को .not-current से .current में बदल देंगे (हमने .not-current क्लास लागू किया था)। scaleDown() फ़ंक्शन में सभी थंबनेल पर क्लास लागू किया था)। अंत में, यदि चयनित श्रेणी 'all' है, तो हम गतिशील रूप से जोड़े गए क्लासेज (यानी .current और .not-current) को हटा देंगे।  सभी थंबनेल से।

नोट: चूंकि प्रत्येक श्रेणी के id (<li) और class (figure S) के नाम समान हैं, हम बस <li as '# + श्रेणी' और figure s 'के रूप में देखेंगे . + category '।


Step 20: JS क्लिक का पता लगाने और show(category) समारोह को कार्यान्वित करना

आखिरकार, document.ready विधि के माध्यम से, हम .current-li  क्लास को li#all में जोड़ देंगे और nav> li क्लिक का पता लगाएंगे। इसके बाद हम क्लिक किए गए <li की id प्राप्त करेंगे और show(category) फ़ंक्शन को कार्यान्वित करेंगे जहां 'category' क्लिक किया जाएगा 'this.id' यानी क्लिक की गई <li>। इसलिए, उदाहरण के लिए, यदि <li> id #print के साथ क्लिक किया गया है, तो show('print') लागू किया जाएगा।

यह हमारी Javascript को पूरा करता है।


चरण 21: पूर्ण JS

हमारा पूरा JS इस तरह दिखता है:

अब जब हमारी साइट पूरी तरह कार्यात्मक है, चलिए इसे रेस्पॉन्सिव बनाते हैं।


चरण 22: CSS से रेस्पॉन्सिव बनाना

आइए 'media-queries.css'  खोलने जा रहे हैं। आप अपने मीडिया प्रश्नों को लागू करने का तरीका चुनते हैं जो पूरी तरह से आपके ऊपर है। आप अपने मुख्य स्टाइलशीट में मीडिया प्रश्नों को प्राथमिकता देना पसंद कर सकते हैं, आप उन्हें प्रत्येक स्टाइल की घोषणा के साथ मॉड्यूलर और इनलाइन भी करना पसंद कर सकते हैं - यह आपके ऊपर है!

प्रत्येक ब्रेकपॉइंट के लिए आवश्यक स्टाइल परिवर्तन यहां वर्णित हैं।

965px या उससे कम

  • कंटेनर की चौड़ाई 840px घटाएं
  • प्रत्येक पंक्ति में 4 थंबनेल को समायोजित करने के लिए थंबनेल की ऊंचाई और चौड़ाई को 170px प्रत्येक में घटाएं [(170px + 40px) x 4 = 210px x 4 = 840px]

860px या उससे कम

  • कंटेनर की चौड़ाई 720px पर घटाएं
  • प्रत्येक पंक्ति में 3 समायोजित करने के लिए थंबनेल की ऊंचाई और चौड़ाई को 200px प्रत्येक पर बढ़ाएं [(200px + 40px) x 3 = 240px x 3 = 720px]

740px या उससे कम

  • कंटेनर की चौड़ाई 600px तक घटाएं
  • .not-current की ओपेसिटी को 50% तक घटाएं (चूंकि हम मुख्य रूप से मोबाइल उपकरणों के लिए काम कर रहे हैं)
  • प्रत्येक पंक्ति में 3 समायोजित करने के लिए थंबनेल की ऊंचाई और चौड़ाई को 160px प्रत्येक में घटाएं [(160px + 40px) x 3 = 200px x 3 = 600px]

610px या उससे कम

  • कंटेनर की चौड़ाई को 460px तक घटाएं
  • थंबनेल के शीर्ष और निचले मार्जिन को 20px पर सेट करें और बाएं और दाएं मार्जिन 60px पर सेट करें
  • प्रत्येक पंक्ति में 1 को समायोजित करने के लिए थंबनेल की ऊंचाई और चौड़ाई को 200px प्रत्येक पर बढ़ाएं [(200px + 120px) x 1 = 320px x 1 = 320px]

480px या उससे कम

  • कंटेनर की चौड़ाई 320px तक घटाएं
  • थंबनेल के शीर्ष और निचले मार्जिन को 20px पर सेट करें और बाएं और दाएं मार्जिन 60px पर सेट करें
  • प्रत्येक पंक्ति में 1 को समायोजित करने के लिए थंबनेल की ऊंचाई और चौड़ाई को 200px प्रत्येक पर बढ़ाएं [(200px + 120px) x 1 = 320px x 1 = 320px]


ब्राउज़र संगतता

मूल स्केलिंग कार्यक्षमता (CSS ट्रांसफॉर्म) अधिकांश प्रमुख ब्राउज़रों में पूरी तरह से काम करती है, जिसमें निम्न शामिल हैं:

  • IE 9+ (use http://www.useragentman.com/IETransformsTranslator/ for lower versions)
  • Firefox 14+
  • Chrome 21+
  • Safari 5.1+

फिल्टर इफेक्ट्स (सेपिया और ग्रेस्केल) केवल वेबकिट ब्राउज़र में काम करते हैं।


jsFiddles

मैंने आपके लिए कोशिश करने और प्रयोग करने के लिए तीन js फिडल्स बनाए हैं:

  1. Caption Split Effect (Vertical)
  2. Caption Split Effect (Horizontal)
  3. Diagonal Masked Thumbnail Images

निष्कर्ष

बस! हमने सफलतापूर्वक एक काम किया है, फ़िल्टर करने योग्य और रेस्पॉन्सिव पोर्टफोलियो बनाया है। मुझे आशा है कि आपको यह ट्यूटोरियल उपयोगी लगेगा। पढ़ने के लिए धन्यवाद!

Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.