04 నుండి 01
CSS3 తో క్రాస్ బ్రౌజర్ లీనియర్ గ్రేడియంట్స్ సృష్టిస్తోంది
లీనియర్ గ్రేడియంట్స్
మీరు చూసే అత్యంత సాధారణ రకం ప్రవణత రెండు రంగుల సరళి ప్రవణత. దీని అర్థం, ప్రవణత మొదటి రేఖ నుండి క్రమంగా మారుతూ సరళ రేఖలో ఆ రేఖ వెంట సెకనుకు మారుతుంది. ఈ పేజీలోని చిత్రం # 999 (ముదురు బూడిద రంగు) #ff (తెలుపు) కు ఎడమ నుండి కుడికి సరళిని చూపుతుంది.
లీనియర్ ప్రవణతలు నిర్వచించటానికి సులభమైనవి, మరియు బ్రౌజర్లలో చాలా మద్దతును కలిగి ఉంటాయి. CSS3 సరళ ప్రవణతలు Android 2.3+, Chrome 1+, Firefox 3.6+, Opera 11.1+ మరియు సఫారి 4+ లో మద్దతునిస్తున్నాయి. ఇంటర్నెట్ ఎక్స్ప్లోరర్ ఒక వడపోత ఉపయోగించి ప్రవణతలు జోడించవచ్చు మరియు వాటిని IE 5.5 తిరిగి మద్దతు. ఇది CSS3 కాదు, కానీ క్రాస్ బ్రౌజర్ అనుకూలత కోసం ఇది ఒక ఎంపిక.
మీరు ఒక ప్రవణతను నిర్వచించినప్పుడు మీరు అనేక విభిన్న విషయాలు నిర్వచించాల్సిన అవసరం ఉంది:
- ఏ రకం ప్రవణత అది- సరళ లేదా రేడియల్
- ప్రవణత ప్రారంభం కావాలి
- ప్రవణత ఎక్కడ నిలిపివేయాలి
- ఏ రంగులు ప్రవణతలో ఉన్నాయి మరియు ఎక్కడ ప్రారంభించాలో మరియు ఆపాలి
CSS3 ఉపయోగించి సరళ ప్రవణతలు నిర్వచించడానికి, మీరు వ్రాయండి:
లీనియర్-గ్రేడియంట్ ( కోణం లేదా సైడ్ లేదా మూలలో , రంగు స్టాప్ , రంగు స్టాప్ )
- మొదట మీరు పేరు సరళ- గరిష్టతతో ప్రవణత రకం నిర్వచించండి.
- అప్పుడు, మీరు రెండు మార్గాల్లో ఒకదానిలో ప్రవణత యొక్క ప్రారంభాన్ని మరియు స్టాప్ పాయింట్లను నిర్వచించాలి: 0 నుండి 359 వరకు డిగ్రీల్లో గల కోణం, 0 డిగ్రీల వరుసలో సూటిగా ఉంటుంది. లేదా ఎడమ, కుడి, దిగువ మరియు ఎగువ వంటి "సైడ్ లేదా మూలలో" ఫంక్షన్తో. తదుపరి పేజీలో ఇవి మరింత వివరంగా వివరించబడతాయి. మీరు వీటిని వదిలేస్తే, ప్రవణత ఎగువ నుండి మూలకానికి దిగువకు ప్రవహిస్తుంది.
- అప్పుడు మీరు రంగు విరామాలు నిర్వచించండి. రంగు రంగు కోడ్తో మరియు ఆప్షనల్ శాతానికి రంగు నిలిపివేస్తుంది. శాతం ఆ లైన్ తో ప్రారంభం లేదా ఆ రంగు తో ముగిసే బ్రౌజర్ చెబుతుంది. డిఫాల్ట్ లైన్ పాటు సమానంగా రంగులు ఉంచడానికి ఉంది. మీరు పేజీ 3 న రంగు విరామాలు గురించి మరింత తెలుసుకోవచ్చు.
కాబట్టి, CSS3 తో పైన ప్రవణత నిర్వచించడానికి, మీరు వ్రాయండి:
సరళ-ప్రవణత (ఎడమ, # 999999 0%, #ffffff 100%);
మరియు మీరు వ్రాసే DIV నేపధ్యం గా సెట్ చేయడానికి:
div {
background-image: సరళ-ప్రవణత (ఎడమ, # 999999 0%, #ffffff 100%;
}
CSS3 లీనియర్ గ్రేడియంట్స్ కోసం బ్రౌజర్ పొడిగింపులు
క్రాస్ బ్రౌజర్ పని చేయడానికి మీ ప్రవణతను పొందడానికి, మీరు చాలా బ్రౌజర్లు మరియు Internet Explorer 9 మరియు తక్కువ (వాస్తవానికి 2 ఫిల్టర్లు) కోసం ఫిల్టర్ పొడిగింపులను ఉపయోగించాలి. ఈ అన్ని మీ ప్రవణత నిర్వచించడానికి అదే అంశాలను పడుతుంది (మీరు మాత్రమే IE లో 2-రంగు ప్రవణతలు నిర్వచించలేదు తప్ప).
మైక్రోసాఫ్ట్ వడపోతలు మరియు ఎక్స్టెన్షన్ -ఇంటర్నెట్ ఎక్స్ప్లోరర్ మద్దతు ఇందుకు చాలా సవాలుగా ఉంది, ఎందుకంటే విభిన్న బ్రౌజర్ సంస్కరణలకు మద్దతు ఇవ్వడానికి మీకు మూడు వేర్వేరు పంక్తులు అవసరం. తెలుపు గ్రేడియంట్ పైన బూడిద పొందడానికి మీరు ఇలా వ్రాస్తారు:
/ * IE 5.5-7 * /
వడపోత: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
/ * IE 8-9 * /
-ms-filter: "progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1)";
/ * IE 10 * /
-ms-linear-gradient (ఎడమ, # 999999 0%, #ffffff 100%);
మొజిల్లా పొడిగింపు - -మోజ్-పొడిగింపు కేవలం -మోజ్-పొడిగింపుతో, CSS3 ఆస్తి వలె పనిచేస్తుంది. ఫైరుఫాక్సు కోసం పైన ప్రవణత పొందడానికి, ఇలా రాయండి:
-మోజ్-లీనియర్-గ్రేడియంట్ (ఎడమ, # 999999 0%, #ffffff 100%);
Opera Extension -The -o- పొడిగింపు Opera 11.1+ కు ప్రవణతలు జతచేస్తుంది. పైన ప్రవణత పొందడానికి, వ్రాయండి:
-యో-లీనియర్-గ్రేడియంట్ (ఎడమ, # 999999 0%, #ffffff 100%);
వెబ్కిట్ పొడిగింపు -వెబ్కిట్- పొడిగింపు CSS3 ఆస్తి వంటి చాలా పనిచేస్తుంది. సఫారి 5.1+ లేదా క్రోమ్ 10+ కోసం ఎగువ ప్రవణతను నిర్వచించడానికి మీరు ఇలా వ్రాస్తారు:
-వెబ్కిట్-లీనియర్-గ్రేడియంట్ (ఎడమ, # 999999 0%, #ffffff 100%);
Chrome 2+ మరియు సఫారి 4+ తో పనిచేసే వెబ్కిట్ పొడిగింపు యొక్క పాత సంస్కరణ కూడా ఉంది. దీనిలో మీరు ఆస్తి పేరు కంటే కాకుండా, ఒక విలువగా ప్రవణత రకం నిర్వచించండి. ఈ పొడిగింపుతో తెలుపు గ్రేడియంట్కు బూడిద పొందడానికి, వ్రాయండి:
-వెబ్కిట్-గ్రేడియంట్ (లీనియర్, లెఫ్ట్ టాప్, రైట్ టాప్, కలర్-స్టాప్ (0%, # 999999), కలర్-స్టాప్ (100%, # ffffff));
పూర్తి CSS3 లీనియర్ వాలు CSS కోడ్
పూర్తి క్రాస్ బ్రౌజర్ మద్దతు కోసం మీరు పైన తెలుపు గ్రేడియంట్ బూడిద పొందడానికి మొదటి ప్రవణతలు మద్దతు లేని బ్రౌజర్ల కోసం తిరిగి ఘన రంగు కలిగి ఉండాలి, మరియు చివరి అంశం పూర్తిగా అనుకూలంగా ఉండే బ్రౌజర్లు కోసం CSS3 శైలి ఉండాలి. కాబట్టి, మీరు వ్రాస్తారు:
నేపథ్య: # 999999;
background: -moz-linear-gradient (ఎడమ, # 999999 0%, #ffffff 100%);
background: -webkit-gradient (సరళ, ఎడమ ఎగువ, కుడి ఎగువ, రంగు-స్టాప్ (0%, # 999999), రంగు-స్టాప్ (100%, # ffffff));
background: -webkit-linear-gradient (ఎడమ, # 999999 0%, #ffffff 100%);
background: -o-linear-gradient (ఎడమ, # 999999 0%, #ffffff 100%);
background: -ms-linear-gradient (ఎడమ, # 999999 0%, #ffffff 100%);
వడపోత: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
-ms-filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
నేపథ్య: సరళ-ప్రవణత (ఎడమ, # 999999 0%, #ffffff 100%);
ఈ ట్యుటోరియల్ లోని తరువాతి పేజీలు మరింత వివరంగా ఒక ప్రవణత యొక్క భాగాలను వివరిస్తాయి, చివరి పేజీ మీకు CSS3 గ్రేడియంట్లను స్వయంచాలకంగా రూపొందించడానికి ఒక అద్భుతమైన మార్గంగా చెప్పవచ్చు.
కేవలం CSS ను ఉపయోగించి చర్యలో ఈ సరళ ప్రవణత చూడండి.
02 యొక్క 04
వికర్ణ గ్రేడియంట్స్-ది క్రమం యొక్క కోణం సృష్టించడం
ప్రారంభం మరియు స్టాప్ పాయింట్లు ప్రవణత యొక్క కోణంను నిర్ణయిస్తాయి. చాలా సరళ ప్రవణతలు ఎగువ నుండి దిగువ వరకు లేదా ఎడమ నుండి కుడికి ఉంటాయి. కానీ ఒక వికర్ణ రేఖపై కదులుతున్న ఒక ప్రవణతను నిర్మించడం సాధ్యమవుతుంది. ఈ పేజీలో ఉన్న చిత్రం కుడివైపు నుండి చిత్రం నుండి 45 డిగ్రీల కోణం లో కదులుతున్న ఒక సాధారణ ప్రవణతని చూపుతుంది.
వాలు లైన్ను నిర్వచించటానికి కోణాలు
కోణం మూలకం యొక్క కేంద్రంలో ఒక ఊహాత్మక వృత్తంలో ఒక రేఖ. 0deg పాయింట్లు పైకి, కుడివైపుకు 90deg పాయింట్లు, 180deg పాయింట్లు డౌన్, మరియు 270deg ఎడమవైపు పాయింట్లు. మీరు 0 నుండి 359 డిగ్రీల నుండి కోణాన్ని నిర్వచించవచ్చు.
మీరు ఒక చదరపు లో, ఒక 45 డిగ్రీల కోణం ఎగువ ఎడమ మూలలో నుండి దిగువ కుడివైపుకి కదులుతుంది, కానీ చిత్రంలో చూడగలిగినట్లుగా, ప్రారంభ మరియు ముగింపు పాయింట్లు ఆకారం వెలుపల కొద్దిగా ఉంటాయి.
ఒక వికర్ణ ప్రవణతను నిర్వచించడానికి మరింత సాధారణ మార్గం, ఎగువ కుడివైపు వంటి ఒక మూలని నిర్వచించడం మరియు ప్రవణత ఆ మూలలో నుండి వ్యతిరేక మూలకు తరలించబడుతుంది. మీరు కింది కీలక పదాలతో ప్రారంభ పోస్ట్ను నిర్వచించగలరు:
- టాప్
- కుడి
- దిగువ
- వదిలి
- సెంటర్
మరియు అవి మరింత ప్రత్యేకమైనవిగా ఉంటాయి:
- కుడివైపు
- ఎగువ ఎడమవైపు
- టాప్ సెంటర్
- దిగువ కుడి
- దిగువ ఎడమవైపు
- దిగువ కేంద్రం
- కుడి కేంద్రం
- ఎడమ కేంద్రం
ఇక్కడ కుడి వైపున ఉన్న కుడి మూలలో నుండి క్రిందికి ఎడమవైపుకు తెలుపు ఎరుపుతో చిత్రీకరించిన ఒకదానితో సమానంగా ప్రవణత కోసం CSS ఉంది:
నేపథ్య: ## 901A1C;
background-image: -moz-linear-gradient (కుడి టాప్, # 901A1C 0%, # FFFFFF 100%);
background-image: -వెబ్కిట్-ప్రవణత (సరళ, కుడి ఎగువ, ఎడమ దిగువ, రంగు-స్టాప్ (0, # 901A1C), రంగు-స్టాప్ (1, #FFFFFF);
background: -webkit-linear-gradient (కుడి టాప్, # 901A1C 0%, #ffffff 100%);
background: -o-linear-gradient (కుడి టాప్, # 901A1C 0%, #ffffff 100%);
background: -ms-linear-gradient (కుడి టాప్, # 901A1C 0%, #ffffff 100%);
నేపథ్య: సరళ-ప్రవణత (కుడి ఎగువ, # 901A1C 0%, #ffffff 100%);
మీరు ఈ ఉదాహరణలో IE ఫిల్టర్లు లేవని గమనించవచ్చు. IE అంటే రెండు రకాల ఫిల్టర్లను మాత్రమే అనుమతిస్తుంది: పైనుంచి (డిఫాల్ట్) మరియు ఎడమ నుండి కుడికి (GradientType = 1 స్విచ్తో).
కేవలం CSS ను ఉపయోగించి చర్యలో ఈ వికర్ణ సరళ ప్రవణత చూడండి.
03 లో 04
రంగు ఆగారు
CSS3 సరళ ప్రవణతలు తో, మీరు కూడా ఫ్యాన్సియెర్స్ ప్రభావాలు సృష్టించడానికి మీ ప్రవణత బహుళ రంగులు జోడించవచ్చు. ఈ రంగులను జోడించడానికి, మీరు కామాల ద్వారా వేరుచేసిన మీ ఆస్తి యొక్క చివరికి అదనపు రంగులను జతచేయండి. రంగులు ఎక్కడ ప్రారంభించాలో లేదా అంతం అయ్యేటప్పుడు మీరు ఎక్కడ ఉండాలి.
ఇంటర్నెట్ ఎక్స్ప్లోరర్ ఫిల్టర్లు రెండు రంగు విరామాలు మాత్రమే మద్దతిస్తాయి, కాబట్టి మీరు ఈ ప్రవణతను రూపొందించినప్పుడు, మీరు ప్రదర్శించాలనుకుంటున్న మొదటి మరియు రెండవ రంగులను మాత్రమే మీరు కలిగి ఉండాలి.
ఇక్కడ పైన 3-రంగు గ్రేడియంట్ కోసం CSS ఉంది:
background: #ffffff;
background: -moz-linear-gradient (left, #ffffff 0%, # 901A1C 51%, #ffffff 100%);
background: -వెబ్కిట్-ప్రవణత (సరళ, ఎడమ ఎగువ, కుడి ఎగువ, రంగు-స్టాప్ (0%, # ffffff), రంగు-స్టాప్ (51%, # 901A1C), రంగు-స్టాప్ (100%, # ffffff));
background: -webkit-linear-gradient (left, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
background: -o-linear-gradient (left, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
background: -ms-linear-gradient (ఎడమ, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
వడపోత: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# ffffff', endColorstr = '# ffffff', GradientType = 1);
నేపథ్య: సరళ-ప్రవణత (ఎడమ, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
కేవలం CSS ను ఉపయోగించి మూడు రంగుల విరామాలతో ఈ సరళ ప్రవణత చూడండి.
04 యొక్క 04
భవనం గ్రేడియంట్స్ సులభంగా చేయండి
నేను మీరు ప్రవణతలు నిర్మించడానికి సహాయం కోసం సిఫార్సు రెండు సైట్లు ఉన్నాయి, వారు ప్రతి ప్రయోజనాలు మరియు ప్రతికూలతలు కలిగి, నేను ఇంకా ప్రతిదీ చేస్తుంది ఒక ప్రవణత బిల్డర్ దొరకలేదు.
అల్టిమేట్ CSS గ్రేడియంట్ జనరేటర్
ఇది Photoshop వంటి కార్యక్రమాలలో ప్రవణత బిల్డర్లకు ఇదే పద్ధతిలో అమలు చేస్తున్నందున ఈ వాలు జనరేటర్ బాగా ప్రసిద్ది చెందింది. నేను కూడా వెబ్కిట్ మరియు మొజిల్లా, మీరు అన్ని CSS పొడిగింపులు ఇస్తుంది ఎందుకంటే అది ఇష్టం. ఈ జెనరేటర్ తో సమస్య అది సమాంతర మరియు నిలువు ప్రవణతలు మాత్రమే మద్దతిస్తుంది. మీరు వికర్ణ ప్రవణతలు చేయాలనుకుంటే, నేను సిఫార్సు చేసిన ఇతర జెనరేటర్కి వెళ్లాలి.
CSS3 గ్రేడియంట్ జనరేటర్
ఈ జెనరేటర్ మొట్టమొదటి కంటే అర్థం చేసుకోవడానికి కొంచం ఎక్కువ సమయం పట్టింది, కానీ దిశను ఒక వికర్ణంగా మారుస్తుంది.
మీరు వీటి కంటే మెరుగైన మరొక CSS గ్రేడియంట్ జనరేటర్ గురించి తెలిస్తే , దయచేసి మాకు తెలియజేయండి .