CSS में Gradient Background कैसे बनायें
अब तक हम CSS से single color background बनाते थे और यदि multiple color की जरूरत पड़े तो image का उपयोग करते थे लेकिन क्या आपको पता है की हम बिना किसी image का उपयोग किये सिर्फ CSS से अपने website के लिए एक beautiful gradient background create कर सकते हैं|आज हम इस CSS tutorial में CSS gradients के बारे में जानेंगे और उसका उपयोग करना सीखेंगे|
Gradient एक प्रकार का image होता है जिसे अलग-अलग कलर के मिश्रण से बनाया जाता है| यदि आप अपने website में colorful background add करना चाहते हैं तो आप CSS3 के इस gradient feature का उपयोग कर सकते हैं|हम CSS से इस colorful gradient को कुछ ही lines की coding से पूरी तरह control कर सकते हैं, इसमें कौन-कौन से colors होंगे, उनका sequence क्या होगा, color-stops कितने होंगे, direction क्या होगी आदि settings को आसानी से manage किया जा सकता है|
Contents
CSS Gradients Use करने के फायदे
Image की जगह pure CSS gradient का उपयोग कर हम website की loading speed को बढ़ा सकते हैं क्योंकि यदि आप image use करते हैं तो यह आपके page की size बढ़ा देता है जिससे पेज download होने में समय लगता है|
यह किसी image की तुलना में कहीं ज्यादा clear और smooth दिखाई देता है खास करके तब जब इसे zoom किया जाता है, ऐसा इसलिए क्योंकि यह browser generated होता है और size बदलने पर भी इसकी quality कम नहीं होती इसके अलावा इसमें changes करना बहुत ही आसान है जिसके लिए सीधे stylesheet पर जाकर कभी भी coding में बदलाव कर सकते हैं|
CSS Gradient Background कैसे बनायें
CSS3 के जरिये हम multiple colors को combine कर के अलग-अलग तरह के कई सारे colorful backgrounds और patterns generate कर सकते हैं|
यहाँ पर हम 4 तरह के gradient types के बारे में जानेंगे जो की कुछ इस प्रकार हैं:
- Linear
- Radial
- Repeating Linear
- Repeating Radial
CSS में हम solid color fill करने के लिए background-color property का उपयोग करते हैं लेकिन gradient एक image तरह काम करता है और इसे create करने के लिए कोई अलग से CSS property नही है इसके लिए हम background-image या इसकी shorthand property का उपयोग करेंगे|
CSS Linear Gradient
यह सबसे simple होता हैं और इसका सबसे ज्यादा use किये जाते हैं| इसमें दो या दो से अधिक colors को एक linear format में दिखाया जाता है, इसका direction by default left-to-right होता है जिसे चाहें तो बदलकर top-to-bottom या कुछ दूसरा angle set किया जा सकता है|
Syntax
background: linear-gradient: ([direction] , [color-stop1], [color-stop2], ...);जैसा की आप नीचे देख सकते हैं यदि हम कोई direction specify न करें तो by default यह left-to-right display होता है :
.gradient{background: linear-gradient(red,pink);}
हमें कम से कम दो colors specify करने होंगे और इसके लिए hex, named colors, rgba, hsla का उपयोग कर सकते हैं, चाहें तो comma के बाद जितने चाहें उतने colors add कर सकते हैं|
अगर हमें default angle को change कर कोई दूसरा direction set करना है तो इसके लिए हमें linear-gradient() function में सबसे शुरुआत में एक और parameter जोड़ कर direction बताना होगा|
Direction specify करने के लिए कुछ words जैसे to right, to left, to top, to top right, to bottom left आदि के अलावा degrees जैसे 90 deg, -30 deg आदि का भी उपयोग कर सकते हैं, इसका कुछ उदाहरण आप नीचे देख सकते हैं|
to right
.gradient {background: linear-gradient(to right, #1c5ba4, #dfe8f2);}
top-left
.gradient {background: linear-gradient(to top left, #1c5ba4, #dfe8f2);}
45 deg angle
.gradient {background: linear-gradient(45deg, #1c5ba4, #dfe8f2);}Linear Gradient में Color Stops Specify करना
हम color stops की setting कर कौन सा कलर कहाँ से start होगा उसका location क्या होगा यह भी तय कर सकते हैं|
color stops के location को हम percentage (%) में specify कर सकते हैं| आप चाहें तो multiple color-stops use कर अलग-अलग कलर्स जोड़ सकते हैं|
.gradient {background: linear-gradient(#ff5004, #fff 40%, #09a201);}
CSS Radial Gradient बनाना
इसका उपयोग कम किया जाता है और यह किसी circular shape की तरह बनता है| इसमें color-stops center से शुरू होते हैं और एक circle या ellipse के आकार में फैलते हुए दिखाई देते हैं|
By default इसका shape ellipse आकार का होता है, हम चाहें तो इसको बदल भी सकते हैं| इसके लिए basic syntax नीचे दिया गया है|
Syntax
background: radial-gradient([shape] [size at position], [first-color], ..., [last-color]);[shape] : Shape define करने के लिए इस parameter का use होता है| इसकी value circle या ellipse में से कोई एक हो सकता है| इसकी default value ellipse होती है|
[size]: इससे shape की size define की जाती है इसके कई सारे values हो सकते हैं जो की इस प्रकार हैं:
• closest side
• farthest side
• closest corner
• farthest corner
.gradient{ background: radial-gradient(yellow, red, black);}Radial Gradient की Size Change करना
हम कुछ words जैसे closest-side, farthest-side, closest-corner, और farthest-corner का उपयोग कर gradient size को बदल सकते हैं| इसका कुछ उदाहरण आप नीचे देख सकते हैं|
.gradient1{ background: radial-gradient(circle farthest-corner, white,red);}
.gradient2 {background: radial-gradient(circle farthest-side, white,red);}
.gradient3{background: radial-gradient(circle closest-side,white,red);}
.gradient4 {background: radial-gradient(circle closest-corner,white,red);}Radial Gradients Color Stops
Radial gradients के color stops linear के समान ही होते हैं| इसमें color और उसके length को define किया जाता है| length को pixel या percentage में भी specify किया जा सकता है|
.gradient{ background: radial-gradient(circle closest-side at 50% 30%, #f06d06 30%,white 40%, black);
CSS Repeating Linear Gradient
repeating-linear-gradient() function का उपयोग कर हम repeating linear gradient बना सकते हैं| यह linear जैसा ही होता है लेकिन इसमें colors repeat होते जाते हैं|
यह काफी useful होता है क्योंकि हम इसका उपयोग कर colorful patterns design कर सकते हैं|
Syntax
background: repeating-linear-gradient: ([angle | to ] ,[color-stop], [color-stop], ...);
इसका एक simple example नीचे देख सकते हैं जिसमे हम 45 deg angle का use कर कुछ lines print करते हैं|
.gradient{ background: repeating-linear-gradient(45deg, black,black 5px, lightblue 5px, lightblue 10px);}
अब यदि आप कोई pattern create करना चाहते हैं तो उसके लिए multiple times इस property का use कर सकते हैं|
उदाहरण के लिए हमने नीचे एक pattern design किया है जिसमे कुछ lines 45 degree में print होते हैं जबकि इनके ऊपर cross करते हुए कुछ lines -45 degree में repeat होते जाते हैं|
.gradient {
background:
repeating-linear-gradient( -45deg, rgba(145, 200, 242, 0.5), rgba(145, 200, 242, 0.5) 5px, transparent 5px, transparent 10px),
repeating-linear-gradient(45deg, rgba(145, 200, 242, 0.5), rgba(145, 200, 242, 0.5) 5px, white 5px, white 10px);
}
CSS Repeating Radial Gradient
Repeating radial gradient किसी standard radial जैसा ही होता है लेकिन इसके color-stops चारों directions में infinite times repeat होते जाते हैं| इसका example आप नीचे देख सकते हैं |
.gradient{background: repeating-radial-gradient(circle, black, black 6px, yellow 6px, yellow 10px); }
आज आपने इस article में CSS gradients के बारे में जाना इसकी सबसे ख़ास बात यह है की हम बिना किसी image का use किये बहुत ही बढ़िया background design कर सकते हैं इसके अलावा खूबसूरत CSS pattern background भी कुछ ही line के code से create कर सकते हैं|
अगर आपको हमारा यह article पसंद आया तो अपने दोस्तों के साथ जरूर share करें| यदि कोई सवाल पूछना है तो आप comment box के माध्यम से पूछ सकते हैं|
