01 को 04
CSS3 सँग क्रस-ब्राउजर रैखिक ग्रेडियन्ट सिर्जना गर्दै
रैखिक ग्रेडियन्टहरू
तपाईंले देख्नुहुने ढाँचाको सबैभन्दा सामान्य प्रकार दुई रङ्गहरूको एक रैखिक ढाँचा हो। यसको अर्थ हो कि ढाँचा एक सीधा रेखा मा धीरे - धीरे पहिलो रंग देखि दोश्रो लाइन संग दोश्रो सम्म बदलन हुनेछ। यस पृष्ठमा छवि # 9 9 (गाढा खैरो) #ff (सेतो) को सहि बायाँ-देखि-दायाँ ढाँचा देखाउँछ।
रैखिक ग्रेडियन्टहरू सबै भन्दा राम्रो हुन् र परिभाषित गर्न ब्राउजरहरूमा सबै भन्दा बढी समर्थन छ। CSS3 linear gradients एन्ड्रोइड 2.3+, क्रोम 1+, फायरफक्स 3.6+, ओपेरा 11.1+, र सफारी 4+ मा समर्थित छन्। इन्टरनेट एक्सप्लोरर फिल्टर प्रयोग गरेर ग्रीडियन्टहरू थप्न सक्छ र तिनीहरूलाई समर्थन गर्दछ 5.5 5.5 मा। यो CSS3 होइन, तर यो क्रस-ब्राउजर अनुकूलताको लागि विकल्प हो।
जब आप एक ढाल को परिभाषित गर्न को लागी तपाईंलाई धेरै अलग अलग चीजहरु को परिभाषित गर्न को आवश्यकता हो:
- कस्तो प्रकारको ढाँचा यो - रैखिक वा रेडियल
- कहाँ ढाँचा सुरु हुनुपर्छ
- जहाँ ढाँचा रोकियो
- कुन रङहरू ढालमा छन् र तिनीहरू कहाँ सुरू गर्न र रोक्न सक्छन्
CSS3 को प्रयोग गरेर रैखिक ग्रेडियन्ट्स को परिभाषित गर्न को लागि, तपाईं लेख्नुहोस:
रैखिक-ढाल ( कोण वा साइड वा कुना , रङ्ग स्टप , रङ्ग स्टप )
- पहिले तपाईं नाम रैखिक- ग्र्रेडियन्टसँग ढाँचाको प्रकार परिभाषित गर्नुहोस्।
- त्यसोभए, तपाईंले प्रारम्भिक परिभाषित गर्नुपर्दछ र दुई तरिकाबाट ढाँचाको बिन्दुहरू रोक्नुहोस्: डिग्री 0 देखि 35 9 सम्मको डिग्री कोण सीधा माथि देखाउँदै। वा "बायाँ वा कुना" प्रकार्य जस्तै, बाँया, दाँया, तल, र माथि। यी अर्को विवरणमा थप विवरणमा वर्णन गरिनेछ। यदि तपाईंले यी छोड्नु भयो भने, ढाँचा माथिको तलबाट तल प्रवाह हुनेछ।
- त्यसपछि तपाइँ रङ स्टपहरू परिभाषित गर्नुहुन्छ। तपाइँ रङ कोड र वैकल्पिक प्रतिशतको साथ रङ स्टपहरू परिभाषित गर्दछ। प्रतिशतले ब्राउजरलाई कहाँ रेखामा रङसँग सुरु वा अन्त गर्न दिन्छ। पूर्वनिर्धारित रूपमा रेखाहरू रङहरू पनि ठाँउमा छ। तपाईंले पृष्ठ 3 मा रंग स्टपहरू बारे अधिक जान्नुहुनेछ।
त्यसैले, CSS3 सँग माथि ढाँचा परिभाषित गर्न, तपाईंले लेख्नुहुन्छ:
रैखिक-ढाल (बाँया, # 9 99 99 9 0%, #ffffff 100%);
र यसलाई DIV पृष्ठभूमिको रूपमा सेट गर्न तपाईंले लेख्नु हुन्छ:
div {
पृष्ठभूमि-छवि: रैखिक-ढाल (बायाँ, # 9 99 99 9 0%, #ffffff 100%;
}
CSS3 रेखीय ग्रेडियन्टहरूको लागि ब्राउजर एक्सटेन्सन
तपाईंको ढाँचा क्रस-ब्राउजरको काम गर्नको लागि, तपाईंलाई ब्राउजर एक्सटेन्सन प्रयोग गर्न धेरै ब्राउजर र इन्टरनेट एक्सप्लोरर 9 को लागि फिल्टर र कम (वास्तविक 2 फिल्टर) को लागी फिल्टर आवश्यक छ। यी सबै ढाँचाहरू परिभाषित गर्नको लागि एउटै तत्वहरू लिन्छन् (यसबाहेक तपाईँले IE मा 2-रङ ग्रेडियन्टहरू मात्र परिभाषित गर्न सक्नुहुन्छ)।
माइक्रोसफ्ट फिल्टरहरू र एक्सटेन्सन - इन्टरनेट एक्स्प्लोररले समर्थन गर्ने सबैभन्दा चुनौतीपूर्ण छ, किनभने तपाईंलाई विभिन्न ब्राउजर संस्करणहरू समर्थन गर्न तीन फरक लाइनहरू चाहिन्छ। माथि सेतो सेतो ढाँचामा प्राप्त गर्न तपाईंले लेख्नुहुन्छ:
/ * IE 5.5-7 * /
फिल्टर: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', ग्रेडियट प्रकार = 1);
/ * IE 8-9 * /
-ms-filter: "progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1)";
/ * IE 10 * /
-एमएस-रैखिक-ढाल (बाँया, # 9 99 99 9 0%, # 100ffffff);
मोज़िला एक्सटेन्सन -The -moz- विस्तार CSS-property जस्तै काम गर्दछ- केवल -moz- एक्सटेन्सन। फायरफक्सको लागि माथिको ढाँचा प्राप्त गर्न, लेख्नुहोस्:
-मोल-रैखिक-ढाल (बाँया, # 9 99 99 9 0%, #ffffff 100%);
ओपेरा एक्सटेन्सन- The -o- एक्सटेन्सनले ओराला 11.1+ मा ग्रेडियन्टहरू थप्छ। माथिको ढाँचा प्राप्त गर्न, लेख्नुहोस्:
-तो-रैखिक-ढाल (बायाँ, # 9 99 99 9 0%, # 100ffffff 100%);
वेबकिट एक्सटेन्सन - The -webkit- एक्स्टेन्शन धेरै काम गर्दछ CSS3 सम्पत्ति जस्तै। सफारी 5.1+ वा क्रोम 10 + को लागि माथिको ढाँचा परिभाषित गर्न तपाईंले लेख्नुहुन्छ:
-विस्तार-रैखिक-ढाल (बाँया, # 9 99 99 9 0%, # 100ffffff);
त्यहाँ वेबकिट एक्स्टेन्सनको पुरानो संस्करण हो जुन क्रोम 2+ र सफारी 4 + सँग कार्य गर्दछ। यसमा तपाइँले गुणस्तरको नाम भन्दा सट्टा ढाँचाको प्रकार परिभाषित गर्नुहोला। यस विस्तारको साथ सेतो ढाँचामा खैरो प्राप्त गर्न, लेख्नुहोस्:
-विस्तार-ढाल (रैखिक, बायाँ शीर्ष, दाँया शीर्ष, रङ्ग-स्टक (0%, # 9 99 99 9), रंग-स्टक (100%, # ffffff));
पूर्ण CSS3 रैखिक ग्रेडियन्ट सीएसएस कोड
पूर्ण क्रस ब्राउजर समर्थनको लागि खैरो सेतो स्प्रिन्टेंटन्टमा ग्रे गर्न पाउनु पहिले ब्राउजरहरूको लागि फलब्याक ठोस रङ समावेश गर्नुपर्छ जुन ग्रिडियन्टहरू समर्थन गर्दैन र अन्तिम वस्तु ब्राउजरहरूको लागि CSS3 शैली हुनुपर्छ जुन पूर्ण रूपमा अनुपालन हुन्छ। त्यसोभए तपाईंले लेख्नुहुन्छ:
पृष्ठभूमि: # 9 9999 9;
पृष्ठभूमि: -मोड-रैखिक-ढाल (बाँया, # 9 99 99 9 0%, # 100ffffff #);
पृष्ठभूमि: -वेरी-ढाल (रैखिक, बाँया शीर्ष, दाँया शीर्ष, रङ्ग-स्टक (0%, # 9 99 99 9), रंग-स्टक (100%, # ffffff));
पृष्ठभूमि: -वेरी-रैखिक-ढाल (बायाँ, # 9 99 99 9 0%, # 100ffffff #);
पृष्ठभूमि: -तो-रैखिक-ढाल (बायाँ, # 9 99 99 9 0%, # 100ffffff #);
पृष्ठभूमि: -एमएस-रैखिक-ढाल (बाँया, # 9 99 99 9 0%, # 100ffffff #);
फिल्टर: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', ग्रेडियट प्रकार = 1);
-ms-filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', ग्रैडिएटप्रकार = 1);
पृष्ठभूमि: रैखिक-ढाल (बाँया, # 9 99 99 9 0%, # 100ffffff 100%);
यस ट्यूटोरियलका अर्को पृष्ठहरूलाई विस्तारै ढाँचाको भागहरू थप विवरणमा व्याख्या गर्दछ, र अन्तिम पृष्ठले तपाइँलाई स्वचालित रूपमा CSS3 ग्रेडियन्टहरू बनाउनको लागि उत्कृष्ट तरिका हो जुन उपकरणमा बताउँछ।
यो सीमान्त ढाँचा मात्र CSS प्रयोग गरी कार्यमा हेर्नुहोस्।
02 को 04
विकर्णग्रेडियन्टसिर्जनागर्दैछ- ग्रेडियन्टको कोण
शुरुवात र रोक्न बिन्दुहरूलाई ढाँचाको कोण निर्धारण गर्नुहोस्। धेरै रैखिक ग्रैडियन्टहरू माथिबाट तल वा बाँया देखि दाँया छन्। तर यो एक क्रमिक को निर्माण गर्न को लागी संभव छ कि विकर्ण रेखा मा चलें। यस पेजमा छविले सरल ढाँचा देखाउँछ जुन दायाँबाट बाँयाबाट छविमा 45 डीग्रेड कोणमा चल्छ।
ग्रेडियन्ट रेखा परिभाषित एन्जिल्स
कोण तत्वको केन्द्रमा एक इमेजिन सर्कलमा रेखा हो। 0deg बिन्दुहरू माथि, दायाँतिर 9 0 डिग्री अंक, दायाँतिर 180 डिग्री अंक, र 270 डिग्री अंकहरू बाँयातिर। तपाइँ 0 देखि 35 9 डिग्री सम्म कुनै कोण परिभाषित गर्न सक्नुहुन्छ।
तपाईंले ध्यान दिनुहोस् कि एक वर्गमा 45 डिग्री कोण माथिल्लो बायाँ कुनामा तल तल्लोबाट चल्छ, तर आयतमा सुरु र अन्त्य बिन्दू आकार भन्दा अलिकति हुन्छन्, किनकि तपाइँ छविमा देख्न सक्नुहुन्छ।
विकर्ण ढाँचा परिभाषित गर्न थप सामान्य तरिका एक कुना परिभाषित गर्नको लागि हो, जस्तै शीर्ष दाँया र ढाँचा उस कुनामा बाट विपरीत कुनामा सार्नेछ। तपाइँ निम्न कुञ्जी शब्दहरूसँग सुरुवात पोषण परिभाषित गर्न सक्नुहुन्छ:
- माथि
- दायाँ
- तल
- बायाँ
- केन्द्र
र तिनीहरू थप विशिष्ट हुन सक्छन्, जस्तै:
- शीर्ष दायाँ
- माथिल्लो बाया
- शीर्ष केन्द्र
- तल दायाँ
- तल बायाँ
- तल्लो केन्द्र
- सही केन्द्र
- बायाँ केन्द्र
यहाँ एउटा सीएसएसको ढाँचाको लागि एक चित्रकलाका लागि, शीर्ष दाँयाबाट हिँड्ने सेतो तल बायाँ तिर बायाँ तिर:
पृष्ठभूमि: # 9 9 एएएसीसी;
पृष्ठभूमि-छवि: -मो-रैखिक-ढाल (दायाँ शीर्ष, # 901 ए 1 सी 0%, # एफएफएफएफएफ 100%);
पृष्ठभूमि-छवि: -वेरी-ढाल (रैखिक, दाँया शीर्ष, बाँया तल, रङ्ग-स्टक (0, # 901 ए 1 सी), रंग-स्टप (1, #FFFFFF));
पृष्ठभूमि: -वेरी-रैखिक-ढाल (दाँया शीर्ष, # 901 ए 1 सी 0%, # 100ffffff #);
पृष्ठभूमि: -ओ-रैखिक-ढाल (दाँया शीर्ष, # 901 ए 1 सी 0%, # 100ffffff #);
पृष्ठभूमि: -एमएस-रैखिक-ढाल (दायाँ शीर्ष, # 901 ए 1 सी 0%, # 100ffffffff);
पृष्ठभूमि: रैखिक-ढाल (दायाँ शीर्ष, # 901 ए 1 सी 0%, #ffffff 100%);
तपाईंले पत्ता लगाउन सक्नुहुनेछ कि यस उदाहरणमा IE फिल्टरहरू छैनन्। यो कारणले गर्दा IE केवल दुइ प्रकार को फिल्टर को अनुमति दि्छ: माथि देखि तल (पूर्वनिर्धारित) र दायाँ देखि दाँया (ग्रिडिएटटाइप = 1 स्विच संग)।
CSS को प्रयोग गरेर यो विकर्ण रैखिक ढाँचा कार्यमा हेर्नुहोस्।
03 को 04
रंग बन्द
CSS3 रैखिक ग्र्रेडियन्टहरूसँग, तपाइँ फ्यान्टिएन्ट प्रभावहरू सिर्जना गर्न तपाईँको ढाँचामा बहुविध रङहरू थप्न सक्नुहुनेछ। यी रङहरू थप्नका लागि, तपाइँ आफ्नो सम्पत्तिको अन्त्यमा थप रङहरू थप्नुहुन्छ, अल्पविरामद्वारा विभाजित। तपाईँले रेखामा सुरू गर्न वा अन्त्यमा पनि रेखामा समावेश गर्नुपर्छ।
इन्टरनेट एक्सप्लोररले केवल दुई रङ स्टपहरू समर्थन गर्दछ, त्यसैले जब तपाइँ यो ढाँचा बनाउनुहुन्छ, तपाइँले मात्र प्रदर्शन गर्न चाहनुहुने पहिलो र दोस्रो रंग समावेश गर्न अनिवार्य छ।
यहाँ माथिको 3-रङ ढाँचाको लागि CSS हो:
पृष्ठभूमि: #ffffff;
पृष्ठभूमि: -मोड-रैखिक-ढाल (बायाँ, #ffffff 0%, # 901 ए 1 सी 51%, # 100% #ffffff);
पृष्ठभूमि: -विस्तार-ढाँचा (रैखिक, बाँया शीर्ष, दाँया शीर्ष, रङ-स्टक (0%, # ffffff), रङ-स्ट (51%, # 901 ए 1 सी), रंग-स्टक (100%, # ffffff));
पृष्ठभूमि: -वेरी-रैखिक-ढाल (बायाँ, #ffffff 0%, # 901 ए 1 सी 51%, # ffffff 100%);
पृष्ठभूमि: -ओ-रैखिक-ढाल (बायाँ, #ffffff 0%, # 901 ए 1 सी 51%, # ffffff 100%);
पृष्ठभूमि: -एमएस-रैखिक-ढाल (बाँया, #ffffff 0%, # 901 ए 1 सी 51%, # ffffff 100%);
फिल्टर: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# ffffff', endColorstr = '# ffffff', ग्रैडिएटप्रकार = 1);
पृष्ठभूमि: रैखिक-ढाल (बायाँ, #ffffff 0%, # 901 ए 1 सी 51%, # ffffff 100%);
यो रङार ढाँचा हेर्नुहोस् जुन तीन रंगको साथ मात्र CSS प्रयोग गरेर कार्यमा स्टप हुन्छ।
04 को 04
बिल्डिंग ग्रिडेसनहरू सजिलो बनाउनुहोस्
त्यहाँ दुई साइटहरू तपाईंलाई ग्रीड्रेन्टहरू निर्माण गर्न मद्दतको लागि सिफारिस गर्दै छन्, तिनीहरूसँग उनीहरूको फाइदा र खतराहरू छन्, मैले एक ढाल बिल्डर फेला पारेको छैन जुन अहिले सम्म सबै कुरा गर्दछ।
परम सीएसएस ग्रेडिएन्ट जेनरेटर
यो ढाँचा जनरेटर धेरै लोकप्रिय छ किनकि यसले फोटोशॉप जस्ता कार्यक्रमहरूमा क्रमशः बिल्डर्सहरूलाई समान तरिकामा प्रदर्शन गर्छ। म यो पनि मनपर्यो किनभने यसले तपाईंलाई सबै CSS विस्तार प्रदान गर्दैन, न केवल वेबकिट र मोजिला। यस जनरेटरसँगको समस्या यो हो कि यसले केवल क्षैतिज र ऊर्ध्वाधर gradients को समर्थन गर्दछ। यदि तपाईं विकर्ण ग्रिडियन्टहरू गर्न चाहनुहुन्छ भने, तपाईले मलाई सिफारिस गर्न अन्य जनरेटरमा जान पर्छ।
CSS3 ग्रेडिएन्ट जेनरेटर
यो जनरेटरले मलाई एकदम लामो समयसम्म बुझ्न एक थोपा लामो समय लिन, तर यो विकर्णमा दिशा परिवर्तन गर्न समर्थन गर्दछ।
यदि तपाईले अर्को सीएसएस ग्रेडिएन्ट जेनरेटरको बारेमा जान्नुहुन्छ जुन तपाईंलाई भन्दा राम्रो मनपर्छ, कृपया हामीलाई थाहा दिनुहोस् ।