ग्रेडियंटसह सीएसएस लाइन रंग. रेखीय-ग्रेडियंट(): पार्श्वभूमीत रेखीय ग्रेडियंट

जेव्हा आपण CSS मधील ग्रेडियंटबद्दल बोलतो तेव्हा आपण बोलत असतो रंगीत ग्रेडियंट.

CSS मध्ये दोन प्रकारचे ग्रेडियंट आहेत:

• रेखीय: रंग एका बिंदूपासून दुसऱ्या बिंदूकडे जातात सरळओळी;
• रेडियल: रंग वर्तुळाच्या मध्यभागी पासून त्याच्या कडांवर जातात, मध्ये प्रत्येकजणदिशानिर्देश

ग्रेडियंट मानला जातो पार्श्वभूमी प्रतिमाआणि योग्य मालमत्तेसह वापरणे आवश्यक आहे.

रेखीय-ग्रेडियंट

रेखीय ग्रेडियंटसाठी वाक्यरचना खूपच गुंतागुंतीची आहे, परंतु मूळ कल्पना ही आहे:

• इच्छित निश्चित करा रंग;
• हे रंग कुठे दिसावेत अक्ष बाजूने(सुरुवातीला, मध्यभागी, शेवटी इ.);
• ज्यामध्ये दिशाग्रेडियंट असावा.

चला एका साध्या दोन-रंगाच्या ग्रेडियंटसह प्रारंभ करूया:

Div ( पार्श्वभूमी-प्रतिमा: रेखीय-ग्रेडियंट (लाल, निळा);)

डीफॉल्ट:

• अनुलंब दिशा, वरुन खाली;
• पहिलामध्ये रंग सुरुवात(वर);
• दुसरामध्ये रंग शेवट(तळाशी).

दिशा बदलणे

जर टॉप-डाउन दिशा तुम्हाला अनुकूल नसेल, तर तुम्ही ते एका पर्यायात बदलू शकता:

• परिभाषित ग्रेडियंट असाइनमेंट, शीर्षस्थानी डावीकडे सारखे कीवर्ड वापरणे;
• विशिष्ट निश्चित करा कोपराअंशांमध्ये, जसे की 45 अंश.

ही दिशा निश्चित करणे आवश्यक आहे आधीरंग:

Div ( पार्श्वभूमी-प्रतिमा: रेखीय-ग्रेडियंट (खाली उजवीकडे, पिवळा, जांभळा); रुंदी: 200px; )

विचारायचे असेल तर विशिष्ट कोन, नंतर तुम्ही मधील मूल्य वापरू शकता अंश:

• 0deg - तळापासून वरपर्यंत;
• 20deg - किंचित तिरपे, घड्याळाच्या दिशेने जात;
• 90 डिग्री - 15 वाजल्याप्रमाणे, डावीकडून उजवीकडे;
• 180deg डीफॉल्ट आहे, वरपासून खालपर्यंत.

Div ( पार्श्वभूमी-प्रतिमा: रेखीय-ग्रेडियंट(20deg, हिरवा, निळा); रुंदी: 150px; )

अधिक रंग जोडणे

तुम्हाला आवडेल तितके रंग तुम्ही घालू शकता. ते करतील समान रीतीने वितरितअक्षाच्या बाजूने:

• दोन रंग: 0% आणि 100%
• तीन रंग: 0%, 50% आणि 100%
• चार रंग: ०%, ३३%, ६७% आणि १००%

Div ( पार्श्वभूमी-प्रतिमा: रेखीय-ग्रेडियंट(नारिंगी, राखाडी, पिवळा); रुंदी: 150px; )

विशिष्ट रंग बिंदू परिभाषित करणे

जर तुम्हाला रंग समान रीतीने वितरित करायचा नसेल तर तुम्ही सेट करू शकता विशिष्ट रंग पोझिशन्सटक्केवारी (%) किंवा पिक्सेल (px) वापरून:

Div ( पार्श्वभूमी-प्रतिमा: रेखीय-ग्रेडियंट(नारिंगी, राखाडी 10%, पिवळा 50%); रुंदी: 150px; )

या पॅरामीटर्समध्ये:

• नारंगी रंगाची कोणतीही स्थिती निर्दिष्ट केलेली नाही, म्हणून डीफॉल्ट मूल्य 0% आहे;
• राखाडी रंग वरच्या जवळ आहे, 50% ऐवजी 10%;
• पिवळा रंग ग्रेडियंटचा अर्धा भाग व्यापतो, 50% ते 100% च्या शेवटी.

रेडियल-ग्रेडियंट

