आप भी दिखाएं Neon Light Effect अपने ब्लॉग पर बिना फोटोशाप के

आप भी दिखाएं Neon Light Effect अपने ब्लॉग पर बिना फोटोशाप के

जैसा कि आप उपरोक्त चित्र में देख रहे हैं, आप भी बिना फोटोशाप की सहायता के इस तरह के Neon Light Effect का प्रयोग अपने ब्लॉग पर कर सकते हैं | ऐसे effect ब्लॉग पर प्रदर्शित करना बहुत आसन है | आज की पोस्ट में आप जानेगे कि किसी भी टेक्स्ट पर ये प्रभाव कैसे उत्पन्न किया जाता है ? इस प्रभाव को देखने के लिए ब्राउजर के नये संस्करण का इस्तेमाल करें |

अपना टेक्स्ट HTML Mode में निम्न प्रकार से लिखें |

<p class="neon">Tips Hindi</p>

CSS कोड निम्न प्रकार से लिखें |
1.शैडो के पिंक रंग को बदलने के लिए छटी से दसवीं पंक्ति में fff00de दिखाई दे रहे कलर कोड को बदलें |
2.ग्यारवी पंक्ति : फॉण्ट को बदलने के लिए 'Lobster' की जगह अपनी पसंद के फॉण्ट का नाम लिखें |
3.बाहरवीं पंक्ति : फॉण्ट के साइज को बदलने के लिए '200px' की जगह अपनी पसंद साइज लिखें |
4.तेहरवीं पंक्ति : फॉण्ट के रंग को बदलने के लिए #000 की जगह अपनी पसंद के रंग का कोड लिखें |
5.चौहदवीं पंक्ति : बैकग्राउंड के रंग को बदलने के लिए #000' की जगह अपनी पसंद के रंग का कोड लिखें |
6.पन्द्रवीं पंक्ति : फॉण्ट की alignment को बदलने के लिए center की जगह leftया rightका चयन कर सकते हैं

@import url(http://fonts.googleapis.com/css?family=Lobster);
p.neon {
      text-shadow: 0 0 10px #fff,
                   0 0 20px #fff,
                   0 0 30px #fff,
                   0 0 40px #ff00de,
                   0 0 70px #ff00de,
                   0 0 80px #ff00de,
                   0 0 100px #ff00de,
                   0 0 150px #ff00de;
  font-family: 'Lobster', helvetica, arial;  
       font-size: 200px;
       color:#000;
       background:#000;
       padding:20px;
       text-align:center;
       text-decoration:none;
       border-radius:10px;
height:170px;
padding-top:120px;
     

लाइव डैमो आप नीचे देख सकते हैं

Tips Hindi

दूसरा लाइव डैमो आप नीचे देख सकते हैं

Tips Hindi

क्या आपको ये लेख पसंद आया ? यदि हां !!! तो टिप्पणी अवश्य दें ताकि निरंतर लिखने की चाह बनी रहे |

"टिप्स हिन्दी में ब्लॉग" की हर नई जानकारी अपने मेल-बॉक्स में मुफ्त पाएं !