మీ వెబ్ పేజీలో ఒక మూలకం జోడించిన మృదువైన బయటి మిణుగురు వీక్షకుడికి నిలబడటానికి కారణమవుతుంది. ముఖ్యమైన వస్తువు యొక్క వెలుపలి అంచుల చుట్టూ గ్లో వర్తింపచేయడానికి CSS3 మరియు HTML ని ఉపయోగించండి. ప్రభావం Photoshop లో ఒక వస్తువుకు జోడించిన బయటి మిణుగురు వలె ఉంటుంది.
మొదట గ్లోవ్ ఎలిమెంట్ ను క్రియేట్ చేయండి
గ్లో ఎఫెక్ట్స్ ఏ రంగు నేపథ్యంలోనైనా చేయగలవు, కానీ వారు చీకటి నేపథ్యాలపై ఉత్తమంగా కనిపిస్తారు, ఎందుకంటే అప్పుడు గ్లో మరింత మెరుస్తున్నది. ఈ గుండ్రని-మూలలో దీర్ఘచతురస్రాకార బాక్స్ ఉదాహరణలో, ఒక DIV మూలకం మరొక DIV లో ఒక నలుపు నేపధ్యంతో ఉంటుంది. బయటి DIV గ్లో అవసరం లేదు, కానీ అది తెలుపు నేపధ్యంలో గ్లో చూడటానికి కష్టం.
DIV కి గ్లో ఆఫ్ క్లాస్ ఇవ్వండి:
ఎలిమెంట్ యొక్క సైజు మరియు రంగును సెట్ చేయండి
మీరు మూలకం ఎంచుకున్న తర్వాత మీరు మిణుగురు తో అలంకరించు చేయబోతున్నామని, ముందుకు వెళ్లి, మీకు కావలసిన శైలులు, నేపథ్య రంగు, పరిమాణం మరియు ఫాంట్లు వంటి వాటికి కావలసిన శైలులను జోడించండి. ఈ ఉదాహరణ నీలం దీర్ఘచతురస్రం; పరిమాణం 90px ద్వారా 147px కు సెట్ చేయబడింది; మరియు నేపథ్య రంగు # 1f5afe, ఒక రాజ నీలంకు సెట్ చేయబడింది. ఇది బ్లాక్ కంటైనర్ మూలకం మధ్యలో మూలకాన్ని ఉంచడానికి ఒక మార్జిన్ను కలిగి ఉంటుంది.
రౌండ్ ది కార్నర్స్
గుండ్రని మూలలతో ఒక దీర్ఘ చతురస్రం సృష్టిస్తోంది CSS3 తో సులభం. మీ గ్లో తరగతికి సరిహద్దు-వ్యాసార్థ శైలి లక్షణాన్ని జోడించండి. కేవలం అత్యంత అనుకూలత కోసం -webkit- మరియు -moz- ఉపసర్గాలను ఉపయోగించడానికి గుర్తుంచుకోండి.
-వెబ్కిట్-సరిహద్దు-వ్యాసార్థం: 15px;-మోజ్-సరిహద్దు-వ్యాసార్థం: 15px;సరిహద్దు-వ్యాసార్థం: 15px; ఒక బాక్స్ నీడతో గ్లో జోడించండి
గ్లో స్వయంగా బాక్స్ నీడతో సృష్టించబడింది. మీరు దీన్ని పూర్తి మూలకాన్ని మరియు ఒక నీడ వలె ఒక వైపు నుండి వెలిగించకూడదని కోరుకుంటున్నందున, మీరు సమాంతర మరియు నిలువు పొడవులు 0px కి సెట్ చేసారు. ఈ ఉదాహరణలో, బ్లర్ వ్యాసార్థం 15px కు సెట్ చేయబడింది మరియు బ్లర్ యొక్క స్ప్రెడ్ 5px అవుతుంది, కానీ మీరు గ్లో ఎలా ఉండాలనే దాని విస్తృత మరియు సంభావ్యతను నిర్ణయించడానికి ఆ సెట్టింగులతో మీరు ఫిడేలు చేయవచ్చు. రంగు rgb (255,255,190) అనేది RGBA ఆల్ఫా పారదర్శకత కలిగిన పసుపు రంగు 75 శాతం-rgba (255,255,190, .75) కు సెట్ చేయబడింది. మీ ప్రాజెక్ట్ కోసం ఉత్తమంగా పనిచేసే ఒక గ్లో రంగుని ఎంచుకోండి. మూలలోని చుట్టుముట్టే, ఉత్తమ అనుకూలత కోసం బ్రౌజర్ పూర్వపదాలను (-webkit- మరియు -moz-) ఉపయోగించడానికి మరిచిపోకండి.
-వెబ్కిట్ బాక్స్-నీడ: 0px 0px 15px 5px rgba (255, 255, 190, .75);-moz-box-shadow: 0px 0px 15px 5px rgba (255, 255, 190, .75);బాక్స్-నీడ: 0px 0px 15px 5px rgba (255, 255, 190, .75); గ్లోయింగ్ బాక్స్ పరీక్షించండి
ఒకటి లేదా అంతకన్నా ఎక్కువ బ్రౌజర్లలో మండే పెట్టెను పరీక్షించండి మరియు మీ వెబ్ పేజీకి ఉత్తమంగా పనిచేసే మెరుపు ప్రభావాన్ని అందించడానికి అవసరమైన సర్దుబాట్లను చేయండి.