रेखीय ग्रेडियंट एका अक्षाचे अनुसरण करत असताना, रेडियल ग्रेडियंटसर्व दिशांना पसरवा. त्यांची वाक्यरचना रेखीय ग्रेडियंट्ससारखीच आहे, कारण दोन्हीमध्ये आहेत रंगाचे ठिपके. परंतु दिशा निर्दिष्ट करण्याऐवजी, आपण निर्दिष्ट करणे आवश्यक आहे:

• फॉर्म: वर्तुळ किंवा लंबवर्तुळ;
• प्रारंभ बिंदू: जे वर्तुळ किंवा लंबवर्तुळाचे केंद्र असेल;
• शेवटचा बिंदू: वर्तुळाची किनार किंवा लंबवर्तुळ कोठे असेल.

Div ( पार्श्वभूमी-प्रतिमा: रेडियल-ग्रेडियंट(लाल, पिवळा); पॅडिंग: 1rem; रुंदी: 300px; )

डीफॉल्ट:

• ग्रेडियंट आहे लंबवर्तुळ;
• पहिला रंग येथे सुरू होतो केंद्र;
• शेवटचा रंग मध्ये संपतो सर्वात दूरचा कोपरा.

सुरुवातीची स्थिती

सुरुवातीची स्थितीपार्श्वभूमी-स्थितीप्रमाणे कार्य करते. तुम्ही ते at कीवर्ड द्वारे सेट करू शकता.

Div ( पार्श्वभूमी-प्रतिमा: रेडियल-ग्रेडियंट (वर उजवीकडे, काळा, हलका राखाडी); पॅडिंग: 1rem; रुंदी: 300px; )

शेवटची स्थिती

डीफॉल्टनुसार, फॉर्म येथे संपतो सर्वात दूरचा कोपरा. तुम्ही निवडू शकता:

• सर्वात जवळची बाजू
• सर्वात जवळचा कोपरा
• सर्वात दूरची बाजू
• सर्वात दूरचा कोपरा

