CSS मध्ये ग्रेडियंट. लिनियर-ग्रेडियंट(): बॅकग्राउंडमध्ये रेखीय ग्रेडियंट

चेरचर 26.07.2019

विंडोज फोनसाठी

a! ग्रेडियंट हे रंग हाताळण्यासाठी एक उत्कृष्ट साधन आहे CSS3. वेब पृष्ठावर ग्रेडियंट इफेक्ट तयार करण्यासाठी प्रतिमा वापरण्याऐवजी, ते वापरणे अधिक फायदेशीर ठरेल. CSS3 ग्रेडियंटआणि त्याद्वारे साइट "हलकी" करा. कारण वापरकर्त्याला पार्श्वभूमी प्रतिमा लोड करण्यासाठी वेळ आणि रहदारी वाया घालवण्याची गरज नाही. ग्रेडियंटचे दोन मुख्य प्रकार आहेत: रेडियल आणि रेखीय. आजची पोस्ट त्यांच्याबद्दल असेल.

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

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

सर्वसाधारणपणे, ग्रेडियंट (रेखीय) वाक्यरचना यासारखे दिसते:

1
2
3
4
5
6
7

div(
पार्श्वभूमी-प्रतिमा : -वेबकिट-रेखीय-ग्रेडियंट (शीर्ष , #FF5A00 0% , #FFAE00 100% );
पार्श्वभूमी-प्रतिमा : -moz-रेखीय-ग्रेडियंट(शीर्ष , #FF5A00 0% , #FFAE00 100% );
पार्श्वभूमी-प्रतिमा : -ms-रेखीय-ग्रेडियंट(शीर्ष , #FF5A00 0% , #FFAE00 100% );
पार्श्वभूमी-प्रतिमा : -o-रेखीय-ग्रेडियंट(शीर्ष , #FF5A00 0% , #FFAE00 100% );

}

तर, क्रमाने सर्वकाही बोलूया.

सर्वप्रथम, रेखीय ग्रेडियंट रेखीय-ग्रेडियंट() फंक्शनद्वारे घोषित केला जातो. फंक्शनचे तीन मुख्य अर्थ आहेत. प्रथम मूल्य प्रारंभिक स्थिती निर्धारित करते. उदाहरण शीर्षस्थानी सूचित करते i.e. वरून सुरुवातीची स्थिती. तुम्ही तळाशी, डावीकडे आणि उजवीकडे देखील वापरू शकता;

कोन ऋण असल्यास, स्थिती खालच्या डाव्या कोपऱ्यापासून वरच्या डावीकडे बदलेल.

फंक्शनचे दुसरे मूल्य म्हणजे सुरुवातीचा रंग आणि त्याची स्टॉप स्थिती, जी टक्केवारी म्हणून दर्शविली जाते. ही स्थिती घोषित करणे आवश्यक नाही; पहिल्या रंगासाठी ब्राउझर 0% वर डीफॉल्ट असेल.

शेवटचे मूल्य म्हणजे दुसरा रंग आणि त्याची स्टॉप स्थिती. 100% पर्यंत डीफॉल्ट. या अत्यंत मूल्यांचा अर्थ असा होतो की पहिला रंग लगेच दुसऱ्यामध्ये बदलू लागतो. तथापि, जर आपण पहिला रंग 50% वर सेट केला, तर तो फक्त उपलब्ध उंचीच्या मध्यापासून दुसऱ्या रंगात बदलण्यास सुरुवात करेल. हा कोड असा दिसतो:

आम्हाला समान उंचीच्या पट्ट्या मिळतात. स्पष्ट सीमा सह, रंग संक्रमण होणार नाही. हे कसे कार्य करते हे अधिक चांगल्या प्रकारे समजून घेण्यासाठी, मूल्यांसह प्रयोग करा.

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

div(
पार्श्वभूमी : रेडियल-ग्रेडियंट ( वर्तुळ , #F9E497 , #FFAE00 );
}

तुम्ही आकार निर्दिष्ट न केल्यास, डीफॉल्ट एक लंबवर्तुळ असेल.

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

आदेश संयोजन:

शीर्षस्थानी केंद्र - शीर्ष - 50% 0%;
वरच्या डाव्या कोपर्यात - डाव्या शीर्षस्थानी - 0% 0%;
वरच्या उजव्या कोपर्यात - उजवा शीर्ष - 100% 0%;
मध्यभागी - केंद्र - 50% 50%;
डावे केंद्र - डावे केंद्र - 0% 50%;
उजवे केंद्र - उजवे केंद्र - 100% 50%;
तळ मध्यभागी - तळाशी - 50% 100%;
खालच्या डाव्या कोपर्यात - डाव्या तळाशी - 0% 100%;
खालच्या उजव्या कोपर्यात - उजव्या तळाशी - 100% 100%.

येथे टक्केवारीसह एक उदाहरण आहे:

div(
पार्श्वभूमी-प्रतिमा : रेडियल-ग्रेडियंट (70% 20% , वर्तुळ , #F9E497 , #FFAE00 );
}

प्रथम अक्ष मूल्य एक्समध्ये दुसरा यू.

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

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

div(
पार्श्वभूमी-प्रतिमा : रेडियल-ग्रेडियंट (230px 50px, लंबवर्तुळ जवळची बाजू, पांढरा, निळा) ;
}

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

आणि आता दूरच्या बाजूंना:

div(
पार्श्वभूमी-प्रतिमा : रेडियल-ग्रेडियंट (230px 50px, लंबवर्तुळ सर्वात दूरची बाजू, पांढरा, निळा );
}

परिणाम, जसे ते म्हणतात, स्पष्ट आहे. आकार अंतरापासून दूरच्या बाजूने मोजला जातो.

रेडियल तसेच रेखीय ग्रेडियंटमध्ये, स्टॉप पोझिशन्स रंगासाठी वापरल्या जाऊ शकतात. मी हे देखील लक्षात घेऊ इच्छितो की जर तुम्हाला रंग पारदर्शकता प्राप्त करायची असेल तर तुम्ही rgba वापरावे.

div(
पार्श्वभूमी-प्रतिमा : रेखीय-ग्रेडियंट(शीर्ष , rgba (255 , 90 , 0 , 0.2 ) , rgba (255 , 174 , 0 , 0.2 ) );
}

अल्फा चॅनेल, शेवटचा आणि 0.2 च्या समान, सूचित करतो की 100% पैकी फक्त 20% रंग वापरला जातो.

दोन्ही प्रकारात CSS3 ग्रेडियंटआपण दोन नाही तर अनेक रंग वापरू शकता.

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

दोन्ही प्रकारांसाठी, पुनरावृत्ती करणारे रंग वापरले जाऊ शकतात. म्हणजेच या मूल्यांमधून एक चक्र तयार होते. ग्रेडियंट फंक्शन्सची पुनरावृत्ती करणे, रेखीयसाठी पुनरावृत्ती-रेखीय-ग्रेडियंट() आणि रेडियलसाठी पुनरावृत्ती-रेडियल-ग्रेडियंट().

div(
पार्श्वभूमी-प्रतिमा : पुनरावृत्ती-रेडियल-ग्रेडियंट (लाल, निळा 20px, लाल 40px);
}

0% , #FFAE00 100% );
पार्श्वभूमी-प्रतिमा : -ms-रेखीय-ग्रेडियंट(शीर्ष , #FF5A00 0% , #FFAE00 100% );
/* IE 10+ साठी */
पार्श्वभूमी-प्रतिमा : -o-रेखीय-ग्रेडियंट(शीर्ष , #FF5A00 0% , #FFAE00 100% ); /* ऑपेरा साठी */
}

div(
पार्श्वभूमी-प्रतिमा : रेखीय-ग्रेडियंट(शीर्ष , #FF5A00 0% , #FFAE00 100% );
}

/* मानक वाक्यरचना */

फिल्टर : progid: DXImageTransform.Microsoft .gradient(startColorstr= #33FF5A00 , endColorstr= #33FFAE00 );

जिथे हॅश नंतर 33 उजवीकडे रंग संपृक्ततेची टक्केवारी आहे.

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

सी

आणि असेच.

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

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

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

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

ब्लॉकवर पार्श्वभूमी ग्रेडियंट

400x400px

ग्रेडियंट पॉइंट रंग CSS मध्ये उपलब्ध असलेल्या कोणत्याही फॉरमॅटमध्ये लिहिले जाऊ शकतात, मग ते हेक्साडेसिमल, RGB किंवा इतर असो. ग्रेडियंटची दिशा टू उपसर्ग वापरून निर्दिष्ट केली जाते आणि नंतर डावे, उजवे, वर आणि खालचे कीवर्ड, जे उतार बदलण्यासाठी एकत्र केले जाऊ शकतात. उदाहरणार्थ:

पार्श्वभूमी-प्रतिमा: रेखीय-ग्रेडियंट(खाली उजवीकडे, #ee82ee, #ff0000);

आम्ही आधीच म्हटल्याप्रमाणे, ग्रेडियंटमध्ये दोनपेक्षा जास्त अँकर पॉइंट असू शकतात. या प्रकरणात, पार्श्वभूमी सहजतेने पहिल्या रंगापासून दुसऱ्यामध्ये, दुसऱ्यापासून तिसऱ्या, तिसऱ्यापासून चौथ्यापर्यंत आणि असेच ते अंतिम संदर्भ बिंदूपर्यंत पोहोचेपर्यंत सहजतेने संक्रमण करेल. जर तुम्हाला ग्रेडियंटमध्ये या बिंदूंची संख्या वाढवायची असेल, तर त्यांना स्वल्पविरामाने विभक्त करून जोडा. उदाहरणार्थ:

पार्श्वभूमी-प्रतिमा: रेखीय-ग्रेडियंट(145deg, #ee82ee, slateblue, #ffd86a, जांभळा);

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

संक्रमण लांबी

डीफॉल्टनुसार, ब्राउझर ठिपके समान अंतरावर ठेवतो, त्यामुळे श्रेणीकरण एकसमान असते. परंतु हे अंतर CSS युनिट्स वापरून नियंत्रित केले जाऊ शकते. खालील उदाहरण पाहू.

पार्श्वभूमी-प्रतिमा: रेखीय-ग्रेडियंट(#92009b 20%, #f5e944 90%, #00ffa2);

आमच्या कोडमध्ये, रंग #92009b नंतर मूल्य 20% सूचित केले आहे. ते पहिल्या अँकर बिंदूजवळ असल्याने, याचा अर्थ असा की घटकाच्या लांबीच्या 20% निर्दिष्ट रंगाने रंगवले जातील. ज्यानंतर ग्रेडियंट सुरू होतो: 90% चे मूल्य ब्राउझरला घटकाच्या लांबीच्या 90% (20% पासून) रंग #f5e944 पर्यंत पोहोचण्यास सांगते. त्यानंतर उरलेल्या जागेत तिसऱ्या रंगाचे संक्रमण सुरू होते - #00ffa2.

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

विक्रेता उपसर्ग

क्रॉस-ब्राउझर सुसंगतता सुनिश्चित करण्यासाठी, काही उशीरा CSS गुणधर्म विक्रेता उपसर्गांसह जोडणे आवश्यक आहे - ब्राउझर डेव्हलपरद्वारे जोडलेले विशेष उपसर्ग:

-वेबकिट- - Chrome, Safari, Android साठी उपसर्ग;
-moz- हा फायरफॉक्ससाठी उपसर्ग आहे;
-o- हे ऑपेरासाठी उपसर्ग आहे.

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

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

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

इंटरनेट एक्सप्लोरर समर्थन

दुर्दैवाने, ग्रेडियंट पार्श्वभूमी केवळ IE10+ मध्ये कार्य करते. मागील आवृत्त्या ते समजत नाहीत आणि त्याकडे दुर्लक्ष करतील. जुन्या ब्राउझरमध्ये किमान एक सामान्य पार्श्वभूमी प्रदान करण्यासाठी, आपण तथाकथित तयार करू शकता. "स्टब": योग्य सावली निवडा आणि पार्श्वभूमी-रंग गुणधर्म लिहा प्रतीग्रेडियंटसह मालमत्ता. अशा प्रकारे, जुना ब्राउझर "फॉलबॅक" पार्श्वभूमी रंग लागू करेल आणि त्याला माहित नसलेले गुणधर्म वगळेल, तर अधिक आधुनिक ब्राउझर घन पार्श्वभूमीवर ग्रेडियंट पार्श्वभूमी आच्छादित करेल आणि अस्पष्ट करेल.

जर तुमच्याकडे अर्ध-पारदर्शक ग्रेडियंट सेट असेल (उदाहरणार्थ, RGBA कलर फॉरमॅट वापरून) आणि पार्श्वभूमी प्लेसहोल्डर दर्शवू इच्छित नसल्यास, बॅकग्राउंड-इमेज ऐवजी बॅकग्राउंड शॉर्टहँड गुणधर्म वापरून ग्रेडियंट सेट करा. नंतर पार्श्वभूमी-रंग मूल्य पारदर्शक वर अधिलिखित केले जाईल.

ट्यूटोरियलमध्ये पुढे: repeating-linear-gradient() - रेखीय ग्रेडियंटची पुनरावृत्ती.

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

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

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

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

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

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

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

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

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

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

CSS3 मध्ये स्टाइलिंग टेबल्स

रेखीय काळा आणि पांढरा ग्रेडियंट

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

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

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

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

शीर्ष किंवा डावीकडील विशिष्ट मूल्यांव्यतिरिक्त, आपण 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)). ब्राउझर नंतर घटकाची संपूर्ण पृष्ठभाग भरेपर्यंत ग्रेडियंटची पुनरावृत्ती करतो.

व्लाड मर्झेविच

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

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

उदाहरण 1: ग्रेडियंट

ग्रेडियंट

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

या उदाहरणाचा परिणाम अंजीर मध्ये दर्शविला आहे. १.

तांदूळ. 1. परिच्छेदासाठी रेखीय ग्रेडियंट

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

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

टेबल 1. ग्रेडियंट प्रकार

स्थिती		वर्णन
शीर्षस्थानी	0 डिग्री	तळापासून वरपर्यंत.
डावीकडे	270 अंश	उजवीकडून डावीकडे.
तळाशी	180 अंश	वर खाली.
उजवीकडे	90 अंश	डावीकडून उजवीकडे.
वर डावीकडे		खालच्या उजव्या कोपऱ्यापासून वरच्या डावीकडे.
वर उजवीकडे		खालच्या डावीकडून वरच्या उजवीकडे.
तळाशी डावीकडे		वरच्या उजव्या कोपऱ्यापासून खालच्या डावीकडे.
तळाशी उजवीकडे		वरून डावीकडून खालपर्यंत उजवीकडे.

कीवर्डऐवजी, आपण ग्रेडियंट रेषेचा उतार निर्दिष्ट करू शकता, जे ग्रेडियंटची दिशा दर्शवते. प्रथम, कोनाचे सकारात्मक किंवा नकारात्मक मूल्य लिहिले जाते, नंतर त्यात deg जोडले जाते.

शून्य अंश (किंवा 360º) तळापासून वरपर्यंत ग्रेडियंटशी संबंधित आहे, नंतर काउंटडाउन घड्याळाच्या दिशेने आहे. ग्रेडियंट रेषेचा उताराचा कोन खाली दर्शविला आहे.

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

जटिल ग्रेडियंट्स तयार करण्यासाठी, दोन रंग यापुढे पुरेसे नसतील; वाक्यरचना आपल्याला अमर्यादित संख्येने जोडण्याची परवानगी देते, स्वल्पविरामाने विभक्त केलेले रंग. या प्रकरणात, उदाहरण 2 मध्ये दर्शविल्याप्रमाणे, तुम्ही पारदर्शक रंग (पारदर्शक कीवर्ड), तसेच RGBA फॉरमॅट वापरून पारदर्शक वापरू शकता.

उदाहरण 2: अर्धपारदर्शक रंग

HTML5 CSS3 IE 9 IE 10 Cr Op Sa Fx

ग्रेडियंट

मुक्त श्लोकाची उत्पत्ती, बाह्य प्रभाव असूनही, शाब्दिक धातुभाषेला दूर करते.

या उदाहरणाचा परिणाम अंजीर मध्ये दर्शविला आहे. 2.

तांदूळ. 2. अर्धपारदर्शक रंगांसह ग्रेडियंट

ग्रेडियंटमध्ये रंग अचूकपणे ठेवण्यासाठी, कलर व्हॅल्यू नंतर टक्केवारी, पिक्सेल किंवा इतर युनिटमध्ये त्याच्या स्थानावर येते. उदाहरणार्थ, रेकॉर्ड लाल 0%, नारिंगी 50%, पिवळा 100%म्हणजे ग्रेडियंट लाल, नंतर 50% नारिंगी आणि नंतर संपूर्णपणे पिवळा सुरू होतो. साधेपणासाठी, 0% आणि 100% सारख्या अत्यंत युनिट्स वगळल्या जाऊ शकतात, ते डीफॉल्टनुसार गृहीत धरले जातात; उदाहरण 3 हे ग्रेडियंट बटण कसे तयार करायचे ते दाखवते जेथे तीन पैकी दुसऱ्या रंगाची स्थिती 36% वर सेट केली जाते.

उदाहरण 3: ग्रेडियंट बटण

HTML5 CSS3 IE 9 IE 10 Cr Op Sa Fx

बटण

या उदाहरणाचा परिणाम अंजीर मध्ये दर्शविला आहे. 3.

तांदूळ. 3. ग्रेडियंट बटण

रंगाची स्थिती सेट करून, आपण रंगांमध्ये तीक्ष्ण संक्रमणे मिळवू शकता, जे शेवटी मोनोक्रोमॅटिक पट्ट्यांचा संच देते. तर, दोन रंगांसाठी तुम्हाला चार रंग निर्दिष्ट करणे आवश्यक आहे, पहिले दोन रंग समान आहेत आणि 0% ते 50% पासून सुरू होतात, उर्वरित रंग देखील समान आहेत आणि 50% ते 100% पर्यंत सुरू आहेत. उदाहरणामध्ये, वेब पृष्ठाच्या पार्श्वभूमी म्हणून 4 पट्टे जोडले आहेत. अत्यंत मूल्ये आपोआप बदलली जातात या वस्तुस्थितीमुळे, ते निर्दिष्ट केले जाऊ शकत नाहीत, म्हणून फक्त दोन रंग लिहिणे पुरेसे आहे.

उदाहरण 4. साधे पट्टे

HTML5 CSS3 IE 9 IE 10 Cr Op Sa Fx

आडवे पट्टे

ठराविक युरोपियन बुर्जुआ आणि आदरणीयपणा अधिकृत भाषेद्वारे सुरेखपणे स्पष्ट केले आहे.

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

तांदूळ. 4. आडव्या पट्ट्यांची पार्श्वभूमी

ग्रेडियंट वेब डिझायनर्समध्ये खूप लोकप्रिय आहेत, परंतु प्रत्येक ब्राउझरसाठी भिन्न गुणधर्मांद्वारे आणि अनेक रंग निर्दिष्ट करून ते जोडणे क्लिष्ट आहे. तुमच्यासाठी ग्रेडियंट तयार करणे आणि ते तुमच्या कोडमध्ये घालणे सोपे करण्यासाठी, मी www.colorzilla.com/gradient-editor या साइटची शिफारस करतो, ज्यामुळे ग्रेडियंट सेट करणे सोपे होते आणि इच्छित कोड त्वरित मिळवता येतो. तेथे रेडीमेड टेम्पलेट्स (प्रीसेट), परिणाम पाहणे (पूर्वावलोकन), रंग समायोजित करणे (ॲडजस्टमेंट), अंतिम कोड (सीएसएस) आहेत जे फिल्टरद्वारे IE ला समर्थन देतात. ज्यांनी फोटोशॉप किंवा दुसऱ्या ग्राफिक एडिटरमध्ये काम केले आहे त्यांच्यासाठी ग्रेडियंट तयार करणे केकच्या तुकड्यासारखे वाटेल, परंतु इतरांसाठी ते पटकन शोधणे कठीण होणार नाही. सर्वसाधारणपणे, मी अत्यंत शिफारस करतो.

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

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

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

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

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

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

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

मुख्य शब्द:शीर्षस्थानी = 0deg ;

उजवीकडे = ९० अंश;

तळाशी = 180deg - डीफॉल्ट मूल्य;

डावीकडे = 270deg.

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

खाली आपण लिलाकपासून पिवळ्यापर्यंत पसरण्यासाठी भिन्न दिशानिर्देश कसे कार्य करतात ते पाहू शकता:

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

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

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

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

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

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

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

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

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

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

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

हे जाणून घेणे देखील महत्त्वाचे आहे की पारदर्शक कीवर्डचा अर्थ पारदर्शक काळा आहे, पारदर्शक पांढरा नाही, म्हणून जर तुम्ही ते 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 साठी कोड ऑफर करेल.

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