Home-theater-designers
మీరు కొన్ని నిమిషాల కంటే ఎక్కువ సమయం ఇంటర్నెట్‌లో ఉంటే, మీరు CSS ప్రవణతను చూసే అవకాశాలు ఉన్నాయి. CSS నేపథ్య ఆస్తి వివిధ శైలుల శ్రేణిని సృష్టించడానికి ఉపయోగించబడుతుంది మరియు గ్రేడింగ్ విలువతో ఇది చేయగల అత్యంత ఆసక్తికరమైన రకాల్లో ఒకటి.
విభిన్న CSS ప్రవణతలను ఎలా రూపొందించాలో మరియు సృష్టించాలో తెలుసుకోవడం అనేది ఏదైనా సాఫ్ట్‌వేర్ డిజైనర్ లేదా డెవలపర్‌కు ఒక ఆస్తి. ఈ వ్యాసం నుండి, మీ ప్రాజెక్ట్‌లలో CSS ప్రవణతలను చేర్చడం ప్రారంభించడానికి మీరు తెలుసుకోవలసిన ప్రతిదాన్ని మీరు నేర్చుకుంటారు.
CSS ప్రవణత అంటే ఏమిటి?
ఒక CSS ప్రవణత తప్పనిసరిగా ఒకటి నుండి మరొకదానికి సజావుగా మారే రెండు లేదా అంతకంటే ఎక్కువ రంగుల కలయిక. CSS ప్రవణత యొక్క పరివర్తన స్థితి ఉపయోగించిన ప్రవణత రకంపై ఆధారపడి ఉంటుంది. సాఫ్ట్‌వేర్ డిజైన్‌లో సాధారణంగా ఉపయోగించే రెండు ప్రధాన రకాల ప్రవణతలు ఉన్నాయి: లీనియర్ మరియు రేడియల్.
అయితే, తక్కువ ప్రజాదరణ పొందిన మరియు శంఖాకార ప్రవణత అని పిలువబడే మూడవ రకం ప్రవణత ఉంది.
CSS ప్రవణతలు సింటాక్స్
Background-image: gradient-type (direction, color1, color2);
CSS ప్రవణత నేపథ్య చిత్రం CSS ఆస్తికి కేటాయించబడాలి. ప్రవణత రకం అనేక వాటిలో ఒకటి కావచ్చు; సరళ-ప్రవణత, రేడియల్-ప్రవణత లేదా శంఖాకార-ప్రవణత. ప్రవణత రకం తరువాత ప్రవణత యొక్క పరివర్తన దిశను కలిగి ఉన్న బ్రాకెట్‌లను తెరవడం మరియు మూసివేయడం, అలాగే గ్రేడియంట్‌లో చేర్చాల్సిన రంగులు ఉంటాయి.
సంబంధిత: CSS లో నేపథ్య చిత్రాన్ని ఎలా సెట్ చేయాలి
పై ఉదాహరణ రెండు రంగులను చూపుతుంది, కానీ ప్రవణత అనేక విభిన్న రంగులను కలిగి ఉంటుంది. జాబితాలోని ప్రతి రంగును కామాతో వేరు చేయడం మాత్రమే అవసరం.
లీనియర్ గ్రేడియంట్ అంటే ఏమిటి?
సరళ ప్రవణత అత్యంత ప్రజాదరణ పొందిన CSS ప్రవణత. ఇది రెండు లేదా అంతకంటే ఎక్కువ రంగులను ఉపయోగించి క్షితిజ సమాంతర, నిలువు లేదా వికర్ణ పరివర్తన ప్రవణతను సృష్టిస్తుంది.
CSS లీనియర్ గ్రేడియంట్ ఉదాహరణ
Background-image: linear-gradient(#00A4CCFF, #F95700FF);
పై కోడ్ కింది CSS ప్రవణతను ఉత్పత్తి చేస్తుంది:
పై ఉదాహరణ నుండి వదలివేయబడిన వాక్యనిర్మాణంలో ఒక ప్రధాన భాగం ఉంది. ఈ భాగం ప్రవణత యొక్క పరివర్తన దిశ, మరియు లీనియర్ ప్రవణత యొక్క డిఫాల్ట్ అమరిక నిలువుగా ఉంటుంది (పై నుండి క్రిందికి); ఈ ఉదాహరణలో కావలసిన అవుట్‌పుట్ అది.
పై కోడ్ కింది కోడ్ యొక్క అదే పంక్తిని ఉత్పత్తి చేస్తుంది. రెండింటి మధ్య ఉన్న ఏకైక వ్యత్యాసం కోడ్ యొక్క దిశ విభాగం.
దిగువ లీనియర్ ప్రవణత ఉదాహరణను ఉపయోగించడం
Background-image: linear-gradient(to bottom, #00A4CCFF, #F95700FF);
మీరు అవుట్‌పుట్ నుండి చూడగలిగినట్లుగా, పైన ఉన్న కోడ్ ఎగువన నీలి రంగుతో మొదలయ్యే ప్రవణతను సృష్టిస్తుంది, ఆపై నెమ్మదిగా దిగువన నారింజ రంగులోకి మారుతుంది. మీరు రంగుల క్రమాన్ని రివర్స్ చేయాలనుకుంటే, మీరు దానిని భర్తీ చేయవచ్చు దిగువకు తో అగ్రస్థానం మరియు ఇది కింది అవుట్‌పుట్‌ను ఉత్పత్తి చేసే ప్రవణత దిశను తిప్పికొడుతుంది:
నిలువు అమరిక మాదిరిగానే, రెండు దిశల కీలక పదాల వాడకంతో ప్రవణత యొక్క క్షితిజ సమాంతర అమరికను సాధించవచ్చు: ఎడమవైపుకు మరియు కుడికి , ఇది వరుసగా కింది అవుట్‌పుట్‌లను ఉత్పత్తి చేస్తుంది.
పెరిస్కోప్ వీడియోను ఎలా డౌన్‌లోడ్ చేయాలి
వికర్ణ లీనియర్ ప్రవణత
సరళ ప్రవణత యొక్క ఏ దిశలోనైనా వికర్ణ సరళ ప్రవణత పరివర్తనను సాధించడం సాధ్యమవుతుంది. దీన్ని సాధ్యం చేయడానికి మీరు తెలుసుకోవలసిన కీలక పదాల కేవలం నాలుగు నిర్దిష్ట జాబితాలు ఉన్నాయి.
- దిగువ కుడివైపు
- దిగువ ఎడమవైపు
- ఎగువ కుడివైపు
- ఎగువ ఎడమవైపు
వికర్ణ లీనియర్ ప్రవణత ఉదాహరణను ఉపయోగించడం
Background-image: linear-gradient(to bottom right, #00A4CCFF, #F95700FF);
పై ఉదాహరణ కింది అవుట్‌పుట్‌ను ఉత్పత్తి చేస్తుంది:
ఎగువ అవుట్‌పుట్ నుండి మీరు చూడగలిగినట్లుగా, సరళ ప్రవణత ఎగువ ఎడమ నుండి దిగువ కుడివైపు ప్రవణతకి వెళ్లే వికర్ణ దిశలో దాని పరివర్తనను చేస్తుంది.
బహుళ వర్ణ లీనియర్ గ్రేడియంట్
సరళ ప్రవణత రెండు లేదా అంతకంటే ఎక్కువ రంగులను కలిగి ఉంటుంది, కానీ ప్రవణతలో మరిన్ని రంగులు ఎలా ఉంటాయి? ఒక బహుళ వర్ణ సరళ ప్రవణత రంగు అమరిక దాని దిశపై ఆధారపడి ఉంటుంది. క్షితిజ సమాంతర దిశలో పరివర్తన చెందుతున్నవి సరళ ప్రవణత యొక్క ఖచ్చితమైన దిశను బట్టి, లీనియర్ ప్రవణత యొక్క ప్రతి కొత్త రంగు ఎడమ లేదా కుడి వైపున కనిపిస్తాయి.
బహుళ వర్ణ లీనియర్ గ్రేడియంట్ ఉదాహరణ
Background-image: linear-gradient(to right, #00A4CCFF, #F95700FF, #e2e223, #2727e2, #19ad19);
పైన ఉన్న కోడ్ లైన్ కింది అవుట్‌పుట్‌ను ఉత్పత్తి చేస్తుంది:
మీరు చూడగలిగినట్లుగా, ప్రతి కొత్త రంగు ప్రవణత యొక్క కుడి వైపున జోడించబడుతుంది, చివరికి ఇంద్రధనస్సుగా ఏర్పడే వాటిని సృష్టిస్తుంది. అదే అవుట్‌పుట్ నిలువు దిశలో సాధించవచ్చు; అయితే, సరళ ప్రవణతపై నిర్దిష్ట రంగు అమరిక నిలువు దిశ కీవర్డ్‌పై ఆధారపడి ఉంటుంది (పైకి లేదా దిగువకు).
రేడియల్ ప్రవణత అంటే ఏమిటి?
రేడియల్ ప్రవణత డిఫాల్ట్‌గా మధ్యలో నుండి మొదలయ్యే మరిన్ని రంగుల స్పైరలింగ్ గ్రేడియంట్‌ను సృష్టిస్తుంది. సరళ ప్రవణత నిలువుగా లేదా అడ్డంగా ప్రవహించే సరళ ప్రవణతను ఉత్పత్తి చేసినప్పుడు, రేడియల్ ప్రవణత మధ్య నుండి బయటి అంచులకు ప్రవహించే వృత్తాకార ప్రవణతను ఉత్పత్తి చేస్తుంది.
రేడియల్ ప్రవణత ఉదాహరణను ఉపయోగించడం
Background-image: radial-gradient( circle, #00A4CCFF, #F95700FF);
పైన ఉన్న కోడ్ లైన్ కింది అవుట్‌పుట్‌ను ఉత్పత్తి చేస్తుంది:
రేడియల్ ప్రవణత కేంద్రాన్ని మార్చడం
డిఫాల్ట్‌గా రేడియల్ ప్రవణత ప్రవణత మధ్యలో ప్రారంభమవుతుంది; అయితే, కొన్ని కీలకపదాల పరిచయంతో మూలం యొక్క స్థానాన్ని మార్చడం సాధ్యమవుతుంది.
ఇంటర్నెట్‌లో ఎవరితోనైనా సినిమా ఎలా చూడాలి
రేడియల్ గ్రేడియంట్ స్టార్ట్ పొజిషన్ ఉదాహరణను మార్చడం
Background-image: radial-gradient(circle at top right, #00A4CCFF, #F95700FF);
పైన ఉన్న కోడ్ లైన్ కింది అవుట్‌పుట్‌ను ఉత్పత్తి చేస్తుంది:
ప్రవణత పైన ఉన్న అవుట్‌పుట్ నుండి మీరు చూడగలిగినట్లుగా ఇప్పుడు మధ్యలో కాకుండా కుడి ఎగువ మూలలో నుండి మొదలవుతుంది. కీవర్డ్‌ని చేర్చడం వల్ల ఈ మార్పు సాధ్యమవుతుంది ఎగువ కుడి పై కోడ్‌లో. రేడియల్ ప్రవణత యొక్క మూలం యొక్క పాయింట్‌ను మార్చడానికి కింది కీలకపదాల జాబితాను కూడా ఉపయోగించవచ్చు:
- ఎగువ ఎడమ
- దిగువ కుడి
- దిగువ ఎడమ
బహుళ వర్ణ రేడియల్ ప్రవణతలు
సరళ ప్రవణత వలె, రేడియల్ ప్రవణత కూడా రెండు రంగులను ఉపయోగించవచ్చు, ప్రధాన వ్యత్యాసం ఏమిటంటే, సరళ ప్రవణత సరళ రేఖలో ప్రవణతకు జోడిస్తుంది, రేడియల్ ప్రవణత బాహ్య అంచున కొత్త రంగులను జోడిస్తుంది.
బహుళ వర్ణ రేడియల్ ప్రవణత ఉదాహరణ
Background-image: radial-gradient(circle, #00A4CCFF, #F95700FF, #e2e223, #2727e2, #19ad19);
పైన ఉన్న కోడ్ లైన్ కింది అవుట్‌పుట్‌ను ఉత్పత్తి చేస్తుంది:
అనుకూలీకరించే ప్రవణతలు
ఇప్పటివరకు మీరు ఒక ప్రవణత యొక్క దిశ మరియు కేంద్ర బిందువును ఎలా మార్చాలో చూశారు, కానీ ప్రవణతను ఎలా అనుకూలీకరించాలో మీరు చూడలేదు. ప్రవణతను అనుకూలీకరించడం చాలా పనిగా అనిపించవచ్చు, కానీ మీరు CSS నేపథ్య ప్రవణతను సృష్టించే ప్రాథమికాలను అర్థం చేసుకున్న తర్వాత తదుపరి స్పష్టమైన దశ మీ CSS ప్రవణతలను మరింత ప్రత్యేకంగా ఎలా చేయాలో నేర్చుకోవడం.
వెబ్‌సైట్ నుండి వీడియోను డౌన్‌లోడ్ చేయడం ఎలా
డిఫాల్ట్‌గా, ప్రవణతలోని రంగులు సమానంగా పంపిణీ చేయబడిన స్థలాన్ని ఆక్రమిస్తాయి, ప్రతి రంగు సజావుగా దాని తర్వాత రంగులోకి మారుతుంది. కాబట్టి రెండు రంగులు కలిపితే ప్రవణత ఏర్పడుతుంది, ప్రతి రంగు ఒకటి నుండి మరొకదానికి మారేటప్పుడు అందుబాటులో ఉన్న స్థలంలో సగం ఆక్రమిస్తుంది. మూడు రంగులు కలిపితే ప్రతి రంగు అందుబాటులో ఉన్న స్థలంలో మూడింట ఒక వంతు ఆక్రమిస్తుంది.
అనుకూలీకరించిన ప్రవణతతో, స్పష్టంగా కేటాయించడం ద్వారా ఒక గ్రేడియంట్‌లో ఒక రంగు ఆక్రమించే స్థలాన్ని మీరు నిర్వచించవచ్చు. రంగు స్టాప్ స్థానం .
లీనియర్ గ్రేడియంట్ ఉదాహరణను అనుకూలీకరించడం 1
Background-image: linear-gradient(to right, #00A4CCFF, #F95700FF 30%);
పైన ఉన్న కోడ్ లైన్ కింది అవుట్‌పుట్‌ను ఉత్పత్తి చేస్తుంది:
ఎగువ అవుట్‌పుట్ సరళ ఆకారంలో రెండవ రంగును దాని ఆచార స్థానానికి బదులుగా, మొదటి రంగు యొక్క 30% పాయింట్ వద్ద నిలిపివేస్తుంది, మరియు రెండవ రంగు కూడా ప్రవణతలో చివరి రంగు కాబట్టి సహజంగా చివరి వరకు విస్తరిస్తుంది .
మీరు మొదటి రంగు చివరన పైన ఉన్న కోడ్‌లో 30% ఉంచితే, విషయాలు స్పష్టంగా ఉండాలి.
లీనియర్ గ్రేడియంట్ ఉదాహరణను అనుకూలీకరించడం 2
Background-image: linear-gradient( to right, #00A4CCFF 30%, #F95700FF );
పై కోడ్ కింది అవుట్‌పుట్‌ను ఉత్పత్తి చేస్తుంది.
ఎగువ అవుట్‌పుట్ ప్రవణతలోని మొదటి రంగును ప్రవణతలోని రెండవ రంగు యొక్క 30% పాయింట్ వద్ద నిలిపివేయడాన్ని స్పష్టంగా చూపుతుంది. ఈ ఉదాహరణ పైన పేర్కొన్న దానితో పాటుగా కలర్-స్టాప్ అనుకూలీకరణను మీరు సులభంగా అర్థం చేసుకోవడానికి సహాయపడుతుంది.
రేడియల్ ప్రవణతను అనుకూలీకరించడం సరళ ప్రవణత వలె జరుగుతుంది. రేడియల్ ప్రవణతలో అదే ఫలితాలను సాధించడానికి మీరు చేయాల్సిందల్లా ప్రవణత రకం మరియు దిశను మార్చడం.
CSS ప్రవణతలను సృష్టించడం అంత సులభం కాదు
ఈ ట్యుటోరియల్ వ్యాసం సరళ మరియు రేడియల్ ప్రవణతలను గుర్తించడానికి మరియు సృష్టించడానికి మీకు సాధనాలను అందిస్తుంది. మీరు ఈ దశకు చేరుకున్నట్లయితే, మీరు ప్రవణత దిశను మరియు కేంద్రాన్ని ఎలా మార్చాలో నేర్చుకున్నారు. అదనంగా, మీరు ఇప్పుడు CSS ప్రవణతలను అనుకూలీకరించడానికి మరియు ప్రత్యేకమైన నేపథ్య ప్రవణతలను సృష్టించే నైపుణ్యాలను కలిగి ఉన్నారు.
అయితే, మీరు క్రొత్త మరియు ప్రత్యేకమైన ప్రవణతలను సృష్టించడానికి నేరుగా వెళ్లకూడదనుకుంటే, ముందుగా కనిపించే కొన్ని గొప్ప వాటిని సృష్టించడం ద్వారా మీరు ప్రారంభించవచ్చు.
షేర్ చేయండి షేర్ చేయండి ట్వీట్ ఇమెయిల్ 27 స్టైలిష్ CSS నేపథ్య ప్రవణత ఉదాహరణలుఘన రంగులు గత సంవత్సరం చాలా ఉన్నాయి. ప్రవణతలు ఉన్నాయి! కానీ మీరు వాటిని CSS లో ఎలా సృష్టించాలి?
తదుపరి చదవండి సంబంధిత అంశాలు- ప్రోగ్రామింగ్
- వెబ్ అభివృద్ధి
- వెబ్ డిజైన్
- CSS
కదీషా కీన్ పూర్తి-స్టాక్ సాఫ్ట్‌వేర్ డెవలపర్ మరియు టెక్నికల్/టెక్నాలజీ రైటర్. ఆమె చాలా క్లిష్టమైన సాంకేతిక భావనలను సరళీకృతం చేసే ప్రత్యేక సామర్థ్యాన్ని కలిగి ఉంది; ఏదైనా టెక్నాలజీ అనుభవం లేని వ్యక్తి సులభంగా అర్థం చేసుకోగల పదార్థాన్ని ఉత్పత్తి చేయడం. ఆమె రాయడం, ఆసక్తికరమైన సాఫ్ట్‌వేర్‌ను అభివృద్ధి చేయడం మరియు ప్రపంచాన్ని పర్యటించడం (డాక్యుమెంటరీల ద్వారా) పట్ల మక్కువ చూపుతుంది.
కదీషా కీన్ నుండి మరిన్నిమా వార్తాలేఖకు సభ్యత్వాన్ని పొందండి
టెక్ చిట్కాలు, సమీక్షలు, ఉచిత ఈబుక్‌లు మరియు ప్రత్యేకమైన డీల్స్ కోసం మా వార్తాలేఖలో చేరండి!
సభ్యత్వం పొందడానికి ఇక్కడ క్లిక్ చేయండి