Div ( पार्श्वभूमी-प्रतिमा: रेडियल-ग्रेडियंट(20px 20px वर सर्वात जवळचा कोपरा, हिरवा, निळा); पॅडिंग: 1rem; रुंदी: 300px; ) div:hover (पार्श्वभूमी-प्रतिमा: रेडियल-ग्रेडियंट (20px 20px वर सर्वात दूरची बाजू, हिरवा, निळा)

निश्चित आकार

स्टार्ट आणि एंड पोझिशन्स सेट करण्याऐवजी, तुम्ही फक्त सेट करू शकता विशिष्ट आकार:

Div ( पार्श्वभूमी-प्रतिमा: रेडियल-ग्रेडियंट (20px 10px 75% 50% वर, गडद व्हायोलेट, गुलाबी); पॅडिंग: 1rem; रुंदी: 300px; )

CSS मधील ग्रेडियंट्स अनंत संख्येने उपलब्ध पर्यायांमुळे शक्तिशाली आहेत.

ग्रेडियंट - निवडलेले क्षेत्र त्यांच्या दरम्यान गुळगुळीत संक्रमणांसह रंगाच्या शेड्सच्या क्रमाने भरणे. ग्रेडियंटचा वापर दोन किंवा अधिक निर्दिष्ट रंगांच्या छटांमधील गुळगुळीत संक्रमण प्रदर्शित करण्यासाठी केला जातो. ग्रेडियंट उदाहरण:

पूर्वी, पार्श्वभूमी प्रतिमा ग्रेडियंट प्रभाव तयार करण्यासाठी वापरल्या जात होत्या. आता तुम्ही ग्रेडियंट बॅकग्राउंड तयार करण्यासाठी CSS3 वापरू शकता. CSS3 ग्रेडियंट असलेले घटक त्यांच्या प्लग-इन बॅकग्राउंड इमेज समकक्षांपेक्षा झूम इन केल्यावर चांगले दिसतात, कारण ब्राउझरद्वारे थेट निर्दिष्ट क्षेत्रामध्ये ग्रेडियंट तयार केला जातो.

लक्षात घ्या की CSS ग्रेडियंट ही ब्राउझर-व्युत्पन्न केलेली पार्श्वभूमी प्रतिमा आहे, पार्श्वभूमी रंग नाही, म्हणून ती पार्श्वभूमी-प्रतिमा गुणधर्माचे मूल्य म्हणून परिभाषित केली जाते. याचा अर्थ असा की ग्रेडियंट केवळ पार्श्वभूमी-प्रतिमा मालमत्तेचे मूल्य म्हणून निर्दिष्ट केले जाऊ शकत नाही, तर कुठेही आपण पार्श्वभूमी प्रतिमा समाविष्ट करू शकता, जसे की सूची-शैली-प्रतिमा आणि पार्श्वभूमी.

CSS3 दोन प्रकारचे ग्रेडियंट परिभाषित करते:

• रेखीय ग्रेडियंट(रेखीय ग्रेडियंट) - एका सरळ रेषेत रंगापासून रंगापर्यंत एक गुळगुळीत संक्रमण.
• रेडियल ग्रेडियंट(रेडियल ग्रेडियंट) - सर्व दिशांमध्ये एका बिंदूपासून रंगापासून रंगापर्यंत एक गुळगुळीत संक्रमण.

रेखीय ग्रेडियंट

एक रेखीय ग्रेडियंट एका सरळ रेषेत वाढतो, रंगाच्या एका सावलीपासून दुसऱ्या रंगात एक गुळगुळीत संक्रमण दर्शवितो. linear-gradient() फंक्शन वापरून एक रेखीय ग्रेडियंट तयार केला जातो. फंक्शन एक प्रतिमा तयार करते जी रंगांच्या निर्दिष्ट शेड्स दरम्यान एक रेखीय ग्रेडियंट आहे. ग्रेडियंटचा आकार तो लागू केलेल्या घटकाच्या आकाराशी संबंधित आहे.

रेखीय-ग्रेडियंट() फंक्शन खालील स्वल्पविरामाने विभक्त केलेले वितर्क घेते:

• पहिला युक्तिवाद हा कोन किंवा कीवर्डची डिग्री आहे जो ग्रेडियंट रेषेचा दिशा कोन परिभाषित करतो. पर्यायी युक्तिवाद.
• दोन किंवा अधिक रंगांची स्वल्पविरामाने विभक्त केलेली यादी, त्यातील प्रत्येक स्टॉप पोझिशनद्वारे अनुसरण केले जाऊ शकते.

सर्वात सोप्या रेखीय ग्रेडियंटला प्रारंभ आणि शेवटचे रंग निर्दिष्ट करणारे फक्त दोन युक्तिवाद आवश्यक आहेत:

Div ( पार्श्वभूमी-प्रतिमा: रेखीय-ग्रेडियंट(काळा, पांढरा); रुंदी: 200px; उंची: 200px; ) प्रयत्न करा »

फंक्शनमध्ये दोन आर्ग्युमेंट्स पास केल्याने शीर्षस्थानी प्रारंभ बिंदूसह अनुलंब ग्रेडियंट सेट होतो.

ग्रेडियंट लाइनची दिशा दोन प्रकारे निर्धारित केली जाऊ शकते:

प्रथम युक्तिवाद म्हणून अंश वापरणे, आपण ग्रेडियंट रेषेच्या कोनाची डिग्री पार करू शकता, जी ग्रेडियंटची दिशा ठरवते, म्हणून उदाहरणार्थ, कोन 0deg (डिग्री - डिग्रीसाठी लहान) तळाच्या सीमेवरून ग्रेडियंट रेषा परिभाषित करते घटकाचा शीर्षस्थानी, कोन 90deg डावीकडून उजवीकडे ग्रेडियंट रेषा परिभाषित करतो आणि इ. सोप्या भाषेत सांगायचे तर, सकारात्मक कोन घड्याळाच्या दिशेने फिरवतात, नकारात्मक कोन घड्याळाच्या उलट दिशेने फिरतात. कीवर्ड वापरणे "वरपासून", "उजवीकडे", "खाली" किंवा "डावीकडे" हे कीवर्ड देखील पहिले वितर्क म्हणून पास केले जाऊ शकतात, हे "0deg" "90deg" "180deg" " ग्रेडियंट लाईन्सचे कोन दर्शवतात. 270deg" अनुक्रमे.

दोन कीवर्ड वापरून कोन देखील सेट केला जाऊ शकतो, उदाहरणार्थ, वरच्या उजवीकडे - ग्रेडियंट लाइन वरच्या उजव्या कोपर्यात निर्देशित केली जाते.

वेगवेगळ्या दिशानिर्देशांमध्ये निर्दिष्ट केलेल्या ग्रेडियंटचे उदाहरण:

Div ( समास: 10px; रुंदी: 200px; उंची: 200px; फ्लोट: डावीकडे; ) #one (पार्श्वभूमी-प्रतिमा: लिनियर-ग्रेडियंट(डावीकडे, काळा, लाल); ) #दोन (पार्श्वभूमी-प्रतिमा: रेखीय-ग्रेडियंट( शीर्षस्थानी डावीकडे, काळा, लाल );

नमूद केल्याप्रमाणे, रेखीय ग्रेडियंटमध्ये स्वल्पविरामाने विभक्त केलेल्या दोनपेक्षा जास्त रंगांची सूची समाविष्ट असू शकते आणि ब्राउझर त्यांना संपूर्ण उपलब्ध क्षेत्रामध्ये समान रीतीने वितरित करेल:

Div ( समास: 10px; रुंदी: 200px; उंची: 200px; फ्लोट: डावीकडे; ) #one (पार्श्वभूमी-प्रतिमा: रेखीय-ग्रेडियंट (उजवीकडे, लाल, निळा, पिवळा); ) #दोन (पार्श्वभूमी-प्रतिमा: रेखीय- ग्रेडियंट (वर डावीकडे, निळा, पांढरा, निळा) प्रयत्न करा »

रंगानंतर, तुम्ही त्याच्यासाठी स्टॉप पोझिशन निर्दिष्ट करू शकता, जे ग्रेडियंटच्या सुरुवातीच्या आणि शेवटच्या बिंदूंच्या सापेक्ष रंगाचे स्थान (जेथे एक रंग दुसऱ्यामध्ये बदलू लागतो) निर्धारित करते. स्टॉप पोझिशन CSS समर्थित युनिट्स किंवा टक्केवारी वापरून निर्दिष्ट केले आहे. टक्केवारी वापरताना, ग्रेडियंट रेषेच्या लांबीवर अवलंबून स्थिती स्टॉप स्थितीची गणना केली जाते. 0% चे मूल्य ग्रेडियंटचा प्रारंभ बिंदू आहे, 100% शेवटचा बिंदू आहे.

Div ( समास: 10px; रुंदी: 200px; उंची: 200px; फ्लोट: डावीकडे; ) #one (पार्श्वभूमी-प्रतिमा: रेखीय-ग्रेडियंट (वर उजवीकडे, निळा, पांढरा 70%, निळा); ) #दोन ( पार्श्वभूमी-प्रतिमा : रेखीय-ग्रेडियंट(उजवीकडे तळाशी, पिवळा 10%, पांढरा, लाल, काळा 90%);) #तीन (पार्श्वभूमी-प्रतिमा: रेखीय-ग्रेडियंट (उजवीकडे, काळा 10%, पिवळा, काळा 90%);) प्रयत्न करा »

रंग मूल्य विविध प्रकारे निर्दिष्ट केले जाऊ शकते, जसे की रंगाचे नाव निर्दिष्ट करणे, हेक्साडेसिमल (HEX) मूल्ये वापरणे, RGB (RGBA) किंवा HSL (HSLA) वाक्यरचना वापरणे. उदाहरणार्थ, पारदर्शकतेसह ग्रेडियंट वापरणे मनोरंजक व्हिज्युअल प्रभाव तयार करण्यासाठी पार्श्वभूमी रंग किंवा ग्रेडियंटच्या खाली असलेल्या प्रतिमेसह वापरले जाऊ शकते:

Div ( समास: 10px; रुंदी: 300px; उंची: 100px; पार्श्वभूमी-रंग: हिरवा; ) #one (पार्श्वभूमी: रेखीय-ग्रेडियंट(डावीकडे, rgb(255,255,0), rgba(255,255,0,0)); ) #दोन (पार्श्वभूमी: रेखीय-ग्रेडियंट(rgb(255,255,255), rgba(255,255,255,0)); )

लवकरच, लवकरच, वेबसाइट्स सहज लोड होतील, आणि त्या अजिबात प्रतिमांशिवाय बनवता येतील.

आतापासूनच आधुनिक ब्राउझरमध्ये तुम्ही CSS वापरून कोणत्याही जटिलतेची ग्रेडियंट पार्श्वभूमी तयार करू शकता आणि कोणत्याही प्रतिमांशिवाय.

प्रतिमांशिवाय CSS ग्रेडियंट तयार करणे

आपण पार्श्वभूमीत राखाडी ते काळ्या रंगात ग्रेडियंट संक्रमण करू इच्छितो असे समजू. हे साध्य करण्यासाठी, W3 कॉर्पोरेशनने CSS3 मध्ये एक विशेष रेखीय-ग्रेडियंट निर्देश वापरण्याचा प्रस्ताव दिला.

तर, आवृत्ती W3 नुसार, ग्रेडियंट पार्श्वभूमी बनवण्यासाठी, फक्त ब्लॉक सिलेक्टरमध्ये लिहा:

पार्श्वभूमी: रेखीय-ग्रेडियंट(प्रारंभ, रंग1 स्थिती1, रंग2 स्थिती2,...,रंग एन स्थितीएन);

आणि ब्राउझर ब्लॉकमध्ये स्वयंचलितपणे ग्रेडियंट पार्श्वभूमी काढेल.

अर्थात, ग्रेडियंटमध्ये अनेक रंग आणि नियंत्रण बिंदू असू शकतात. पॅरामीटर प्रारंभग्रेडियंटचा प्रसार कोणत्या दिशेने व्हायला हवा ते निर्दिष्ट करते - ते एकतर असू शकते शीर्ष अनुलंब दिशात्मक ग्रेडियंटसाठी किंवा बाकी क्षैतिज दिशात्मक साठी.

सर्व ब्राउझर या वैशिष्ट्यास समर्थन देत नाहीत, म्हणून सध्या अनेक युक्त्या आहेत. खूप जुन्या ब्राउझरसाठी, तुम्हाला एकतर काही सरासरी पार्श्वभूमी रंग निर्दिष्ट करणे आवश्यक आहे (तेथे कोणतेही ग्रेडियंट अजिबात नसेल, परंतु पार्श्वभूमी पांढरी नसेल), किंवा ग्रेडियंटसह प्रतिमा निर्दिष्ट करा (तथापि, जर रेखीय-ग्रेडियंट वापरण्याचा हेतू असेल तर CSS मध्ये लोड केलेल्या प्रतिमांची संख्या कमी करणे आहे, नंतर हे निरुपयोगी आहे, कारण सर्व ब्राउझरमध्ये प्रतिमा अद्याप लोड केली जाईल, जरी ती नंतर रेखीय-ग्रेडियंटने बदलली जाईल).
IE-सारख्या ब्राउझरसाठी, तुम्ही फिल्टर-आधारित ग्रेडियंट वापरू शकता आणि वेबकिट (सफारी, क्रोम) आणि गेको (मोझिला) ब्राउझरसाठी, नेहमीप्रमाणे, एक पर्याय आहे: -वेबकिट-ग्रेडियंट आणि -मोज-लिनियर-ग्रेडियंट, जे समान पॅरामीटर्स स्वीकारा. हे सर्व कसे कार्य करावे यासाठी खालील कोड ब्लॉक पहा:

पार्श्वभूमी: #999; फिल्टर: progid:DXImageTransform.Microsoft.gradient(startColorstr="#cccccc", endColorstr="#000000"); पार्श्वभूमी: -वेबकिट-ग्रेडियंट(रेषीय, डावीकडे शीर्षस्थानी, डावीकडे तळाशी, पासून(#ccc), ते(#000)); पार्श्वभूमी: -moz-रेखीय-ग्रेडियंट(शीर्ष, #ccc, #000);

प्रस्तुत केल्यानंतर ते असे दिसते.

CSS ग्रेडियंट्स तुम्हाला दोन किंवा अधिक रंगांची पार्श्वभूमी तयार करण्यास अनुमती देतात जे सहजतेने एकापासून दुसऱ्यामध्ये संक्रमण करतात. ते बऱ्याच काळापासून आमच्यासोबत आहेत आणि त्यांना ब्राउझरचा चांगला सपोर्ट आहे. बहुतेक आधुनिक ब्राउझर त्यांना उपसर्गांशिवाय समजतात, IE9 आणि जुन्यासाठी ग्रेडियंट फिल्टर आहे आणि IE9 साठी तुम्ही SVG वापरू शकता.

ग्रेडियंट कुठेही प्रतिमा वापरल्या जाऊ शकतात: बॅकग्राउंडमध्ये, सूची बुलेट म्हणून, ते सामग्री किंवा सीमा-प्रतिमामध्ये निर्दिष्ट केले जाऊ शकतात.

रेखीय-ग्रेडियंट

रेखीय ग्रेडियंट वापरण्यास अगदी सोपे आहेत. सर्वात मूलभूत ग्रेडियंटसाठी, फक्त प्रारंभ आणि शेवटचे रंग सेट करा:

पार्श्वभूमी: रेखीय-ग्रेडियंट (नारिंगी, सोनेरी);

दोनपेक्षा जास्त रंग कितीही असू शकतात. तुम्ही ग्रेडियंटची दिशा आणि रंगांच्या सीमा (स्टॉपिंग पॉइंट्स) देखील नियंत्रित करू शकता.

दिशा अंश किंवा कीवर्डमध्ये निर्दिष्ट केली जाऊ शकते.

मुख्य शब्द:शीर्षस्थानी = 0deg ; उजवीकडे = ९० अंश; तळाशी = 180deg - डीफॉल्ट मूल्य; डावीकडे = 270deg.

एक कर्ण ग्रेडियंट तयार करण्यासाठी कीवर्ड एकत्र केले जाऊ शकतात, जसे की शीर्ष डावीकडे.

खाली तुम्ही पाहू शकता की लिलाक ते पिवळ्यापर्यंत वेगवेगळ्या दिशानिर्देश कसे कार्य करतात:

येथे पहिल्या चौकोनासाठी कोड आहे, उदाहरणार्थ:

शीर्ष-डावीकडे (पार्श्वभूमी: रेखीय-ग्रेडियंट (वर डावीकडे, जांभळा, किरमिजी रंगाचा, केशरी, सोनेरी);)

एक गोष्ट लक्षात ठेवा की शीर्षस्थानी उजवीकडे 45deg सारखे नाही. ग्रेडियंट रंग ग्रेडियंट दिशा रेषेला लंब असतात. शीर्षस्थानी उजवीकडे, रेखा खालच्या डावीकडून वरच्या उजव्या कोपर्यात 45deg सह जाते - आकृतीच्या आकाराकडे दुर्लक्ष करून, या कोनात काटेकोरपणे स्थित आहे.

आयताकृती आकृत्यांमध्ये फरक स्पष्टपणे दृश्यमान आहे:

तुम्ही ग्रेडियंट रंगांसाठी स्टॉप पॉइंट्स देखील सेट करू शकता;

%, em मध्ये मूल्ये सेट करण्याची उदाहरणे आणि घटकाच्या सीमांच्या पलीकडे जाणारी मूल्ये:

शेजारच्या रंगांचे थांबण्याचे बिंदू जितके जवळ असतील तितकी त्यांच्यातील सीमा अधिक स्पष्ट होईल. अशा प्रकारे तुम्ही पट्टेदार पार्श्वभूमी सहज बनवू शकता:

अशा प्रकारे तुम्ही तयार करू शकता, उदाहरणार्थ, एका बाजूच्या स्तंभाची पार्श्वभूमी, मूळ घटकाच्या संपूर्ण उंचीपर्यंत पसरलेली:

साइडबारच्या पार्श्वभूमीवरील पट्टे हे आणखी एक ग्रेडियंट आहेत ज्यामध्ये पूर्ण पारदर्शकता आणि 30% पारदर्शकतेसह पांढरा असतो. अर्धपारदर्शक रंगांसह ग्रेडियंट सोयीस्कर आहेत कारण ते कोणत्याही रंगाच्या पार्श्वभूमीवर लागू केले जाऊ शकतात.

उदाहरणातील ग्रेडियंट जटिल, लांब कोडमध्ये सेट केला आहे कारण पट्टे फक्त साइडबारसाठी पार्श्वभूमीच्या वर ठेवल्या पाहिजेत. जर तुम्ही सर्व काही एका ब्लॉकसाठी पार्श्वभूमी बनवण्याचा प्रयत्न केला नाही, तर तुम्ही स्यूडो-एलिमेंट वापरून समस्या सोडवू शकता.

कोणतेही निर्बंध नसल्यास, कोड खूपच लहान असू शकतो:

प्रकाश (पार्श्वभूमी: पीचपफ रेखीय-ग्रेडियंट(90deg, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, .4) 50%) केंद्र केंद्र / 2em; ) .गडद (पार्श्वभूमी: स्टील निळा रेखीय-ग्रेडियंट(rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, .2) 50%) केंद्र केंद्र / 100% 1em )

