ఈ కథనం టైల్‌విండ్‌లో స్థాన లక్షణాలతో హోవర్, ఫోకస్ మరియు ఇతర రాష్ట్రాల వినియోగాన్ని వివరిస్తుంది.
టైల్‌విండ్‌లో పొజిషన్ ప్రాపర్టీతో హోవర్, ఫోకస్ మరియు ఇతర స్టేట్‌లను ఎలా ఉపయోగించాలి?
టెయిల్‌విండ్‌లోని హోవర్, ఫోకస్ మరియు ఇతర స్టేట్‌లు టెయిల్‌విండ్‌లోని స్టైల్ ఎలిమెంట్‌లకు ఆకర్షణీయమైన మరియు వినియోగదారు-స్నేహపూర్వక ఇంటర్‌ఫేస్ మరియు వినియోగదారులకు ఆకర్షణీయమైన అనుభవాన్ని అందించడానికి ఉపయోగించబడతాయి. కొన్నిసార్లు, అనుభవాన్ని దాని అత్యున్నత ప్రమాణాలకు కొనసాగించడానికి స్థానం ఆస్తిని వర్తింపజేయాలి.
విధానం 1: పొజిషన్ ప్రాపర్టీతో హోవర్ వేరియంట్‌ని ఉపయోగించడం
ఎంచుకున్న మూలకంపై వినియోగదారు కర్సర్‌ను తరలించినప్పుడు ఎంచుకున్న మూలకాలను స్టైల్ చేయడానికి హోవర్ వేరియంట్ ఉపయోగించబడుతుంది. ది ' స్థానం 'లక్షణాన్ని'తో కలిపి ఉపయోగించవచ్చు హోవర్ ” హోవర్‌కు ముందు మరియు తర్వాత స్థానాన్ని సెట్ చేయడానికి. ఈ జంట వినియోగదారుకు ఆకర్షణీయమైన అనుభవాన్ని సృష్టించడానికి ఉపయోగించబడుతుంది.
దశ 1: HTMLలో స్థానంతో హోవర్ ప్రాపర్టీని జోడించండి
దిగువ కోడ్‌లో, హోవర్ ప్రాపర్టీ 'పై స్థాన లక్షణంతో పాటు వర్తించబడుతుంది బటన్ ' మూలకం:
< శరీరం >
< బటన్ తరగతి = 'relative w-40 h-12 bg-blue-500 hover:absolute hover:translate-x-4 hover:translate-y-4 ' >
< p తరగతి = 'టెక్స్ట్-వైట్ టెక్స్ట్-సెంటర్' > నన్ను హోవర్ చేయండి < / p >
< / బటన్ >
< / శరీరం >
ఈ కోడ్‌లో:
- ది ' బంధువు ” తరగతి పేరెంట్ పేజీకి సంబంధించి బటన్‌ను సెట్ చేస్తుంది.
- ' w-40 ” వెడల్పును 40pxకి సెట్ చేస్తుంది.
- ' h-12 ” ఎత్తును 12pxకి సెట్ చేస్తుంది.
- ' bg-blue-500 ” నేపథ్య రంగును నీలి రంగుకు సెట్ చేస్తుంది.
- ' హోవర్: సంపూర్ణ ” మౌస్ కర్సర్ దానిపై కదిలినప్పుడు బటన్ యొక్క సాపేక్ష స్థానాన్ని సంపూర్ణంగా మారుస్తుంది.
- ' హోవర్: అనువాదం-x-4 ” బటన్‌ను 4pxని x అక్షం మీద కుడికి మరియు అదే సమయంలో 4px కిందికి తరలిస్తుంది” హోవర్: అనువాదం-y-4 ”.
- వచనం మధ్యలోకి సమలేఖనం చేయబడింది “ టెక్స్ట్-సెంటర్ ”.
దశ 2: ధృవీకరణ
పై కోడ్ ద్వారా సృష్టించబడిన వెబ్‌పేజీని పరిదృశ్యం చేయండి, ఇది ఇలా కనిపిస్తుంది:
మూలకం కుడి మరియు క్రిందికి 4px ద్వారా తరలించబడిందని అవుట్‌పుట్ చూపుతుంది.
విధానం 2: పొజిషన్ ప్రాపర్టీతో ఫోకస్ వేరియంట్‌ని ఉపయోగించడం
ఫోకస్ వేరియంట్ వినియోగదారు దృష్టిని ఆకర్షించడానికి మరియు కొన్ని అంశాలకు ప్రాధాన్యతనిచ్చేలా HTML మూలకాలను స్టైల్ చేయడానికి ఉపయోగించబడుతుంది. ఆబ్జెక్ట్‌ను పేరెంట్ పేజీకి సాపేక్షంగా లేదా సంపూర్ణంగా ఉంచడానికి కూడా పొజిషన్‌ని అన్వయించవచ్చు. వినియోగదారుని నిమగ్నమై ఉంచడానికి ఇది జరుగుతుంది.
దశ 1: HTMLలో స్థానంతో ఫోకస్ ప్రాపర్టీని జోడించండి
HTML ఫైల్‌ను సృష్టించండి మరియు ఫోకస్ ప్రాపర్టీని తగిన స్థానంతో వర్తింపజేయండి. ఉదాహరణకు, దిగువ కోడ్‌లోని ఇన్పుట్ బాక్స్‌కు సంబంధిత స్థానం వర్తించబడుతుంది:
< / శరీరం >
ఈ కోడ్‌లో:
- ' యొక్క స్థానాన్ని సెట్ చేయండి ఇన్పుట్ 'మూలకాలు నుండి' బంధువు ”.
- ' దృష్టి: అనువాదం-x-4 ” బటన్‌ను 4pxని x అక్షం మీద కుడికి మరియు అదే సమయంలో 4px కిందికి తరలిస్తుంది” దృష్టి: అనువాదం-y-4 ” వినియోగదారు ఇన్పుట్ బాక్స్‌పై క్లిక్ చేసినప్పుడు.
- ' దృష్టి: రూపురేఖలు-2 ” వినియోగదారు క్లిక్ చేసినప్పుడు టెక్స్ట్ బాక్స్ చుట్టూ రూపురేఖలను సృష్టిస్తుంది.
దశ 2: అవుట్‌పుట్‌ని ధృవీకరించండి
మార్పును గమనించడానికి కోడ్ ద్వారా సృష్టించబడిన వెబ్‌పేజీని పరిదృశ్యం చేయండి:
ఎంచుకున్న మూలకం దృష్టి కేంద్రీకరించబడినప్పుడు దానికి శైలి వర్తించబడిందని ఎగువ అవుట్‌పుట్ చూపుతుంది.
పొజిషన్ ప్రాపర్టీతో యాక్టివ్ వేరియంట్‌ని ఉపయోగించడం.
వినియోగదారు ఒక బటన్‌ను లేదా మరేదైనా మూలకాన్ని క్లిక్ చేసి పట్టుకున్నప్పుడు స్థితిని నిర్వచించడానికి HTML మూలకాలను స్టైల్ చేయడానికి యాక్టివ్ వేరియంట్ ఉపయోగించబడుతుంది. పొజిషన్ ప్రాపర్టీ మరింత డైనమిక్ అనుభవాన్ని సృష్టించే వినియోగదారుల కోసం అవుట్‌పుట్‌ను మరింత ఆకర్షణీయంగా చేస్తుంది.
దశ 1: HTMLలో స్థానంతో హోవర్ ప్రాపర్టీని జోడించండి
HTML ఫైల్‌ను సృష్టించండి మరియు స్థాన ప్రాపర్టీతో కలిపి క్రియాశీల వేరియంట్‌ను వర్తింపజేయండి. ఉదాహరణకు, ఈ లక్షణాలు క్రింది కోడ్ ఉదాహరణలోని బటన్‌కు వర్తింపజేయబడతాయి:
< బటన్ తరగతి = 'సంబంధిత w-48 h-12 bg-blue-500 యాక్టివ్: అనువాదం-y-2 యాక్టివ్:bg-green-400' >
< వ్యవధి తరగతి = 'టెక్స్ట్-వైట్' > నన్ను క్లిక్ చేయండి< / వ్యవధి >
< / బటన్ >
< / శరీరం >
పై కోడ్‌లో:
- ' యొక్క స్థానాన్ని సెట్ చేయండి బటన్ 'మూలకం నుండి' బంధువు ”.
- ' bg-blue-500 ” బటన్ యొక్క నేపథ్య రంగును నీలం రంగుకు సెట్ చేస్తుంది.
- ' సక్రియం: అనువాదం-y-2 ” బటన్‌ను 2px క్రిందికి కదిలిస్తుంది మరియు బటన్ రంగును ఆకుపచ్చగా మారుస్తుంది క్రియాశీల: bg-green-400 ”.
దశ 2: అవుట్‌పుట్‌ని ధృవీకరించండి
ఎగువ కోడ్ ద్వారా సృష్టించబడిన వెబ్‌పేజీని పరిదృశ్యం చేయండి మరియు మార్పును చూడటానికి బటన్‌ను క్లిక్ చేసి పట్టుకోండి:
ఎంచుకున్న బటన్ ఎలిమెంట్ యాక్టివ్‌గా మారినప్పుడు దాని స్టైలింగ్ మార్చబడిందని ఎగువ gif చూపిస్తుంది.
టైల్‌విండ్‌లో పొజిషన్ ప్రాపర్టీ ఉన్న హోవర్, ఫోకస్ మరియు ఇతర స్టేట్‌లను వర్తింపజేయడానికి అంతే.
ముగింపు
హోవర్, ఫోకస్ మరియు ఇతర స్థితులను హోవర్, ఫోకస్ మరియు ఇతర స్టేట్‌ల యొక్క ముందే నిర్వచించిన తరగతులను ఉపయోగించడం ద్వారా పొజిషన్ ప్రాపర్టీతో ఉపయోగించవచ్చు, ఆపై పొజిషన్ క్లాస్ అట్రిబ్యూట్‌లను వర్తింపజేయవచ్చు సంపూర్ణ ',' బంధువు ” మొదలగునవి కలిపి. టైల్‌విండ్‌లో పొజిషన్ యుటిలిటీతో హోవర్, ఫోకస్ మరియు ఇతర స్టేట్‌లను ఎలా ఉపయోగించాలో ఈ బ్లాగ్ చూపింది.