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