पहिल्या ओळीत आम्ही घटकाचा पार्श्वभूमी रंग सेट करतो, प्रकार आणि दिशा (रंग आणि दिशा वगळली जाऊ शकते), दुसऱ्या ओळीत आम्ही ग्रेडियंट रंग आणि त्यांच्यामधील सीमा परिभाषित करतो, तिसऱ्या ओळीत आम्ही स्थान सेट करतो आणि परिणामी प्रतिमेचा आकार. सर्वात महत्वाचा भाग म्हणजे आकार. डीफॉल्टनुसार, पार्श्वभूमीची पुनरावृत्ती होते, त्यामुळे परिणामी नमुना घटकाची पार्श्वभूमी भरेल. खूप सोपे आणि समजण्यासारखे :)

संपूर्ण नोंद एका ओळीत केली जाऊ शकते, परंतु वाचनीयतेसाठी अनेकांमध्ये लिहिणे अधिक सोयीचे आहे, विशेषतः जटिल ग्रेडियंटसाठी.

हे जाणून घेणे देखील महत्त्वाचे आहे की पारदर्शक कीवर्डचा अर्थ पारदर्शक काळा आहे, पारदर्शक पांढरा नाही, म्हणून जर तुम्ही ते Firefox मध्ये वापरत असाल तर तुम्हाला असे काहीतरी मिळेल:

