HTML అనేది వెబ్ పేజీల నిర్మాణాన్ని అందించడానికి ఉపయోగించే భాష, మరియు మూలకాలకు శైలులను వర్తింపజేయడానికి CSS మమ్మల్ని అనుమతిస్తుంది. వెబ్ పేజీలో, నేపథ్య రంగు, ఫాంట్ పరిమాణం, సరిహద్దు, సరిహద్దు-వ్యాసార్థం మరియు బాక్స్-షాడో వంటి విభిన్న శైలులను వర్తింపజేయడానికి విభిన్న ఆస్తి విలువలు సెట్ చేయబడ్డాయి.

ఈ బ్లాగ్ HTML మూలకాలకు నీడ ప్రభావాలను వర్తింపజేసే పద్ధతిని చర్చిస్తుంది.

CSSని ఉపయోగించి HTML ఎలిమెంట్స్‌పై షాడో ఎఫెక్ట్‌ను ఎలా వదలాలి?

ది ' పెట్టె-నీడ రెండు లేదా అంతకంటే ఎక్కువ అదనపు ప్రభావ విలువలను కామాలతో వేరు చేయగల మూలకం చుట్టూ ప్రాపర్టీ నీడను జోడిస్తుంది.

బాక్స్-షాడో ప్రాపర్టీ యొక్క సింటాక్స్ క్రింద వివరించబడింది.

వాక్యనిర్మాణం

పెట్టె-నీడ : ఏదీ లేదు |h-ఆఫ్‌సెట్ v-ఆఫ్‌సెట్ బ్లర్ స్ప్రెడ్ కలర్ | ఇన్సెట్ | ప్రారంభ | మీరు వారసత్వంగా ;

పైన పేర్కొన్న వాక్యనిర్మాణం యొక్క వివరణ క్రింద జాబితా చేయబడింది:

' ఏదీ లేదు ”: ఇది బాక్స్-షాడో ప్రాపర్టీ యొక్క డిఫాల్ట్ విలువ.
' h-ఆఫ్‌సెట్ ”: ఈ విలువ క్షితిజ సమాంతర దూరాన్ని సూచిస్తుంది.
' v-ఆఫ్‌సెట్ ”: ఈ విలువ నిలువు దూరాన్ని నిర్వచిస్తుంది.
' బ్లర్ ”: మూడవ విలువ బ్లర్. దాని విలువను పెంచడం వలన బ్లర్ ప్రభావం పెరుగుతుంది.
' వ్యాప్తి ”: నాల్గవ విలువ నీడ వ్యాప్తిని సూచిస్తుంది. ఇది సానుకూల లేదా ప్రతికూల విలువలను కలిగి ఉంటుంది, ఇక్కడ సానుకూల విలువ వ్యాప్తిని పెంచుతుంది మరియు ప్రతికూల విలువ దానిని తగ్గిస్తుంది.
' రంగు ”: ఈ విలువ ఐచ్ఛికం, ఇది ప్రస్తుత రంగును సూచిస్తుంది.
' ప్రారంభ ”: ఈ విలువ దాని ప్రారంభ విలువ యొక్క ఆస్తిని సెట్ చేస్తుంది.
' మీరు వారసత్వంగా ”: ఈ విలువ దాని మాతృ మూలకం యొక్క ఆస్తిని వారసత్వంగా పొందుతుంది.
' ఇన్సెట్ ”: పెట్టె లోపల నీడలను చేయడానికి ఇన్సెట్ విలువ ఉపయోగించబడుతుంది.

ఆచరణాత్మక ఉదాహరణ ద్వారా నీడ ప్రభావం ఎలా ఉంటుందో చూద్దాం.

ఉదాహరణ

HTML ఫైల్‌లో, ముందుగా, ఒక “ని జోడించండి

”. ఈ

మూలకం లోపల, వెబ్ పేజీకి కంటెంట్‌ని అందించడానికి

మరియు
ట్యాగ్‌లను జోడించండి.

HTML

< div >

< h1 > బాక్స్ షాడో < / h1 >

< p > పెట్టె నీడ: 3px 8px < / p >

< / div >

ఇప్పుడు, జోడించిన HTML మూలకాలకు CSS లక్షణాలను వర్తింపజేయండి.

CSS

div {

పెట్టె-నీడ : 3px 8px ;

}

డివి మూలకం ఆస్తితో వర్తింపజేయబడింది ' పెట్టె-నీడ 'విలువతో' 3px 8px ”, ఇది క్షితిజ సమాంతర ఆఫ్‌సెట్ మరియు నిలువు ఆఫ్‌సెట్‌ను సూచిస్తుంది.

అవుట్‌పుట్

తదుపరి విభాగంలో, HTML మూలకాలు విభిన్న లక్షణాలతో రూపొందించబడతాయి.

CSS

div {

సరిహద్దు : 5px ఘనమైన rgb ( 255 , 111 , 1 ) ;

పెట్టె-నీడ : 3px 8px 9px 4px #f4af1b ;

}

div మూలకానికి వర్తించే అదనపు CSS లక్షణాలు క్రింది విధంగా ఉన్నాయి:

' సరిహద్దు ” ఆస్తికి 5px ఘన rgb(255, 111,1) విలువ కేటాయించబడుతుంది, ఇక్కడ 5px సరిహద్దు వెడల్పును సూచిస్తుంది, ఘనం సరిహద్దు శైలిని సూచిస్తుంది మరియు rgb(255, 111, 1) రంగు.
' పెట్టె-నీడ ” విలువ 3px 8px 9px 4px #f4af1b ఉన్న ఆస్తి h-ఆఫ్‌సెట్‌ని 3pxగా, v-ఆఫ్‌సెట్ 8pxగా, 9pxగా బ్లర్ చేసి, 4pxగా స్ప్రెడ్ చేసి, #f4af1b రంగును నిర్దేశిస్తుంది.

దిగువన చూపిన విధంగా పైన ఇచ్చిన కోడ్ div మూలకాన్ని ప్రదర్శిస్తుంది:

ఇప్పుడు, తదుపరి విభాగంలో, రెండు div మూలకాలను సూచించే రెండు పెట్టెలను సృష్టించండి. మేము ప్రతి ఒక్కదానికి విభిన్న బహుళ బాక్స్-షాడో విలువలను అందిస్తాము మరియు ఫలితాలను గమనిస్తాము.

HTML

= 'box1' >

> బాక్స్ షాడో >

> పెట్టె-నీడ : 3px 8px 9px 4px #f4af1b >

> > >

= 'box2' >

> బాక్స్ షాడో >

> పెట్టె-నీడ : 3px 8px 9px 4px #f4af1b >

>

స్టైల్ బాక్స్1 డివి

#పెట్టె1 {

వెడల్పు : 40% ;

ఎత్తు : 140px ;

సరిహద్దు : 5px ఘనమైన #ff9c83 ;

పెట్టె-నీడ : 8px 10px 15px 20px #807f7f ;

}

ఇక్కడ:

' #పెట్టె1 ” ఐడి బాక్స్ 1తో డివిని యాక్సెస్ చేయడానికి ఉపయోగించబడుతుంది.
' వెడల్పు మూలకం యొక్క వెడల్పు సెట్టింగ్ కోసం ఆస్తి ఉపయోగించబడుతుంది.
' ఎత్తు ”ఆస్తి మూలకం యొక్క ఎత్తును సెట్ చేస్తుంది.
' సరిహద్దు ” అనే విలువ 5px ఘన #ff9c83 ఇవ్వబడింది, ఇక్కడ 5px అంచు యొక్క వెడల్పును సూచిస్తుంది, ఘనం అంచు యొక్క శైలిని సూచిస్తుంది మరియు #ff9c83 రంగు.
' పెట్టె-నీడ 'ఆస్తి ఇలా సెట్ చేయబడుతుంది' 8px 10px 15px 20px #807f7f ” ఇక్కడ 8px క్షితిజ సమాంతర ఆఫ్‌సెట్, 10px నిలువు ఆఫ్‌సెట్, 15px బ్లర్ ఎఫెక్ట్, 20px స్ప్రెడ్ ఎఫెక్ట్ మరియు #807f7f అనేది షాడో రంగు.

శైలి box2 div

#పెట్టె2 {

వెడల్పు : 40% ;

ఎత్తు : 140px ;

సరిహద్దు : 5px ఘనమైన rgb ( 255 , 111 , 1 ) ;

పెట్టె-నీడ : ఇన్సెట్ 4px 8px #f4af1b ;

మార్జిన్-ఎడమ : 350px ;

}

మేము అదే లక్షణాలతో box2 divని స్టైల్ చేసామని గమనించవచ్చు:

బోనస్ చిట్కా: HTML మూలకంపై బహుళ షాడోలను జోడించడం

ది ' పెట్టె-నీడ HTML మూలకానికి బహుళ నీడ ప్రభావాలను జోడించడానికి ఆస్తిని ఉపయోగించవచ్చు. దిగువ ఉదాహరణలో చూపిన విధంగా ప్రతి నీడ మధ్య కామాలను ఉపయోగించి ఇది చేయవచ్చు:

పెట్టె-నీడ : 6px 6px rgb ( 91 , 0 , 143 ) , 12px 5px rgb ( 201 , 8 , 8 ) , 16px 16px 8px rgb ( 226 , 213 , 29 ) ;

మీరు గమనిస్తే, బహుళ నీడలు విజయవంతంగా వర్తించబడ్డాయి:

అదంతా CSS బోర్డర్ షాడో వినియోగానికి సంబంధించినది.

ముగింపు

ది ' పెట్టె-నీడ ” HTML మూలకాలకు షాడో ఎఫెక్ట్‌లను వర్తింపజేయడానికి CSSలోని ప్రాపర్టీ ఉపయోగించబడుతుంది. ఈ లక్షణం ప్రధానంగా క్షితిజ సమాంతర ఆఫ్‌సెట్ మరియు నిలువు ఆఫ్‌సెట్‌ల కోసం రెండు విలువలను కలిగి ఉంటుంది, అయితే బ్లర్ ఎఫెక్ట్, స్ప్రెడ్ రేడియస్ ఎఫెక్ట్, రంగు మరియు మరిన్నింటికి బహుళ విలువలు ఉండవచ్చు. అంతేకాకుండా, మీరు ప్రతి బాక్స్-షాడో ప్రాపర్టీ మధ్య కామాలను ఉపయోగించడం ద్వారా మూలకాలకు బహుళ షాడోలను కూడా జోడించవచ్చు. ఈ వ్యాసం CSS బాక్స్-షాడో ప్రాపర్టీని ఆచరణాత్మక ఉదాహరణలతో వివరించింది.

CSS సరిహద్దు నీడ