अनुलंब ग्रेडियंट css. CSS3 ग्रेडियंट (रेखीय आणि रेडियल ग्रेडियंट) वर एक नजर. ग्रेडियंट सीएसएस कोड तयार आहे

इतर मॉडेल 23.02.2019
चेरचर

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

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

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

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

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

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

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

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

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

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

साधे अनुलंब पार्श्वभूमी ग्रेडियंट.

डीफॉल्ट:

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

दिशा बदलणे

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

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

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

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

रुंदी: 200px; ) डावीकडून कर्णरेखा ग्रेडियंटवरचा कोपरा

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

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

180deg डीफॉल्ट आहे, वरपासून खालपर्यंत.

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

20 अंशांच्या कोनासह कर्णरेषीय ग्रेडियंट.

अधिक रंग जोडणे तुम्हाला आवडेल तितके रंग तुम्ही घालू शकता. ते करतीलसमान रीतीने वितरित

  • अक्षाच्या बाजूने:दोन रंग
  • : 0% आणि 100%तीन रंग
  • : 0%, 50% आणि 100%चार रंग

: ०%, ३३%, ६७% आणि १००%

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

अगदी कुरूप ग्रेडियंट, परंतु येथे कल्पना महत्वाची आहे.

विशिष्ट रंग बिंदू परिभाषित करणे जर तुम्हाला रंग समान रीतीने वितरित करायचा नसेल तर तुम्ही सेट करू शकताविशिष्ट रंग पोझिशन्स

टक्केवारी (%) किंवा पिक्सेल (px) वापरून:

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

तसेच एक कुरुप ग्रेडियंट, परंतु कल्पना येथे महत्वाची आहे.

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

पिवळा रंग ग्रेडियंटचा अर्धा भाग व्यापतो, 50% ते 100% च्या शेवटी.

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

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

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

हे सूर्यासारखे बरेच आहे, नाही का?

डीफॉल्ट:

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

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

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

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

उदास दिवस.

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

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

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

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

तो कसा विस्तारतो हे पाहण्यासाठी तुमचा माउस आकाशातील या हिरव्या ताऱ्यावर फिरवा.

निश्चित आकार

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

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

गुलाबी समुद्रात एक लहान जांभळा डिस्क.

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

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

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

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

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

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

400x400px

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

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

याव्यतिरिक्त, आपण सकारात्मक किंवा वापरून कलतेचा कोन थेट निर्दिष्ट करू शकता ऋण संख्याउपसर्ग deg सह (जागाशिवाय). 0º किंवा 360º दिलेल्या कोनात, ग्रेडियंट रेषा खालपासून वरपर्यंत जाईल. झुकणारा कोन जसजसा वाढतो, वेक्टर घड्याळाच्या दिशेने फिरतो (ऋण मूल्य वापरून हालचाल उलटते). उदाहरण कोड एंट्री:

पार्श्वभूमी-प्रतिमा: रेखीय-ग्रेडियंट(-110deg, #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() - रेखीय ग्रेडियंटची पुनरावृत्ती.

लाल

हिरवा

निळा

लाल

हिरवा

निळा

ग्रेडियंट सीएसएस कोड तयार आहे

ग्रेडियंट सीएसएस जनरेटरचे पॅरामीटर्स ऑनलाइन

  1. डावा ग्रेडियंट रंग. आम्ही लाल, हिरवा आणि निळा यांचे मिश्रण वापरून डावीकडील ब्लॉकमधून कोणत्याही सावलीचा रंग निवडतो.
  2. उजवा ग्रेडियंट रंग. उजवीकडे रंग सावली निवडा.
  3. ग्रेडियंट दरम्यान पातळी. ब्लॉकच्या डाव्या बाजूचे अंतर जेथे ग्रेडियंट सुरू होईल.
  4. ग्रेडियंट ब्लर. रंगांमधील स्तरावरून दोन रंग मिसळणे.
  5. ग्रेडियंट सीमा कोन. एकसमान रंग बदलण्यासाठी 0 ते 365 अंशांपर्यंत रेषेची दिशा.

सर्व ग्रेडियंट सीएसएस गुणधर्म

css ग्रेडियंट मधील घटकांवर लागू केला जातो कर्ज देणारे पृष्ठजसे

  • बटण ग्रेडियंटलँडिंग पृष्ठ सजवण्यासाठी.
  • मागे css ग्रेडियंट पार्श्वभूमीविभाग
  • ग्रेडियंट चित्रेपारदर्शकतेसह css.
  • Css मजकूर ग्रेडियंटमोठे शीर्षक.

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

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

ग्रेडियंट सीएसएस उदाहरणे

चला सर्व प्रकारच्या ग्रेडियंटची उदाहरणे पाहू.

1). रेखीय-ग्रेडियंट() रेखीय ग्रेडियंटचे उदाहरण

