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