Css ग्रेडियंट बॅकग्राउंड फिल. रेखीय ग्रेडियंट

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 साठी कोड ऑफर करेल.

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

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

पूर्वी, पार्श्वभूमी प्रतिमा ग्रेडियंट प्रभाव तयार करण्यासाठी वापरल्या जात होत्या. आता तुम्ही ग्रेडियंट बॅकग्राउंड तयार करण्यासाठी 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 मध्ये दोन प्रकारचे ग्रेडियंट आहेत:

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

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

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

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

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

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

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 मधील ग्रेडियंट्स सशक्त आहेत, पर्यायांची अनंत संख्या दिली आहे.

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

CSS मध्ये पार्श्वभूमी रेखीय ग्रेडियंट कसा बनवायचा

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

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

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