हे टाळण्यासाठी, इच्छित सावलीचे पूर्णपणे पारदर्शक रंग वापरा, उदाहरणार्थ, पांढरा: rgba(255, 255, 255, 0) किंवा काळा rgba(0, 0, 0, 0) . आपण रंग सेट करण्याच्या वेगवेगळ्या पद्धतींबद्दल वाचू शकता.

विशिष्ट रंगाचे आरजीबी नोटेशन शोधण्यासाठी, तुम्ही वापरू शकता CSS.coloratum, Lea Verou चे एक वाद्य.

नेहमीच्या रेखीय-ग्रेडियंट व्यतिरिक्त, आपण पुनरावृत्ती-रेखीय-ग्रेडियंट बनवू शकता - एक पुनरावृत्ती ग्रेडियंट

नमुना कोड:

पार्श्वभूमी: पुनरावृत्ती-रेखीय-ग्रेडियंट(हिरवा, हिरवा .5em, पारदर्शक .5em, पारदर्शक 1em);

दुर्दैवाने, पुनरावृत्ती होणारे ग्रेडियंट अव्यवस्थितपणे वागतात आणि केवळ त्या नमुन्यांसाठी योग्य आहेत ज्यांना अचूकतेची पर्वा नाही. तुम्हाला अचूकता हवी असल्यास, पार्श्वभूमी-आकार आणि पार्श्वभूमी-पुनरावृत्तीच्या संयोजनात रेखीय-ग्रेडियंट वापरा.

