Home-theater-designers
CSS లో ఉపయోగం కోసం అందుబాటులో ఉన్న అత్యంత అధునాతన సెలెక్టర్లలో సూడో-ఎలిమెంట్స్ ఒకటి. ఈ సెలెక్టర్ల వెనుక ఉన్న ముఖ్య ఉద్దేశ్యం, ఇచ్చిన వెబ్‌పేజీ యొక్క ప్రాథమిక నిర్మాణాన్ని రూపొందించడానికి ఉపయోగించే HTML పత్రాన్ని మార్చకుండా, ప్రత్యేకమైన స్టైలింగ్‌ని సృష్టించడం.
CSS లో సూడో-ఎలిమెంట్‌లను ఎలా ఉపయోగించాలో ఇక్కడ ఉంది.
పాత ఫ్లాట్ స్క్రీన్ మానిటర్‌లతో ఏమి చేయాలి
సాధారణ నకిలీ అంశాలు
వెబ్ డెవలపర్ జీవితాన్ని సులభతరం చేయడానికి అందుబాటులో ఉన్న నకిలీ అంశాల విస్తృత జాబితా ఉంది. ఈ నకిలీ అంశాలలో కొన్ని:
- ముందు
- తర్వాత
- బ్యాక్‌డ్రాప్
- మొదటి లైన్
- మొదటి అక్షరం
నిర్దిష్ట పరిస్థితులలో, కొన్ని సూడో-ఎలిమెంట్‌లు ఇతరులకన్నా చాలా సరిఅయినవిగా రుజువు చేయబడతాయి, కానీ స్థిరంగా ఉండే ఒక విషయం ఏదైనా సూడో-ఎలిమెంట్‌ను ఉపయోగించే సాధారణ నిర్మాణం.
సూడో-ఎలిమెంట్స్ స్ట్రక్చర్ ఉదాహరణ
selector::pseudo-element{
/* css code */
} మీరు ఒక HTML ఎలిమెంట్‌ను సెలెక్టర్‌గా ఉపయోగించగలిగినప్పటికీ, మీ లేఅవుట్‌లోని అనాలోచిత అంశాలను టార్గెట్ చేయకుండా ఉండటానికి మీరు క్లాస్ లేదా ఐడిని ఉపయోగించమని సిఫార్సు చేయబడింది. కావలసిన స్థానంలో మీరు చొప్పించదలిచిన మూలకం, శైలి లేదా డేటా గిరజాల బ్రేస్‌ల మధ్య ఉంచాలి.
సూడో-ఎలిమెంట్స్ ముందు మరియు తరువాత జాబితాలో అత్యంత ప్రాచుర్యం పొందాయి మరియు వాటిని ఉపయోగించడానికి అనేక ఆచరణాత్మక మార్గాలు ఉన్నాయి-ఎందుకో చూడటం కష్టం కాదు.
CSS లో ముందు సూడో-మూలకాన్ని ఉపయోగించడం
అసాధ్యం కానప్పటికీ, CSS లో చదవగలిగే టెక్స్ట్‌తో చిత్రాలను అతివ్యాప్తి చేయడం కష్టం. ఇమేజ్ మరియు టెక్స్ట్ వెబ్‌పేజీలో ఒకే స్థానాన్ని ఆక్రమించడమే దీనికి కారణం.
ఇది సాపేక్షంగా సులభం టెక్స్ట్ సమూహం నేపథ్యానికి చిత్రాన్ని పంపండి , కానీ ఆ చిత్రం చాలా ప్రకాశవంతంగా ఉన్నప్పుడు దాని పైన ఉన్న వచనాన్ని ముంచెత్తుతుంది. ఈ సందర్భాలలో, తదుపరి దశ అస్పష్టత ఆస్తిని ఉపయోగించి చిత్రాన్ని తక్కువ అపారదర్శకంగా చేయడానికి ప్రయత్నించడం.
ఒకే సమస్య ఏమిటంటే ఇమేజ్ మరియు టెక్స్ట్ ఒకే స్థానాన్ని ఆక్రమించినందున టెక్స్ట్ కూడా కొంత పారదర్శకంగా మారుతుంది.
ఈ సమస్యను పరిష్కరించడానికి కొన్ని ప్రభావవంతమైన మార్గాలలో ఒకటి ముందు సూడో-మూలకాన్ని ఉపయోగించడం.
ముందు సూడో-మూలకం ఉదాహరణను ఉపయోగించడం
.landingPage{
/* Arranges the text on the image overlay */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
/*sets the page to adjust to different screen sizes*/
height: 100vh;
}
.landingPage::before{
content:'';
/*imports an image*/
background: url(https://source.unsplash.com/_1EYIHRG014/1600x900)
no-repeat center/cover;
/*places an overlay on top of the image*/
opacity: 0.4;
/*makes the image visible*/
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}పై కోడ్ దిగువ HTML ల్యాండింగ్ పేజీ క్లాస్‌తో ఏకీభవించడానికి ఉపయోగించబడుతుంది. పైన ఉన్న కోడ్‌లో చూపినట్లుగా, ముందు సూడో-ఎలిమెంట్‌ని ఉపయోగించడం ద్వారా మనం ఇమేజ్‌ని టార్గెట్ చేయవచ్చు మరియు ఇమేజ్ టెక్స్ట్‌తో కలపడానికి ముందు దానిపై అస్పష్టత ప్రాపర్టీని ఉపయోగించవచ్చు.
This is the result of using the before pseudo-element
to overlay and image with readable text.
దీని వలన చిత్రంపై ఓవర్‌లే ఉంచబడుతుంది మరియు దిగువ చిత్రంలో చూపిన విధంగా స్పష్టమైన టెక్స్ట్ పైన ప్రదర్శించబడుతుంది:
CSS లో తరువాత సూడో-మూలకాన్ని ఉపయోగించడం
ఒక సూత్రీయ మూలకం కోసం ఒక ఆచరణాత్మక ఉపయోగం ఒక HTML ఫారమ్‌ను రూపొందించడంలో సహాయపడటం. ఫారమ్ విజయవంతంగా సమర్పించడానికి డేటా అవసరమయ్యే ఫీల్డ్‌ల సమితితో చాలా ఫారమ్‌లు సృష్టించబడతాయి.
ఫారమ్‌లోని ఫీల్డ్‌కు డేటా అవసరమని సూచించడానికి ఒక మార్గం ఈ ఫీల్డ్ కోసం లేబుల్ తర్వాత ఆస్టరిస్క్ ఉంచడం. సూడో-ఎలిమెంట్ తర్వాత మీరు దీన్ని చేయడానికి ఒక ఆచరణాత్మక మార్గాన్ని అందిస్తుంది.
సూడో-ఎలిమెంట్ ఉదాహరణ తర్వాత ఉపయోగించడం
.required::after{
content: '*';
color: red;
} మీ ఫారమ్‌లోని CSS విభాగంలో పైన ఉన్న కోడ్‌ని చొప్పించడం వలన అవసరమైన క్లాస్‌ని కలిగి ఉన్న ప్రతి లేబుల్ నేరుగా ఎరుపు ఆస్టరిస్క్‌తో ఉంటుంది. సూడో-మూలకం ఈ ఉదాహరణలో కూడా ఆచరణాత్మకమైనది ఎందుకంటే ఇది స్టైలింగ్‌ని స్ట్రక్చర్ నుండి వేరు చేయడానికి సహాయపడుతుంది (ఇది సాఫ్ట్‌వేర్ డెవలప్‌మెంట్‌లో ఎల్లప్పుడూ అనువైనది.)
హాట్ స్పాట్ ఎలా పని చేస్తుంది
కంటెంట్ ఆస్తి
పైన సూడో-ఎలిమెంట్ ఉదాహరణలో చూపినట్లుగా, కంటెంట్ ప్రాపర్టీ అనేది వెబ్‌పేజీలో కొత్త కంటెంట్‌ను ఇన్సర్ట్ చేయడానికి ఉపయోగించే టూల్. ఈ ఆస్తి నకిలీ-మూలకాలకు ముందు మరియు తరువాత మాత్రమే ఉపయోగించబడుతుంది.
కంటెంట్ ప్రాపర్టీకి ఫీడ్ చేయడానికి కంటెంట్ అందుబాటులో లేనప్పటికీ (పైన పేర్కొన్న సూడో-ఎలిమెంట్ ఉదాహరణ వంటివి), మీరు ఇంకా ముందు లేదా తరువాత పారామీటర్లలో కంటెంట్ ప్రాపర్టీని ఉపయోగించాల్సి ఉంటుంది. సూడో ఎలిమెంట్ వాటిని ఉద్దేశించిన విధంగా పని చేయడానికి.
ఇప్పుడు మీరు CSS లో సూడో-ఎలిమెంట్‌లను ఉపయోగించవచ్చు
ఈ వ్యాసంలో, మీ CSS ప్రోగ్రామ్‌లలో నకిలీ-మూలకాలను ఎలా గుర్తించాలో మరియు ఎలా ఉపయోగించాలో మీరు నేర్చుకున్నారు. మీరు నకిలీ మూలకాలకు ముందు మరియు తరువాత పరిచయం చేయబడ్డారు మరియు రెండింటినీ ఉపయోగించడానికి ఆచరణాత్మక మార్గాలు ఇవ్వబడ్డాయి. నకిలీ-మూలకాల ముందు మరియు తరువాత విజయవంతంగా ఉపయోగించడానికి కంటెంట్ ఆస్తి ఎందుకు అవసరమో కూడా మీరు చూడగలిగారు.
షేర్ చేయండి షేర్ చేయండి ట్వీట్ ఇమెయిల్ 10 సాధారణ CSS కోడ్ ఉదాహరణలు మీరు 10 నిమిషాల్లో నేర్చుకోవచ్చుCSS తో సహాయం కావాలా? ప్రారంభించడానికి ఈ ప్రాథమిక CSS కోడ్ ఉదాహరణలను ప్రయత్నించండి, ఆపై వాటిని మీ స్వంత వెబ్ పేజీలకు వర్తింపజేయండి.
తదుపరి చదవండి సంబంధిత అంశాలు- ప్రోగ్రామింగ్
- వెబ్ డిజైన్
- CSS
కదీషా కీన్ పూర్తి-స్టాక్ సాఫ్ట్‌వేర్ డెవలపర్ మరియు టెక్నికల్/టెక్నాలజీ రైటర్. ఆమె చాలా క్లిష్టమైన సాంకేతిక భావనలను సరళీకృతం చేసే ప్రత్యేక సామర్థ్యాన్ని కలిగి ఉంది; ఏదైనా సాంకేతిక అనుభవం లేని వ్యక్తి సులభంగా అర్థం చేసుకోగల పదార్థాన్ని ఉత్పత్తి చేయడం. ఆమె రాయడం, ఆసక్తికరమైన సాఫ్ట్‌వేర్‌ను అభివృద్ధి చేయడం మరియు ప్రపంచాన్ని పర్యటించడం (డాక్యుమెంటరీల ద్వారా) పట్ల మక్కువ చూపుతుంది.
కదీషా కీన్ నుండి మరిన్నిమా వార్తాలేఖకు సభ్యత్వాన్ని పొందండి
టెక్ చిట్కాలు, సమీక్షలు, ఉచిత ఈబుక్‌లు మరియు ప్రత్యేకమైన డీల్స్ కోసం మా వార్తాలేఖలో చేరండి!
సభ్యత్వం పొందడానికి ఇక్కడ క్లిక్ చేయండి