డ్రాప్ షాడో అనేది వెబ్‌పేజీలో రెండర్ చేయబడినప్పుడు ఎంచుకున్న HTML మూలకాల వెనుక ఒక నీడను పడేస్తుంది లేదా జోడించే ప్రభావం. ఈ ప్రభావాన్ని ఉపయోగించి సాధించవచ్చు ' డ్రాప్-షాడో() 'CSS విలువగా పద్ధతి' వడపోత 'ఆస్తి లేదా ఉపయోగించడం' పెట్టె-నీడ ”ఆస్తి. 'బాక్స్-షాడో' ప్రాపర్టీని ఉపయోగించడం ద్వారా, దృశ్య మెరుగుదల, వినియోగదారు అనుభవం, ఉద్ఘాటన మరియు దృష్టిని నిర్దిష్ట లక్ష్య HTML ఎలిమెంట్‌కు డ్రా చేయవచ్చు.
ఈ గైడ్ బాక్స్-షాడో ప్రాపర్టీని ఉపయోగించి డ్రాప్ షాడో ఎఫెక్ట్ చేసే విధానాన్ని ప్రదర్శిస్తుంది:
-
- బాక్స్-షాడో ప్రాపర్టీని ఉపయోగించి సాలిడ్ డ్రాప్ షాడో చేయండి
- బాక్స్-షాడో ప్రాపర్టీని ఉపయోగించి బ్లర్రీ డ్రాప్ షాడో చేయండి
- డ్రాప్ షాడో ప్రాంతాన్ని విస్తరించండి
బాక్స్-షాడో ప్రాపర్టీని ఉపయోగించి CSS3లో డ్రాప్ షాడోలను ఎలా తయారు చేయాలి?
ది ' పెట్టె-నీడ ” ప్రాపర్టీ డెవలపర్‌ని పేజీలోని ఎలిమెంట్‌ల సాపేక్ష స్థానాన్ని సూచించడం ద్వారా దృశ్య శ్రేణిని ఏర్పాటు చేయడానికి అనుమతిస్తుంది. దీన్ని ఉపయోగించడం ద్వారా, వెబ్ పేజీ సృష్టికర్తలు వస్తువులను ఉపరితలాలపై నీడలు వేస్తున్నట్లు భ్రమ కలిగించవచ్చు, మూలకాలకు మరింత ఇంటరాక్టివ్ అనుభూతిని ఇస్తుంది.
వాక్యనిర్మాణం
“బాక్స్-షాడో” ప్రాపర్టీకి వాక్యనిర్మాణం ఉంది:
పెట్టె నీడ: [ క్షితిజ సమాంతర ఆఫ్‌సెట్ ] [ నిలువు ఆఫ్‌సెట్ ] [ అస్పష్టమైన వ్యాసార్థం ] [ వ్యాప్తి వ్యాసార్థం ] [ రంగు ] ;
పై వాక్యనిర్మాణంలో ఉపయోగించిన పదాల వివరణ:
-
- ప్రారంభంలో, ' క్షితిజ సమాంతర ఆఫ్‌సెట్ 'X-అక్షం స్థానాన్ని తిరిగి పొందుతుంది/ నిల్వ చేస్తుంది మరియు ' ప్రతికూల ” విలువ నీడను ఎడమవైపుకు సెట్ చేస్తుంది మరియు దీనికి విరుద్ధంగా ఉంటుంది.
- ది ' నిలువు ఆఫ్‌సెట్ విలువ Y-అక్షం స్థానాన్ని నిల్వ చేస్తుంది, అనుకూల 'విలువ క్రిందికి నీడను సెట్ చేస్తుంది మరియు దీనికి విరుద్ధంగా' ప్రతికూల ' విలువ.
- తరువాత, ' అస్పష్టమైన వ్యాసార్థం పేరు నుండి విలువ నీడ యొక్క అస్పష్టతను సెట్ చేస్తుంది.
- ది ' వ్యాప్తి వ్యాసార్థం ” విలువ నీడ ఎంత వ్యాసార్థం విస్తరించాలో నిర్దేశిస్తుంది.
- ది ' రంగు ” నీడ రంగును సెట్ చేస్తుంది, అది “లో ఉంటుంది HSL 'లేదా' RGB ” ఫార్మాట్ కూడా.
ఇప్పుడు, మనం మంచి అవగాహన కోసం రెండు ఉదాహరణల ద్వారా నడుద్దాం:
ఉదాహరణ 1: బాక్స్-షాడో ప్రాపర్టీని ఉపయోగించి సాలిడ్ డ్రాప్ షాడోను వర్తింపజేయండి
సాలిడ్ డ్రాప్ షాడోను సెట్ చేయడానికి, దిశలు మరియు నీడ రంగు మాత్రమే 'కి విలువగా చొప్పించబడతాయి. పెట్టె-నీడ 'ఆస్తి:
< శైలి >.boxShadow ఉదాహరణ {
వెడల్పు: 210px;
అంచు: 2px ఘన కార్న్‌సిల్క్;
ఎత్తు: 210px;
నేపథ్య రంగు: #f0f0f0;
పెట్టె నీడ: 10px 10px అటవీ ఆకుపచ్చ;
}
శైలి >
పై కోడ్‌లో:
-
- ముందుగా, HTML మూలకం '' తరగతిని కలిగి ఎంచుకోబడింది. బాక్స్ షాడో ఉదాహరణ ”. మరియు విలువ ' 210px 'కి అందించబడింది' ఎత్తు 'మరియు' వెడల్పు 'గుణాలు. అలాగే, 'ని ఉపయోగించండి సరిహద్దు 'మరియు' నేపథ్య రంగు ”మెరుగైన విజువలైజేషన్ కోసం లక్షణాలు.
- తరువాత, ' విలువను సెట్ చేయండి 10px 10px అటవీ ఆకుపచ్చ ' కు ' పెట్టె-నీడ ” CSS ఆస్తి. ది ' 10px ” అనేది క్షితిజ సమాంతర మరియు నిలువు ఆఫ్‌సెట్, ఇది నీడ వర్తించాల్సిన స్థానాన్ని నిర్ణయిస్తుంది. ఇంకా ' అటవీ ఆకుపచ్చ ” అనేది నీడ రంగు.
సంకలనం తర్వాత, వెబ్‌పేజీ ఇలా కనిపిస్తుంది:
బాక్స్-షాడో ప్రాపర్టీని ఉపయోగించి సాలిడ్-టైప్ డ్రాప్ షాడో ఉంచబడిందని అవుట్‌పుట్ నిర్ధారిస్తుంది.
ఉదాహరణ 2: బాక్స్-షాడో ప్రాపర్టీని ఉపయోగించి బ్లర్రీ డ్రాప్ షాడోను వర్తింపజేయండి
ఇప్పటికే వర్తింపజేసిన నీడను అస్పష్టంగా చేయడానికి, '' కోసం రంగుకు ముందు మరో సంఖ్యా విలువ చేర్చబడుతుంది. పెట్టె-నీడ ”ఆస్తి. దిగువన నవీకరించబడిన కోడ్‌ని సందర్శించండి:
< శైలి >.boxShadow ఉదాహరణ {
వెడల్పు: 210px;
అంచు: 2px ఘన కార్న్‌సిల్క్;
ఎత్తు: 210px;
నేపథ్య రంగు: తెల్లటి పొగ;
పెట్టె నీడ: 10px 10px 15px అటవీ ఆకుపచ్చ;
}
శైలి >
పై కోడ్ ప్రకారం, నీడ ఇప్పుడు “ 15px ” అస్పష్టంగా. సంకలన దశ ముగిసిన తర్వాత, వెబ్‌పేజీ ఇలా కనిపిస్తుంది:
పై బొమ్మ నీడ ఇప్పుడు అస్పష్టంగా ఉందని చూపిస్తుంది.
ఉదాహరణ 3: డ్రాప్ షాడో ప్రాంతాన్ని విస్తరించడం
స్ప్రెడ్ విలువ 'కి అందించబడింది పెట్టె-నీడ 'నీడ యొక్క ప్రాంతాన్ని విస్తరించడానికి ఆస్తి. స్ప్రెడ్ విలువ తప్పనిసరిగా సంఖ్యా ఆకృతిలో ఉండాలి. దిగువ కోడ్ స్నిప్పెట్‌లో వలె, నీడ ప్రాంతం ''కి విస్తరించబడింది. 20px ”:
< శైలి >.boxShadow ఉదాహరణ {
వెడల్పు: 210px;
అంచు: 2px ఘన కార్న్‌సిల్క్;
ఎత్తు: 210px;
నేపథ్య రంగు: తెల్లటి పొగ;
పెట్టె నీడ: 10px 10px 15px 20px ఫారెస్ట్‌గ్రీన్;
}
శైలి >
అమలు తర్వాత, డ్రాప్ షాడో ఇప్పుడు ఇలా కనిపిస్తుంది:
మీరు చూడగలిగినట్లుగా ఇప్పుడు నీడ యొక్క ప్రాంతం 20px పెరిగింది.
ముగింపు
ది ' పెట్టె-నీడ 'ఆస్తి ఒక' సృష్టికి ఉపయోగించబడుతుంది చుక్క-నీడ ఎంచుకున్న HTML మూలకాలపై ప్రభావం. ది ' చుక్క-నీడ 'ఆస్తి ఐదు విలువలను అంగీకరిస్తుంది,' క్షితిజ సమాంతర ఆఫ్‌సెట్ ',' నిలువు ఆఫ్‌సెట్ ',' అస్పష్టమైన వ్యాసార్థం ',' వ్యాప్తి వ్యాసార్థం 'మరియు' రంగు ”. 'క్షితిజసమాంతర ఆఫ్‌సెట్' మరియు 'నిలువు ఆఫ్‌సెట్' విలువలు డ్రాప్ షాడో ఎక్కడ నుండి ఉద్భవించాలో నీడ కోసం కొలతలను సెట్ చేస్తాయి. 'బ్లర్ వ్యాసార్థం' విలువ నీడను అస్పష్టంగా చేస్తుంది మరియు 'స్ప్రెడ్ వ్యాసార్థం' విలువ నీడ యొక్క ప్రాంతాన్ని విస్తరించింది.