ग्रेडियंटला बॉक्स-शॅडो सारखीच मर्यादा असते: त्यांना वैयक्तिक रंग किंवा दिशा दिली जाऊ शकत नाही. यामुळे कोड डुप्लिकेशन होते आणि जटिल ग्रेडियंट तयार करताना प्रीप्रोसेसर वापरण्याची तातडीची आवश्यकता असते.

दुसरी मर्यादा अशी आहे की ग्रेडियंट ॲनिमेटेड नसतात, ज्यावर काही प्रमाणात काम केले जाऊ शकते.

क्रॉस-ब्राउझर ग्रेडियंट द्रुतपणे तयार करण्यासाठी एक अतिशय सोयीस्कर साधन आहे: colorzilla.com/gradient-editor/. आधुनिक ब्राउझरसाठी कोड व्यतिरिक्त, ते 9 वी साठी जुन्या IE आणि SVG साठी कोड ऑफर करेल.

मूलभूत पार्श्वभूमी प्रतिमा नियंत्रणांसह एकत्रित केलेले, ग्रेडियंट आपल्याला प्रतिमा अजिबात न वापरता विविध प्रकारच्या जटिलतेची पार्श्वभूमी तयार करण्याची उत्तम क्षमता देतात. तुम्ही क्लिष्ट आणि मनोरंजक नमुने तयार करण्यासाठी ग्रेडियंट वापरू शकता, परंतु तो पूर्णपणे वेगळा विषय आहे.