यू रेखीय ग्रेडियंटकलतेचा कोन पॅरामीटरद्वारे निर्दिष्ट केला जातो पदवीकिंवा कळा

ग्रेडियंट1 (
पार्श्वभूमी: रेखीय-ग्रेडियंट(45deg, Aquamarine, GreenPellow);
}

ग्रेडियंट2 (
पार्श्वभूमी: रेखीय-ग्रेडियंट (वर डावीकडे, फुशिया, मिडनाईटब्लू);
}

ग्रेडियंट3 (
पार्श्वभूमी: रेखीय-ग्रेडियंट (शीर्षापर्यंत, सॅडलब्राउन 20%, ऑरेंजरेड 50%, गोल्डनरॉड 80%);
}

ग्रेडियंट4 (
पार्श्वभूमी: रेखीय-ग्रेडियंट (उजवीकडे, हलका निळा 20%, हलका हिरवा 20%, थिस्सल 80%, गहू 80%);
}

2). उदाहरण radial-gradient() radial gradient

ग्रेडियंट5 (
पार्श्वभूमी: रेडियल-ग्रेडियंट (लाइटकोरल, पपई व्हिप);
}

वापरून की वररेडियल ग्रेडियंटचा प्रारंभ बिंदू सेट करा.

ग्रेडियंट6 (
पार्श्वभूमी: रेडियल-ग्रेडियंट (शीर्षस्थानी, नीलमणी, अझर);
}

लंबवर्तुळाचे परिमाण सेट कराटक्के मध्ये

  1. प्रथम मूल्य रुंदी.
  2. दुसरा उंचीलंबवर्तुळ

ग्रेडियंट7 (
पार्श्वभूमी: रेडियल-ग्रेडियंट(40% 50%, मध्यम जांभळा, सीशेल);
}

आम्ही वापरतो सर्वात दूरची कोपरा कीग्रेडियंट आकार दूर कोपर्यात सेट करण्यासाठी.

ग्रेडियंट8 (
पार्श्वभूमी: रेडियल-ग्रेडियंट (100px 50px वर सर्वात दूरच्या कोपऱ्यात वर्तुळ, पिवळा, मंद राखाडी);
}

ग्रेडियंट गोल करण्यासाठी, लिहा वर्तुळ की, डीफॉल्टनुसार ते फॉर्ममध्ये असते लंबवर्तुळ

ग्रेडियंट9 (
पार्श्वभूमी: रेडियल-ग्रेडियंट (70% 10% वर वर्तुळ, लाइटसायन, किरमिजी);
}

3). रिपीटींग-लिनियर-ग्रेडियंट किंवा रिपीटिंग-रेडियल-ग्रेडियंट रिपीटिंग सीएसएस ग्रेडियंट

ग्रेडियंट10 (
पार्श्वभूमी: रिपीटिंग-रेडियल-ग्रेडियंट(वर्तुळ, मध्यम स्प्रिंगग्रीन, मध्यम स्प्रिंगग्रीन 15px, गुलाबी 15px, गुलाबी 30px);
}

ग्रेडियंट11 (
पार्श्वभूमी: पुनरावृत्ती-रेखीय-ग्रेडियंट(45deg, #606dbc, #606dbc 20px, #465298 10px, #465298 20px);
}

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

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

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

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

ग्रेडियंट

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



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

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

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

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

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

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

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

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

जटिल ग्रेडियंट्स तयार करण्यासाठी, दोन रंग यापुढे पुरेसे नसतील; वाक्यरचना आपल्याला अमर्यादित संख्येने जोडण्याची परवानगी देते, स्वल्पविरामाने विभक्त केलेले रंग. या प्रकरणात आपण वापरू शकता पारदर्शक रंग(कीवर्ड पारदर्शक ), आणि 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

<a href="https://cdd-evo.ru/mr/po-monitoru-begayut-poloski-gorizontalnye-chto-delat-esli/">आडवे पट्टे</a>

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



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

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

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



आम्ही वाचण्याची शिफारस करतो