Home-theater-designers
CSS అనేది వెబ్‌పేజీని రూపొందించడానికి డెవలపర్లు ఉపయోగించే భాష. స్క్రీన్‌పై, కాగితంపై లేదా ఏదైనా ఇతర మీడియా రూపంలో HTML అంశాలు ఎలా ప్రదర్శించబడతాయో ఇది నియంత్రిస్తుంది. మీ స్వంత చిత్రంలో వెబ్‌పేజీని స్టైల్ చేయడానికి CSS పూర్తి అనుకూలీకరణ శక్తిని అందిస్తుంది.
మీరు మూలకం యొక్క నేపథ్య రంగు, ఫాంట్ శైలి, ఫాంట్ రంగు, బాక్స్-షాడో, మార్జిన్ మరియు అనేక ఇతర లక్షణాలను CSS ఉపయోగించి మార్చవచ్చు. ఈ గైడ్‌లో బాక్స్-షాడో యొక్క కొన్ని ప్రభావవంతమైన ఉపయోగాల ద్వారా మేము మీకు తెలియజేస్తాము.
CSS బాక్స్-షాడో అంటే ఏమిటి?
ది పెట్టె-నీడ ఆస్తి HTML మూలకాలకు నీడను వర్తింపజేయడానికి ఉపయోగించబడుతుంది. స్టైలింగ్ బాక్స్‌లు లేదా ఇమేజ్‌ల కోసం ఇది ఎక్కువగా ఉపయోగించే CSS లక్షణాలలో ఒకటి.
CSS సింటాక్స్:
box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color];- క్షితిజ సమాంతర ఆఫ్‌సెట్: క్షితిజ సమాంతర ఆఫ్‌సెట్ సానుకూలంగా ఉంటే, నీడ పెట్టెకు కుడి వైపున ఉంటుంది. మరియు క్షితిజ సమాంతర ఆఫ్‌సెట్ ప్రతికూలంగా ఉంటే, నీడ పెట్టెకు ఎడమవైపు ఉంటుంది.
- నిలువు ఆఫ్‌సెట్: నిలువు ఆఫ్‌సెట్ సానుకూలంగా ఉంటే, నీడ పెట్టె క్రింద ఉంటుంది. మరియు నిలువు ఆఫ్‌సెట్ ప్రతికూలంగా ఉంటే, నీడ పెట్టె పైన ఉంటుంది.
- అస్పష్టత వ్యాసార్థం: అధిక విలువ, నీడ మరింత అస్పష్టంగా ఉంటుంది.
- వ్యాప్తి వ్యాసార్థం: నీడ ఎంత విస్తరించాలో ఇది సూచిస్తుంది. సానుకూల విలువలు నీడ వ్యాప్తిని పెంచుతాయి, ప్రతికూల విలువలు వ్యాప్తిని తగ్గిస్తాయి.
- రంగు: ఇది నీడ రంగును సూచిస్తుంది. అలాగే, ఇది rgba, hex లేదా hsla వంటి ఏదైనా రంగు ఆకృతికి మద్దతు ఇస్తుంది.
బ్లర్, స్ప్రెడ్ మరియు కలర్ పారామితులు ఐచ్ఛికం. బాక్స్-షాడో యొక్క అత్యంత ఆసక్తికరమైన భాగం ఏమిటంటే, బాక్స్-షాడో విలువలను ఎన్నిసార్లు అయినా వేరు చేయడానికి మీరు కామాను ఉపయోగించవచ్చు. మూలకాలపై బహుళ సరిహద్దులు మరియు నీడలను సృష్టించడానికి దీనిని ఉపయోగించవచ్చు.
1. బాక్స్ యొక్క ఎడమ, కుడి మరియు దిగువన ఒక డిమ్ బాక్స్-నీడను జోడించండి
మీ లక్ష్య HTML మూలకంతో కింది బాక్స్-షాడో CSS ని ఉపయోగించి మీరు బాక్స్ యొక్క మూడు వైపులా (ఎడమ, కుడి మరియు దిగువ) చాలా మసక నీడలను జోడించవచ్చు:
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;అవుట్‌పుట్:
2. అన్ని వైపులా ఒక డిమ్ బాక్స్-నీడను జోడించండి
మీ లక్ష్య HTML మూలకంతో కింది బాక్స్-షాడో CSS ఉపయోగించి మీరు బాక్స్ యొక్క అన్ని వైపులా కాంతి నీడలను జోడించవచ్చు:
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;అవుట్‌పుట్:
3. దిగువ మరియు కుడి వైపులకు సన్నని పెట్టె-నీడను జోడించండి
మీ లక్ష్య HTML మూలకంతో కింది బాక్స్-షాడో CSS ఉపయోగించి మీరు బాక్స్ దిగువ మరియు కుడి వైపున నీడలను జోడించవచ్చు:
చూడటానికి ఒక సినిమాను కనుగొనడంలో నాకు సహాయపడండి
box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;అవుట్‌పుట్:
4. అన్ని వైపులా డార్క్ బాక్స్-నీడను జోడించండి
మీ లక్ష్య HTML మూలకంతో కింది బాక్స్-షాడో CSS ని ఉపయోగించి మీరు బాక్స్ యొక్క అన్ని వైపులా చీకటి నీడను జోడించవచ్చు:
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;అవుట్‌పుట్:
5. అన్ని వైపులా స్ప్రెడ్ షాడో జోడించండి
మీ లక్ష్య HTML మూలకంతో కింది ఆదేశాన్ని ఉపయోగించి మీరు బాక్స్ యొక్క అన్ని వైపులా స్ప్రెడ్ షాడోని జోడించవచ్చు:
box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;అవుట్‌పుట్:
6. అన్ని వైపులా సన్నని సరిహద్దు నీడను జోడించండి
మీ లక్ష్య HTML మూలకంతో కింది CSS ని ఉపయోగించి మీరు బాక్స్ యొక్క అన్ని వైపులా సాధారణ సరిహద్దు నీడను జోడించవచ్చు:
box-shadow: rgba(6, 24, 44, 0.4) 0px 0px 0px 2px, rgba(6, 24, 44, 0.65) 0px 4px 6px -1px, rgba(255, 255, 255, 0.08) 0px 1px 0px inset;అవుట్‌పుట్:
7. దిగువ మరియు ఎడమ వైపులకు బాక్స్-నీడను జోడించండి
మీరు మీ లక్ష్య HTML మూలకంతో కింది బాక్స్-షాడో CSS ని ఉపయోగించి బాక్స్ దిగువ మరియు ఎడమ వైపులకు నీడను జోడించవచ్చు:
box-shadow: rgba(0, 0, 0, 0.1) -4px 9px 25px -6px;అవుట్‌పుట్:
8. ఎగువ మరియు ఎడమ వైపులకు మసక పెట్టె-నీడను జోడించండి, దిగువ మరియు కుడి వైపులకు చీకటి నీడ
మీరు మీ లక్ష్య HTML మూలకంతో కింది CSS ని ఉపయోగించి బాక్స్ యొక్క ఎగువ మరియు ఎడమ వైపున ఒక కాంతి నీడను అలాగే బాక్స్ దిగువ మరియు కుడి వైపులా చీకటి నీడను జోడించవచ్చు:
box-shadow: rgba(136, 165, 191, 0.48) 6px 2px 16px 0px, rgba(255, 255, 255, 0.8) -6px -2px 16px 0px;అవుట్‌పుట్:
9. అన్ని వైపులా సన్నని, రంగు అంచు నీడను జోడించండి
మీ లక్ష్య HTML మూలకంతో కింది బాక్స్-షాడో CSS ని ఉపయోగించి మీరు బాక్స్ యొక్క అన్ని వైపులా సాధారణ రంగు అంచు నీడను జోడించవచ్చు:
box-shadow: rgba(3, 102, 214, 0.3) 0px 0px 0px 3px;అవుట్‌పుట్:
10. బాక్స్ దిగువ మరియు ఎడమ వైపులకు బహుళ వర్ణ సరిహద్దు నీడలను జోడించండి
మీరు మీ లక్ష్య HTML మూలకంతో కింది CSS ని ఉపయోగించి బాక్స్ దిగువ మరియు ఎడమ వైపులకు బహుళ వర్ణ సరిహద్దు నీడలను జోడించవచ్చు:
box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;అవుట్‌పుట్:
ఆండ్రాయిడ్ నుండి రూట్ లేని కంప్యూటర్‌ను బూట్ చేయండి
11. దిగువన బహుళ వర్ణ సరిహద్దు నీడలను జోడించండి
మీ లక్ష్య HTML మూలకంతో కింది బాక్స్-షాడో CSS ఉపయోగించి మీరు బాక్స్ దిగువన బహుళ వర్ణ సరిహద్దు నీడలను జోడించవచ్చు:
box-shadow: rgba(240, 46, 170, 0.4) 0px 5px, rgba(240, 46, 170, 0.3) 0px 10px, rgba(240, 46, 170, 0.2) 0px 15px, rgba(240, 46, 170, 0.1) 0px 20px, rgba(240, 46, 170, 0.05) 0px 25px;అవుట్‌పుట్:
12. బాక్స్ దిగువ మరియు కుడి వైపులకు బహుళ వర్ణ సరిహద్దు నీడలను జోడించండి
మీరు మీ లక్ష్య HTML మూలకంతో కింది CSS ని ఉపయోగించి బాక్స్ దిగువ మరియు కుడి వైపులకు బహుళ వర్ణ సరిహద్దు నీడలను జోడించవచ్చు:
box-shadow: rgba(240, 46, 170, 0.4) 5px 5px, rgba(240, 46, 170, 0.3) 10px 10px, rgba(240, 46, 170, 0.2) 15px 15px, rgba(240, 46, 170, 0.1) 20px 20px, rgba(240, 46, 170, 0.05) 25px 25px;అవుట్‌పుట్:
13. ఎడమ మరియు కుడి వైపులకు తేలికపాటి నీడలను జోడించండి, దిగువన నీడను విస్తరించండి
మీరు ఎడమ మరియు కుడి వైపులకు కాంతి నీడలను జోడించవచ్చు మరియు మీ లక్ష్య HTML మూలకంతో కింది బాక్స్-షాడో CSS ని ఉపయోగించి బాక్స్ దిగువన నీడను వ్యాప్తి చేయవచ్చు:
box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;అవుట్‌పుట్:
HTML పేజీతో CSS ని ఇంటిగ్రేట్ చేయండి
CSS ని ఉపయోగించి కూల్ బాక్స్-షాడో ఎఫెక్ట్‌లను ఎలా జోడించాలో ఇప్పుడు మీకు తెలుసు, మీరు వాటిని HTML అంశాలతో సులభంగా అనేక విధాలుగా ఇంటిగ్రేట్ చేయవచ్చు.
సంబంధిత: CSS ఫైల్‌లను తనిఖీ చేయడానికి, శుభ్రపరచడానికి మరియు ఆప్టిమైజ్ చేయడానికి 11 ఉపయోగకరమైన సాధనాలు
మీరు దానిని HTML పేజీలోనే పొందుపరచవచ్చు లేదా ప్రత్యేక పత్రంగా జోడించవచ్చు. HTML పత్రంలో CSS ని చేర్చడానికి మూడు మార్గాలు ఉన్నాయి:
అంతర్గత CSS
లోపల పొందుపరిచిన లేదా అంతర్గత శైలి షీట్లు చేర్చబడ్డాయి ఉపయోగించి HTML పత్రం యొక్క విభాగం మూలకం. మీరు ఏ సంఖ్యనైనా సృష్టించవచ్చు ఒక HTML డాక్యుమెంట్‌లోని అంశాలు, కానీ అవి తప్పనిసరిగా వాటి మధ్య జతపరచబడాలి మరియు టాగ్లు. ఒక HTML డాక్యుమెంట్‌తో అంతర్గత CSS ని ఎలా ఉపయోగించాలో ప్రదర్శించే ఉదాహరణ ఇక్కడ ఉంది:
CSS box-shadow
.heading {
text-align: center;
}
.image-box {
display: block;
margin-left: auto;
margin-right: auto;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
Style 4
ఇన్లైన్ CSS
ఒక HTML మూలకానికి ప్రత్యేకమైన శైలి నియమాలను జోడించడానికి Inline CSS ఉపయోగించబడుతుంది. దీనిని HTML మూలకంతో ఉపయోగించవచ్చు శైలి గుణం. శైలి లక్షణం రూపంలో CSS లక్షణాలను కలిగి ఉంటుంది 'ఆస్తి: విలువ' సెమికోలన్ ద్వారా వేరు చేయబడింది ( ; ).
సంబంధిత: CSS గ్రిడ్‌తో రెండు డైమెన్షనల్ వెబ్‌సైట్‌లను ఎలా నిర్మించాలో తెలుసుకోండి
అన్ని CSS లక్షణాలు ఒకే లైన్‌లో ఉండాలి అంటే CSS లక్షణాల మధ్య లైన్ బ్రేక్‌లు ఉండకూడదు. HTML డాక్యుమెంట్‌తో ఇన్లైన్ CSS ని ఎలా ఉపయోగించాలో ప్రదర్శించే ఉదాహరణ ఇక్కడ ఉంది:
CSS box-shadow
Style 4
బాహ్య CSS
HTML పత్రాలకు శైలులను వర్తింపజేయడానికి బాహ్య CSS అత్యంత ఆదర్శవంతమైన మార్గం. ఒక బాహ్య శైలి షీట్ ప్రత్యేక పత్రం (.css ఫైల్) లోని అన్ని శైలి నియమాలను కలిగి ఉంటుంది, తర్వాత ఈ పత్రం ఉపయోగించి HTML పత్రానికి లింక్ చేయబడుతుంది ట్యాగ్. ప్రభావిత HTML ఫైల్‌కు మార్కప్‌లో కనీస మార్పులు అవసరం కాబట్టి HTML పత్రాలకు శైలులను నిర్వచించడానికి మరియు వర్తింపజేయడానికి ఈ పద్ధతి ఉత్తమ పద్ధతి. HTML డాక్యుమెంట్‌తో బాహ్య CSS ని ఎలా ఉపయోగించాలో ప్రదర్శించే ఉదాహరణ ఇక్కడ ఉంది:
దీనితో కొత్త CSS ఫైల్‌ను సృష్టించండి .css పొడిగింపు. ఇప్పుడు ఆ ఫైల్ లోపల కింది CSS కోడ్‌ను జోడించండి:
.heading {
text-align: center;
}
.image-box {
display: block;
margin-left: auto;
margin-right: auto;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}చివరగా, ఒక HTML పత్రాన్ని సృష్టించండి మరియు ఆ పత్రం లోపల కింది కోడ్‌ను జోడించండి:
విండోస్ 7 బూట్ డిస్క్ చేయండి
CSS box-shadow
Style 4
CSS ఫైల్ HTML పత్రం ద్వారా లింక్ చేయబడిందని గమనించండి ట్యాగ్ మరియు href గుణం.
పైన పేర్కొన్న మూడు పద్ధతులు (అంతర్గత CSS, ఇన్లైన్ CSS మరియు బాహ్య CSS) ఒకే అవుట్‌పుట్‌ను ప్రదర్శిస్తాయి-
CSS తో మీ వెబ్‌పేజీని సొగసైనదిగా చేయండి
CSS ని ఉపయోగించడం ద్వారా మీ వెబ్‌పేజీ స్టైలింగ్‌పై మీకు పూర్తి నియంత్రణ ఉంటుంది. మీరు వివిధ CSS లక్షణాలను ఉపయోగించి ప్రతి HTML మూలకాన్ని అనుకూలీకరించవచ్చు. ప్రపంచవ్యాప్తంగా ఉన్న డెవ్‌లు CSS అప్‌డేట్‌లకు సహకరిస్తున్నారు, మరియు 1996 లో విడుదలైనప్పటి నుండి వారు అలా చేస్తున్నారు. అలాగే, ప్రారంభకులకు నేర్చుకోవడానికి చాలా ఉన్నాయి!
అదృష్టవశాత్తూ, CSS బిగినర్స్ ఫ్రెండ్లీ. కొన్ని సాధారణ ఆదేశాలతో ప్రారంభించి, మీ సృజనాత్మకత మిమ్మల్ని ఎక్కడికి తీసుకెళ్తుందో చూడటం ద్వారా మీరు అద్భుతమైన అభ్యాసాన్ని పొందవచ్చు.
షేర్ చేయండి షేర్ చేయండి ట్వీట్ ఇమెయిల్ 10 సాధారణ CSS కోడ్ ఉదాహరణలు మీరు 10 నిమిషాలలో నేర్చుకోవచ్చుCSS తో సహాయం కావాలా? ప్రారంభించడానికి ఈ ప్రాథమిక CSS కోడ్ ఉదాహరణలను ప్రయత్నించండి, ఆపై వాటిని మీ స్వంత వెబ్ పేజీలకు వర్తింపజేయండి.
తదుపరి చదవండి సంబంధిత అంశాలు- ప్రోగ్రామింగ్
- వెబ్ డిజైన్
- CSS
యువరాజ్ భారతదేశంలోని ఢిల్లీ విశ్వవిద్యాలయంలో కంప్యూటర్ సైన్స్ అండర్ గ్రాడ్యుయేట్ విద్యార్థి. అతను పూర్తి స్టాక్ వెబ్ డెవలప్‌మెంట్ పట్ల మక్కువ కలిగి ఉన్నాడు. అతను వ్రాయనప్పుడు, అతను వివిధ సాంకేతికతల లోతును అన్వేషిస్తున్నాడు.
యువరాజ్ చంద్ర నుండి మరిన్నిమా వార్తాలేఖకు సభ్యత్వాన్ని పొందండి
టెక్ చిట్కాలు, సమీక్షలు, ఉచిత ఈబుక్‌లు మరియు ప్రత్యేకమైన డీల్స్ కోసం మా వార్తాలేఖలో చేరండి!
సభ్యత్వం పొందడానికి ఇక్కడ క్లిక్ చేయండి