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

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

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

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

<div class="stroked">Hindi Tips</div>

CSS कोड निम्न प्रकार से लिखें |
1. पांचवीं पंक्ति : फॉण्ट के साइज को बदलने के लिए '100px' की जगह अपनी पसंद साइज लिखें |
2. छटी पंक्ति : फॉण्ट के रंग को बदलने के लिए #228600 की जगह अपनी पसंद के रंग का कोड लिखें |

यदि आप भी इस तरह के इफेक्ट का प्रयोग करना चाहते हैं तो निम्न कोड को कापी करने के बाद इसे अपने ब्लॉग के साइडबार में स्थापित कर लें |

<style>
.stroked {
  position: relative;
  font-family: 'Alfa Slab One', cursive;
  font-size: 100px;
  color:#228600;
  line-height: 200px;
  text-shadow: 2px 2px 0 #F00, -2px -2px 0 #F00, 2px -2px 0 #F00,
            -2px 2px 0 #F00, 3px 3px 5px #333;
text-align:center;
  }
</style>

<script type="text/javascript">
  WebFontConfig = {
    google: { families: [ 'Alfa+Slab+One::latin' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })(); </script>

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

Hindi Tips