आपके वेब पेज पर एक तत्व में जोड़ा गया एक नरम बाहरी चमक तत्व को दर्शक के लिए अलग बनाता है। प्रयोग करें CSS3 और HTML एक महत्वपूर्ण वस्तु के बाहरी किनारों के चारों ओर एक चमक लागू करने के लिए। प्रभाव एक बाहरी चमक के समान होता है जो किसी वस्तु में जोड़ा जाता है फोटोशॉप.
चमकने के लिए तत्व बनाएं
चमक प्रभाव किसी भी पृष्ठभूमि पर काम करते हैं, लेकिन वे गहरे रंग की पृष्ठभूमि पर सबसे अच्छे लगते हैं क्योंकि तब चमक अधिक झिलमिलाती लगती है। एक गोल-कोने वाले आयताकार बॉक्स उदाहरण में, एक DIV तत्व एक अन्य DIV तत्व में एक काले रंग की पृष्ठभूमि के साथ रखा गया है। बाहरी डीआईवी चमक के लिए जरूरी नहीं है, लेकिन सफेद पृष्ठभूमि पर चमक देखना मुश्किल है।
तत्व का आकार और रंग सेट करें
आपके द्वारा उस तत्व को चुनने के बाद जिसे आप चमक से अलंकृत करने जा रहे हैं, शैलियों को जोड़ें इसके लिए, जैसे कि पृष्ठभूमि का रंग, आकार और फोंट।
यह उदाहरण एक नीला आयत है; आकार 147px गुणा 90px पर सेट है; और पृष्ठभूमि का रंग #1f5afe पर सेट है, जो शाही नीला है। इसमें तत्व को काले कंटेनर तत्व के बीच में रखने के लिए एक मार्जिन शामिल है।
कोनों को गोल करें
CSS3 के साथ गोल कोनों के साथ एक आयत बनाना आसान है। सीमा-त्रिज्या शैली की संपत्ति को अपनी चमक वर्ग में जोड़ें। बस use का उपयोग करना याद रखें -वेबकिट- तथा -मोज- उच्चतम संगतता के लिए उपसर्ग।
-वेबकिट-सीमा-त्रिज्या: 15px;
-मोज़-बॉर्डर-त्रिज्या: 15px;
सीमा-त्रिज्या: 15px;
एक बॉक्स छाया के साथ चमक जोड़ें
चमक स्वयं एक बॉक्स छाया के साथ बनाई गई है। क्योंकि यह छाया की तरह एक तरफ से चमक को प्रक्षेपित किए बिना पूरे तत्व को हल करता है, क्षैतिज और लंबवत लंबाई को 0px पर सेट करें।
इस उदाहरण में, ब्लर रेडियस को 15px पर सेट किया गया है और ब्लर का फैलाव 5px है, लेकिन आप यह निर्धारित करने के लिए उन सेटिंग्स के साथ फील कर सकते हैं कि आप ग्लो को कितना चौड़ा और फैलाना चाहते हैं। रंग आरजीबी (255,255,190) आरजीबीए अल्फा पारदर्शिता के साथ एक पीला रंग है जो 75 प्रतिशत पर सेट है-आरजीबीए (255,255,190, .75). एक चमकदार रंग चुनें जो आपके प्रोजेक्ट के लिए सबसे अच्छा काम करे। कोनों को गोल करने की तरह, ब्राउज़र उपसर्गों का उपयोग करना न भूलें (-वेबकिट- तथा -मोज-) सर्वोत्तम संगतता के लिए।
-वेबकिट-बॉक्स-छाया: 0px 0px 15px 5px आरजीबीए (255, 255, 190, .75);
-मोज़-बॉक्स-छाया: 0px 0px 15px 5px आरजीबीए (255, 255, 190, .75);
बॉक्स-छाया: 0px 0px 15px 5px आरजीबीए (255, 255, 190, .75);