స్ప్రిట్స్ అనే భావన కొంతకాలంగా ఉంది. తెరపై యానిమేషన్లను ప్రదర్శించే ప్రక్రియను వేగవంతం చేయడానికి ఆట పరిశ్రమలో సాధారణంగా ఉపయోగించే సాంకేతికతలలో ఇది ఒకటి. ఈ వ్యాసంలో, కింది క్రమంలో CSS స్ప్రిట్స్ సహాయంతో వెబ్ పేజీలలో వినియోగదారు అనుభవాన్ని మెరుగుపరచడానికి ఈ టెక్నిక్ ఎలా సహాయపడుతుందో మేము ప్రత్యేకంగా పరిశీలిస్తాము:
- స్ప్రైట్ అంటే ఏమిటి?
- CSS స్ప్రైట్ అంటే ఏమిటి - శీఘ్ర అవలోకనం?
- వెబ్ అభివృద్ధిలో ఇది ఎలా సహాయపడుతుందో ఉదాహరణ?
- CSS స్ప్రిట్‌లను ఉపయోగించడం వల్ల కలిగే ప్రయోజనాలు
- CSS స్ప్రిట్‌లతో పనిచేసేటప్పుడు డెవలపర్‌కు ఏమి చేయాలి?
- CSS స్ప్రైట్ షీట్ ఎలా సృష్టించాలి?
- CSS స్ప్రిట్‌లతో ఎలా పని చేయాలి?
- CSS స్ప్రిట్‌లను ఉపయోగించే కంపెనీలు
స్ప్రైట్ అంటే ఏమిటి?
స్ప్రైట్ అనేది ఆటలోని పెద్ద సన్నివేశంలో భాగమైన ఒకే చిత్రం. అప్పుడు బహుళ స్ప్రిట్‌లను స్ప్రైట్ షీట్ అని పిలిచే పెద్ద చిత్రంగా కలుపుతారు. ఒక స్ప్రైట్ షీట్ మెమరీలోకి లోడ్ అయిన తర్వాత, యానిమేషన్ యొక్క భ్రమను ఇవ్వడానికి వేర్వేరు స్ప్రిట్‌లు త్వరితగతిన ఇవ్వబడతాయి. ఆటలో ఒక దృశ్యాన్ని రూపొందించడానికి పదుల నుండి వందల వేర్వేరు స్ప్రిట్‌లకు ఇది ఏకకాలంలో జరుగుతుంది.
ప్రాథమిక ఆలోచన ఏమిటంటే, ఒక చిత్రాన్ని లోడ్ చేయడం మరియు దానిలో కొంత భాగాన్ని అవసరమైన చోట ప్రదర్శించడం చాలా ఎక్కువ చిత్రాలను లోడ్ చేయడంతో పోలిస్తే మరియు వాటిని ప్రదర్శించడం.
CSS స్ప్రైట్ అంటే ఏమిటి: శీఘ్ర అవలోకనం?
CSS స్ప్రైట్ అనేది వెబ్ పేజీల పనితీరును ఆప్టిమైజ్ చేయడానికి వెబ్ డెవలపర్లు తరచుగా ఉపయోగించే ఒక టెక్నిక్. ఈ పద్ధతిలో, సాధారణంగా ఒకే కొలతలు కలిగిన బహుళ చిన్న చిత్రాలను ఒకే పెద్ద చిత్రంగా కలుపుతారు స్ప్రైట్ షీట్ లేదా టైల్ సెట్ . ఈ స్ప్రైట్ షీట్ మనకు అవసరమైన చోట వ్యక్తిగత అంశాలను ప్రదర్శించడానికి ఉపయోగించబడుతుంది.
సాధారణంగా, లోగోలు, నావిగేషన్ బాణాలు, బటన్లు వంటి అంశాలు స్ప్రైట్ షీట్‌లో చేర్చబడతాయి ఎందుకంటే అవి దాదాపు ఒకే కొలతలు మరియు వెబ్ పేజీలో తరచుగా ఉపయోగించబడతాయి.
వెబ్ అభివృద్ధిలో ఇది ఎలా సహాయపడుతుందో ఉదాహరణ?
సాధారణంగా, వెబ్ పేజీల రూపకల్పన చేసేటప్పుడు చిత్రాలు నిల్వ చేయబడతాయి మరియు వ్యక్తిగత ఫైళ్ళగా ఉపయోగించబడతాయి. కాబట్టి, ఒక వినియోగదారు వెబ్‌పేజీని తెరిచినప్పుడు, బ్రౌజర్ ఈ ఫైళ్ళలో ప్రతిదానికి ఒక HTTP అభ్యర్థన చేయాలి, వాటిని విడిగా డౌన్‌లోడ్ చేసి వాటిని ప్రదర్శిస్తుంది. ఒక నిర్దిష్ట వెబ్ పేజీ బటన్లు, చిహ్నాలు, లోగోలు వంటి పెద్ద సంఖ్యలో చిన్న చిత్రాలను కలిగి ఉండటంతో ఇది అధిక పేజీ లోడ్ సమయాలకు దారితీస్తుంది.
తరచుగా ఉపయోగించే ఈ చిన్న చిత్రాలను ఒక పెద్ద చిత్రంగా మిళితం చేయడానికి CSS స్ప్రిట్‌లు డెవలపర్‌లకు సహాయపడతాయి. బ్రౌజర్ అప్పుడు ఉపయోగించిన ఒక ఫైల్‌ను మాత్రమే డౌన్‌లోడ్ చేసుకోవాలిచిత్రాన్ని ఆఫ్‌సెట్ చేయడం ద్వారా అవసరమైన విభాగాన్ని ప్రదర్శించండి.
CSS స్ప్రిట్‌లను ఉపయోగించడం వల్ల కలిగే ప్రయోజనాలు
సాధారణ చిత్రాల కంటే CSS స్ప్రిట్‌లను ఉపయోగించడం వల్ల రెండు ప్రధాన ప్రయోజనాలు ఉన్నాయి:
వేగంగా పేజీ లోడింగ్: షీట్ డౌన్‌లోడ్ అయిన వెంటనే వెబ్ పేజీలో ఉపయోగించిన చిత్రాలు కనిపిస్తున్నందున పేజీ లోడింగ్ సమయాన్ని మెరుగుపరుస్తుంది.
గ్రేటర్ నిర్గమాంశ మరియు తక్కువ వనరుల వినియోగం: ఈ టెక్నిక్ పేజీని వేగంగా లోడ్ చేయడం ద్వారా తుది వినియోగదారు అనుభవాన్ని మెరుగుపరుస్తుంది,తక్కువ సంఖ్యలో HTTP అభ్యర్ధనలు చేయబడినందున ఇది నెట్‌వర్క్ రద్దీని కూడా తగ్గిస్తుంది.
CSS స్ప్రిట్‌లతో పనిచేసేటప్పుడు డెవలపర్‌కు ఏమి చేయాలి?
వ్యక్తిగత చిత్రాలతో పనిచేసేటప్పుడు, డెవలపర్ HTML ట్యాగ్‌తో పని చేయవచ్చు మరియు అవసరమైతే దాన్ని CSS లో స్టైల్ చేయండి. CSS స్ప్రిట్‌లతో పనిచేసేటప్పుడు, డెవలపర్ రెండు నిర్దిష్ట పనులు చేయాలి:
- స్ప్రైట్ షీట్ సృష్టి
డెవలపర్ CSS స్ప్రిట్‌లను ఉపయోగించాలని నిర్ణయించుకుంటే వెబ్ పేజీని అభివృద్ధి చేస్తున్నప్పుడు, అతడు / ఆమె మొదట గ్రిడ్ లాంటి నమూనాలో బటన్లు, లోగోలు మొదలైన కావలసిన అన్ని అంశాలను విలీనం చేయడం ద్వారా స్ప్రైట్ షీట్‌ను సృష్టించాలి. ఫోటోషాప్ లేదా జింప్ వంటి ఏదైనా ఇమేజ్ ఎడిటింగ్ ప్రోగ్రామ్‌ను ఉపయోగించి దీన్ని చేయవచ్చు. స్ప్రైట్ షీట్ చేయడానికి మీకు సహాయపడే అనేక ఆన్‌లైన్ సాధనాలు కూడా అందుబాటులో ఉన్నాయి. ఈ సాధనాలు తరువాత ఈ వ్యాసంలో చర్చించబడతాయి.
- ఉపయోగించి స్ప్రైట్ యొక్క ఒక నిర్దిష్ట మూలకాన్ని యాక్సెస్ చేయండి CSS నేపథ్య-స్థానం ఆస్తి
స్ప్రైట్ షీట్ సిద్ధమైన తర్వాత, డెవలపర్ అప్పుడు షీట్ యొక్క వివిధ భాగాలను యాక్సెస్ చేయడానికి CSS లక్షణాలను ఉపయోగించాలి.
php print_r శ్రేణి
- వెడల్పు: స్ప్రైట్ యొక్క వెడల్పు
- ఎత్తు: స్ప్రైట్ యొక్క ఎత్తు
- నేపథ్య: స్ప్రైట్ షీట్కు సూచన
- నేపథ్యం-స్థానం: స్ప్రైట్ షీట్ యొక్క అవసరమైన భాగాన్ని మాత్రమే యాక్సెస్ చేయడానికి ఆఫ్‌సెట్ విలువలు (పిక్సెల్‌లలో)
CSS స్ప్రైట్ షీట్ ఎలా సృష్టించాలి?
మీ చిన్న చిత్రాలను గ్రిడ్‌లోకి అమర్చడానికి మీరు ఏదైనా ఇమేజ్ ఎడిటింగ్ సాఫ్ట్‌వేర్‌ను ఉపయోగించవచ్చు కాని రెండు సులభమైన పద్ధతులు క్రింద చర్చించబడ్డాయి:
1. ఆన్‌లైన్ స్ప్రైట్ షీట్ సృష్టి సాధనం
లింక్: toptal.com/developers/css/sprite-generator/
ఈ సాధనం ఉపయోగించడానికి ఉచితం మాత్రమే కాదు, స్ప్రైట్ షీట్‌ను సూచించేటప్పుడు ఉపయోగించగల అవసరమైన CSS కోడ్‌ను కూడా మీకు అందిస్తుంది. అలాగే, మీరు మూలకాల మధ్య పాడింగ్ మరియు వాటి అమరికను మార్చడం వంటి విభిన్న లక్షణాలతో ఫిడేల్ చేయవచ్చు.
2. స్ప్రిట్‌తో స్ప్రైట్ షీట్‌ను రూపొందించడం
మీరు గుసగుసలాడుట, నోడ్ లేదా గల్ప్ ఉపయోగిస్తుంటే, మీరు స్ప్రిటీ అనే ప్యాకేజీని వ్యవస్థాపించవచ్చు, ఇది పిఎన్జి, జెపిజి, వంటి వివిధ ఫార్మాట్లలో స్ప్రైట్ షీట్ సృష్టించడానికి మీకు సహాయపడుతుంది.
మొదట, మీరు వీటిని ఉపయోగించి స్ప్రిటీని ఇన్‌స్టాల్ చేయాలి:
npm ఇన్‌స్టాల్ స్ప్రిటీ -g
అప్పుడు, స్ప్రైట్ షీట్ ఉత్పత్తి చేయడానికి, కింది ఆదేశాన్ని ఉపయోగించండి:
sprity ./output-directory/ ./input-directory/*.png
CSS స్ప్రిట్‌లతో ఎలా పని చేయాలి?
ఈ ఉదాహరణలో, మేము ఈ క్రింది స్ప్రైట్ షీట్‌ను ఉపయోగిస్తాము:
పై చిత్రంలో మీరు చూడగలిగినట్లుగా ఆరు చిహ్నాలు (ఇన్స్టాగ్రామ్, ట్విట్టర్ మరియు ఫేస్బుక్) గ్రిడ్ లాంటి నమూనాలో అమర్చబడ్డాయి. మొదటి వరుసలో, మనకు సాధారణ స్థితి ఉంది మరియు రెండవ వరుసలో, మనకు వాటి హోవర్ స్థితి ఉంది (మౌస్ కర్సర్‌ను వాటిపై ఉంచిన తర్వాత కనిపించే చిత్రం).
మేము పైన చర్చించిన సాధనాలను ఉపయోగించి మీరు స్ప్రైట్ షీట్ తయారు చేస్తే, మీకు ఇప్పటికే CSS లో అవసరమైన ఆఫ్‌సెట్‌లు తెలుసు, కానీ మీరు వేరే సాధనాన్ని ఉపయోగించినట్లయితే లేదా మీకు కొన్ని స్ప్రైట్ షీట్ ఇచ్చినట్లయితే చింతించకండి, మేము ఒక పద్ధతిని చర్చిస్తాము అవసరమైన మూలకం కోసం ఆఫ్సెట్లను పొందడానికి మీకు సహాయం చేస్తుంది.
MS పెయింట్ ఉపయోగించి ప్రతి ఆరు చిహ్నాలకు అవసరమైన ఆఫ్సెట్లను పొందడానికి ఇప్పుడు చాలా సులభమైన మార్గాన్ని చూద్దాం. ఇది స్ప్రిట్‌లతో పనిచేయడానికి అనువైన పరిష్కారం కాకపోవచ్చు కాని మౌస్ కర్సర్ యొక్క కోఆర్డినేట్‌లను అందించే లక్షణాన్ని కలిగి ఉన్నందున, అవసరమైన X మరియు Y కోఆర్డినేట్‌లను పొందడానికి దీనిని ఉపయోగించవచ్చు.
మొదట, మీ స్ప్రైట్ షీట్ ఇమేజ్ (అన్ని చిన్న చిత్రాలను కలిగి ఉన్న గ్రిడ్) తెరిచి, మీరు పట్టుకోవాలనుకునే స్ప్రైట్ యొక్క ఎగువ-ఎడమ మూలలో మీ మౌస్ కర్సర్‌ను తీసుకురండి.
మీ స్ప్రైట్ యొక్క ఎగువ-ఎడమ పాయింట్ (ఎగువ ఎడమ ఇన్స్టాగ్రామ్ ఇమేజ్) యొక్క కోఆర్డినేట్‌లను మీరు కలిగి ఉంటే, మీరు CSS కోడ్‌ను ఉపయోగించి అవసరమైన చోట ఈ నిర్దిష్ట స్ప్రైట్‌ను ప్రదర్శించవచ్చు:
నేపథ్యం: url ('img_sprites.png')
నేపథ్య స్థానం: 0 0
వెడల్పు: 125px
ఎత్తు: 125px
మా చిహ్నాలు ఆ పరిమాణంలో ఉన్నందున మేము వెడల్పు మరియు ఎత్తును 125 పిక్సెల్‌లుగా ఉపయోగిస్తున్నాము. తదుపరి వరుస (ట్విట్టర్) ను ఒకే వరుసలో పొందడానికి, మేము ఈ క్రింది కోడ్‌ను ఉపయోగిస్తాము:
నేపథ్యం: url ('img_sprites.png')
background-position: -128px 0px
వెడల్పు: 125px
ఎత్తు: 125px
పై స్నిప్పెట్‌లో నేపథ్య-స్థాన లక్షణాన్ని గమనించండి. (-128px, 0) అంటే మన స్ప్రైట్ షీట్‌ను ఎడమవైపు 128 పిక్సెల్‌లు (మూలకాల మధ్య పాడింగ్ తీసుకొని) మరియు Y- యాక్సిస్‌లో 0 పిక్సెల్‌ల ద్వారా ఆఫ్‌సెట్ చేస్తున్నాము. మేము ట్విట్టర్ హోవర్ చిహ్నాన్ని యాక్సెస్ చేస్తే, అప్పుడు మా నేపథ్య-స్థానం లక్షణం:
background-position: -128px -128px
ఈ విధంగా, మేము ఇప్పుడు CSS ఉపయోగించి మా స్ప్రైట్ షీట్ యొక్క ప్రతి భాగాన్ని యాక్సెస్ చేయవచ్చు. దీన్ని ఎలా చేయాలో పూర్తి HTML మరియు CSS కోడ్ ద్వారా చూద్దాం.
దశ 1: అవసరమైన HTML కోడ్ రాయడం
దిగువ కోడ్‌లో, మేము కేవలం మూడు లింక్‌లను జోడిస్తున్నాము. అలాగే, మేము మా HTML ను స్టైల్షీట్ (screen.css) తో లింక్ చేస్తాము.
దశ 2: అవసరమైన CSS రాయడం. మొదట, మేము మా షేర్డ్ ఐకాన్ క్లాస్‌ను స్టైల్ చేస్తాము. ఇక్కడ, మేము సృష్టించిన స్ప్రైట్ షీట్ గురించి మేము ప్రస్తావిస్తున్నట్లు మీరు చూడవచ్చు.
/ * భాగస్వామ్య చిహ్నం తరగతి * /
span.icon ఒక లింక్,
span.icon a: సందర్శించారు{
ప్రదర్శన:బ్లాక్
టెక్స్ట్-ఇండెంట్:-9999 పిక్స్
జావాలో లాగర్ ఎలా ఉపయోగించాలి
నేపథ్య-చిత్రం: url (./ img_sprites.png)
నేపథ్య-పునరావృతం:నో రిపీట్
}
దశ 3: ఆఫ్సెట్లను ఉపయోగించి స్ప్రైట్ షీట్ నుండి వ్యక్తిగత చిహ్నాలను పొందడం.
/ * Instagram చిహ్నం * /
span.instagram ఒక లింక్,
span.instagram a: సందర్శించారు{
వెడల్పు:125 పిక్స్
ఎత్తు:125 పిక్స్
నేపథ్య స్థానం:0 0
}
/ * ట్విట్టర్ ఐకాన్ * /
span.twitter ఒక లింక్,
span.twitter a: సందర్శించారు{
వెడల్పు:125 పిక్స్
ఎత్తు:125 పిక్స్
నేపథ్య స్థానం:-128 పిక్స్ 0
}
/ * ఫేస్బుక్ ఐకాన్ * /
span.facebook ఒక లింక్,
span.facebook a: సందర్శించారు{
వెడల్పు:125 పిక్స్
ఎత్తు:125 పిక్స్
నేపథ్య స్థానం:-257 పిక్స్ 0
}
దశ 4: ఆఫ్సెట్లను ఉపయోగించి స్ప్రైట్ షీట్ నుండి హోవర్ చిహ్నాలను పొందడం.
span.instagram a: హోవర్{నేపథ్య స్థానం:0 -128 పిక్స్}
ఆరోహణ క్రమం c ++
span.twitter a: హోవర్{నేపథ్య స్థానం:-128 పిక్స్ -128 పిక్స్}
span.facebook a: హోవర్{నేపథ్య స్థానం:-255 పిక్స్ -128 పిక్స్}
CSS స్ప్రిట్‌లను ఉపయోగించే కంపెనీలు
పరిశ్రమలోని చాలా పెద్ద పేర్లు వారి వెబ్‌సైట్ల ప్రతిస్పందనను మెరుగుపరచడానికి CSS స్ప్రిట్‌లను ఉపయోగిస్తాయి. గూగుల్, ఫేస్బుక్, అమెజాన్ వంటి సంస్థలు ఈ పద్ధతిని విస్తృతంగా ఉపయోగిస్తాయి, ఎందుకంటే ఇది ఒక నిర్దిష్ట వినియోగదారు కోసం ప్రతి సెషన్‌కు హెచ్‌టిటిపి అభ్యర్థనల సంఖ్యను తగ్గించడానికి సహాయపడుతుంది. ఈ కంపెనీలు ఏ క్షణంలోనైనా మిలియన్ల మంది వినియోగదారులకు సేవలు అందిస్తాయని మేము పరిగణనలోకి తీసుకున్నప్పుడు ఇది చాలా పెద్ద ప్రయోజనం.
ఇప్పుడు మీకు CSS స్ప్రిట్స్ అంటే ఏమిటి మరియు వాటితో ఎలా పని చేయాలి అనే దానిపై పట్టు ఉంది, మీరు CSS నేర్చుకోవడానికి మీ ప్రయాణంలో ఒక అడుగు దగ్గరగా ఉన్నారు. డెవలపర్లు వెబ్‌పేజీ నుండి ప్రతి బిట్ పనితీరును సంగ్రహించడం చాలా ముఖ్యమైనదిగా ఉన్నందున, స్ప్రిట్స్ వంటి అంశాలు నేటి కాలంలో ఆట మారేవి.
మా చూడండి ఇది బోధకుడు నేతృత్వంలోని ప్రత్యక్ష శిక్షణ మరియు నిజ జీవిత ప్రాజెక్ట్ అనుభవంతో వస్తుంది. ఈ శిక్షణ బ్యాక్ ఎండ్ మరియు ఫ్రంట్ ఎండ్ వెబ్ టెక్నాలజీలతో పనిచేయడానికి మీకు నైపుణ్యాలలో నైపుణ్యం కలిగిస్తుంది. ఇందులో వెబ్ డెవలప్‌మెంట్, j క్వెరీ, కోణీయ, నోడ్జెఎస్, ఎక్స్‌ప్రెస్‌జెఎస్ మరియు మొంగోడిబిపై శిక్షణ ఉంటుంది.
మాకు ప్రశ్న ఉందా? దయచేసి దీనిని “HTML ఇమేజెస్” బ్లాగ్ యొక్క వ్యాఖ్యల విభాగంలో పేర్కొనండి మరియు మేము మిమ్మల్ని సంప్రదిస్తాము.