शेवटचे अपडेट: 04/21/2016

ग्रेडियंट एका रंगातून दुसऱ्या रंगात सहज संक्रमण दर्शवतात. CSS3 मध्ये अनेक अंगभूत ग्रेडियंट आहेत जे तुम्ही घटकाची पार्श्वभूमी तयार करण्यासाठी वापरू शकता.

CSS मधील ग्रेडियंट कोणत्याही विशेष गुणधर्माचे प्रतिनिधित्व करत नाहीत. ते फक्त एक मूल्य तयार करतात जे पार्श्वभूमी-प्रतिमा गुणधर्मास नियुक्त केले जाते.

एक रेखीय ग्रेडियंट एका घटकाच्या एका टोकापासून दुसऱ्या टोकापर्यंत एका सरळ रेषेत विस्तारतो, एका रंगापासून दुसऱ्या रंगात एक गुळगुळीत संक्रमण तयार करतो.

ग्रेडियंट तयार करण्यासाठी तुम्हाला त्याची सुरुवात आणि अनेक रंग निर्दिष्ट करणे आवश्यक आहे, उदाहरणार्थ:

पार्श्वभूमी-प्रतिमा: रेखीय-ग्रेडियंट (डावीकडे, काळा, पांढरा);

या प्रकरणात, ग्रेडियंटची सुरुवात घटकाची डावी धार असेल, जी डावीकडील मूल्याद्वारे दर्शविली जाते. ग्रेडियंट रंग: काळा आणि पांढरा. म्हणजेच, घटकाच्या डाव्या काठावरुन उजवीकडे प्रारंभ करून काळ्या ते पांढर्या रंगात एक गुळगुळीत संक्रमण होईल.

ग्रेडियंट वापरण्यात एक कमतरता आहे - ब्राउझरची विविधता तुम्हाला विक्रेता उपसर्ग वापरण्यास भाग पाडते:

वेबकिट- /* Google Chrome, Safari, Microsoft Edge, Opera साठी वरील आवृत्ती 15 */ -moz- /* Mozilla Firefox साठी */ -o- /* Opera साठी वरील आवृत्ती 15 (Opera 12) */

तर, ग्रेडियंटचा पूर्ण वापर असे दिसेल:

ग्रेडियंटची सुरुवात सेट करण्यासाठी, तुम्ही खालील मूल्ये वापरू शकता: डावीकडून (डावीकडून उजवीकडे), उजवीकडे (उजवीकडून डावीकडे), वरपासून (वरपासून खालपर्यंत) किंवा तळापासून (खाली ते वर). उदाहरणार्थ, अनुलंब ग्रेडियंट असे दिसेल:

पार्श्वभूमी-प्रतिमा: रेखीय-ग्रेडियंट (तळाशी, काळा, पांढरा);

आपण दोन मूल्ये वापरून कर्ण दिशा देखील सेट करू शकता:

पार्श्वभूमी-प्रतिमा: रेखीय-ग्रेडियंट (वर डावीकडे, काळा, पांढरा);

शीर्ष किंवा डावीकडील विशिष्ट मूल्यांव्यतिरिक्त, आपण 0 ते 360 पर्यंतचा कोन देखील निर्दिष्ट करू शकता, जो ग्रेडियंटची दिशा निर्धारित करेल:

पार्श्वभूमी-प्रतिमा: रेखीय-ग्रेडियंट (30deg, काळा, पांढरा);

कोनांच्या मूल्यानंतर deg हा शब्द दर्शविला जातो.

उदाहरणार्थ, 0deg म्हणजे ग्रेडियंट डावीकडून सुरू होतो आणि उजवीकडे सरकतो, तर 45deg म्हणजे खालच्या डावीकडून सुरू होतो आणि वरच्या उजवीकडे 45° कोनात सरकतो.

ग्रेडियंटची सुरुवात परिभाषित केल्यानंतर, तुम्ही लागू करण्यासाठी रंग किंवा संदर्भ बिंदू निर्दिष्ट करू शकता. दोन रंग असण्याची गरज नाही, आणखी काही असू शकतात:

पार्श्वभूमी-प्रतिमा: रेखीय-ग्रेडियंट (शीर्ष, लाल, #ccc, निळा);

लागू केलेले सर्व रंग समान रीतीने वितरीत केले जातात. तथापि, आपण रंग बिंदूंसाठी विशिष्ट पार्श्वभूमी स्थाने देखील निर्दिष्ट करू शकता. हे करण्यासाठी, रंगानंतर दुसरे मूल्य जोडले जाते, जे बिंदूची स्थिती निर्धारित करते.

पार्श्वभूमी-प्रतिमा: रेखीय-ग्रेडियंट(डावीकडे, #ccc, लाल 20%, लाल 80%, #ccc);

ग्रेडियंटची पुनरावृत्ती

रिपीटिंग-लिनियर-ग्रेडियंट वापरून तुम्ही रिपीट होणारे रेखीय ग्रेडियंट तयार करू शकता. उदाहरणार्थ:

पार्श्वभूमी-प्रतिमा: पुनरावृत्ती-रेखीय-ग्रेडियंट(डावीकडे, #ccc 20px, लाल 30px, rgba(0, 0, 126, .5) 40px); पार्श्वभूमी-प्रतिमा: -moz-पुनरावृत्ती-रेखीय-ग्रेडियंट(डावीकडे, #ccc 20px, लाल 30px, rgba(0, 0, 126, .5) 40px); पार्श्वभूमी-प्रतिमा: -वेबकिट-रिपीटिंग-लिनियर-ग्रेडियंट(डावीकडे, #ccc 20px, लाल 30px, rgba(0, 0, 126, .5) 40px);

या प्रकरणात, ग्रेडियंट घटकाच्या डाव्या काठापासून राखाडी रंगाच्या (#ccc) 20 पिक्सेल रुंदीच्या पट्ट्यासह सुरू होतो, नंतर 30 पिक्सेलपर्यंत तो लाल रंगात जातो आणि नंतर 40 पिक्सेलपर्यंत तो हलका निळा होतो. (rgba(0, 0 , 126, .5)). ब्राउझर नंतर घटकाची संपूर्ण पृष्ठभाग भरेपर्यंत ग्रेडियंटची पुनरावृत्ती करतो.